Menu Vertikal Inner Shadow Dengan CSS3

Menu Vertikal Inner Shadow Dengan CSS3 – merupakan salah satu bentuk untuk melengkapi kebutuhan blog adalah membuat agar semudah mungkin setiap visitor dapat menemukan konten yang sedang mereka cari dengan menunjukkan melalui menu yang terdapat didalam bagian blog.

Menu blog walaupun berbentuk sederhana namun itu termasuk dalam bagian yang penting didalam sebuah blog. Menu Vertikal Inner Shadow Dengan CSS3 ini sangat sederhana sekali namun hasilnya saya kira tidak mengecewakan untuk dipasang kedalam sidebar blog. Bentuk tampilan dari Menu Vertikal Inner Shadow Dengan CSS3 ini sangat ramping dan dinamis seperti halnya yang terlihat pada gambar ataupun bentuk dari aslinya yang ada dihalaman demo. Apabila mungkin berminat untuk memasang, maka berikut ini adalah tutorial cara memasang Menu Vertikal Inner Shadow Dengan CSS3 pada blog:

1. Login ke akun blogger.
2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

/* Menu Vertikal Shadow Dengan CSS3*/

.shadowblockmenu-v{
font: bold 14px Germand;
width: 260px; /* width of menu */
}

.shadowblockmenu-v ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}

.shadowblockmenu-v ul li{
margin:0;
padding:0;
}

.shadowblockmenu-v ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}

/* Menu Vertikal Shadow Dengan CSS3*/

5. Simpan Template.
6. Selanjutnya lalu klik Tata Letak > Tambah Widget > HTML/Javascript kemudian copy kode berikut ini lalu paste kedalam kolom HTML/Javascript.

<div class="shadowblockmenu-v">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>

Keterangan:
Ganti tanda # dengan URL link tujuan.
Tulisan berwarna biru silahkan ganti dengan yang di inginkan.

7. Save dan lihat hasilnya.