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.
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.
Ganti tanda # dengan URL link tujuan.
Tulisan berwarna biru silahkan ganti dengan yang di inginkan.
7. Save dan lihat hasilnya.
25 Response to "Menu Vertikal Inner Shadow Dengan CSS3"
Wah keten ni mas tutorialnya, mantap ane suka CSS3
Balaswaduhh pake css.. entar berat nambah dong k :D .
BalasMantep soB. Kapan2 boleh dicoba nie kalau bikin blog baru
BalasBelum pernah nyoba pke tampilan yg vertikal..jd kepingin juga nih mas...nanti2 :)
BalasTrims ya mas andes buat tutornya :)
Boleh dicoba gan? :))
Balaswah bikin blog berat gak gan ?
Balasakan dicoba, thanks :)
Balasijin bookmark sobat, penting nih, makasi informasinya . sangat bermanfaat
BalasBlognya ini memang benar-benar sangat berguna buat pembelajaran saya sobat, karena setelah saya lihat^ semua isi di artikel blog ini semuanya sangat penting dan cocok untuk pembelajaran saya terutama tutorialnya.
BalasTerima kasih banyak sudag menyajikan tutorial yg bermanfaat sobat
Kern nih widgetnya....utk menghemat tempat,..
Balastenang aja mbak tuh css udah diet kok :)
Balassangat saya persilahkan mas kalo mao coba
Balassangat boleh gan,.. silahkan saja kalo mao coba :)
BalasSaya juga byk belajar dari blognya mas andes :)
BalasSaya juga byk belajar dari blognya mas andes :)
Balassebelum dicoba silahkan lihat demo dulu gan :)
Balassilahkan mas.. terimakasih kunjungannya
Balaswaduh mas PP sangat merendah nih.. padahal dilihat dari blognya aja udah jelas lebih berpotensi ketimbang blog reot saya ini. apalagi tuh mas budi, jelas2 saya yang masih awam dan perlu banyak belajar dari mas budi dan mas PP yang sudah banyak pengalaman daripada saya yang baru terjun ke blogger :)
Balasterimakasih atas kunjungan rutinnya mas :D
iya nih hemat uang juga kok :) 100% gatis soalnya..
Balasterimakasih sudah berkunjung gan
ijin pakai yah? kebetulan saya bikin blog ecek-ecek :)
Balasbagus sekali sob tutorialnya,,
Balassilahkan mbak pakai saja, mau pake yang ini juga boleh:
Balashttp://mas-andes.blogspot.com/2013/04/menu-vertikal-sexy-panels-dengan-css.html
terserah tinggal pilih aja :) hehehhe..
terimakasih kunjungannya
terimakasih support dan kunjungannya mas..
Balaswah, ribet juga cara bikinnya. tapi saya sudah kapok ngedit html... biasanya them-ku jadi rusak
Balasizin nyimak dulu ya... mau pasang belum paham
Balas