Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Menu Vertikal Inner Shadow Dengan CSS3

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.

Berlangganan artikel via email

25 Response to "Menu Vertikal Inner Shadow Dengan CSS3"

Wah keten ni mas tutorialnya, mantap ane suka CSS3

Balas

waduhh pake css.. entar berat nambah dong k :D .

Balas

Mantep soB. Kapan2 boleh dicoba nie kalau bikin blog baru

Balas

Belum pernah nyoba pke tampilan yg vertikal..jd kepingin juga nih mas...nanti2 :)
Trims ya mas andes buat tutornya :)

Balas

Boleh dicoba gan? :))

Balas

wah bikin blog berat gak gan ?

Balas

akan dicoba, thanks :)

Balas

ijin bookmark sobat, penting nih, makasi informasinya . sangat bermanfaat

Balas

Blognya 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.
Terima kasih banyak sudag menyajikan tutorial yg bermanfaat sobat

Balas

Kern nih widgetnya....utk menghemat tempat,..

Balas

tenang aja mbak tuh css udah diet kok :)

Balas

sangat saya persilahkan mas kalo mao coba

Balas

sangat boleh gan,.. silahkan saja kalo mao coba :)

Balas

Saya juga byk belajar dari blognya mas andes :)

Balas

Saya juga byk belajar dari blognya mas andes :)

Balas

sebelum dicoba silahkan lihat demo dulu gan :)

Balas

silahkan mas.. terimakasih kunjungannya

Balas

waduh 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 :)
terimakasih atas kunjungan rutinnya mas :D

Balas

iya nih hemat uang juga kok :) 100% gatis soalnya..
terimakasih sudah berkunjung gan

Balas

ijin pakai yah? kebetulan saya bikin blog ecek-ecek :)

Balas

bagus sekali sob tutorialnya,,

Balas

silahkan mbak pakai saja, mau pake yang ini juga boleh:
http://mas-andes.blogspot.com/2013/04/menu-vertikal-sexy-panels-dengan-css.html
terserah tinggal pilih aja :) hehehhe..
terimakasih kunjungannya

Balas

terimakasih support dan kunjungannya mas..

Balas

wah, ribet juga cara bikinnya. tapi saya sudah kapok ngedit html... biasanya them-ku jadi rusak

Balas

izin nyimak dulu ya... mau pasang belum paham

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Menu Vertikal Inner Shadow Dengan CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode