Cara membuat Menu Vertical dengan Css3 Shadow Style

Pada postingan kali ini saya, saya ingin membagi ilmu buat sobat sobat bloger. Trik yang akan saya posting kali ini adalah membuat Menu Vertikal dengan menggunakan CSS3 yang mempunyai style Shadow( Bayangan ). Trik kali ini sangat cocok untuk blog kita disamping memperindah halaman sangat simpel untuk diterapkan. Saya dapat ide dari berbagai sobat sobat bloger saya yang memang saya akui sudah mempunyai kemampuan yang baik didunia pemprograman. Jadi widget kali ini sudah lengkap dengan code CSS3 alias satu paket. Oke daripada panjang lebar dan kebahisan kata kata, kita langsung aja menuju TKP :

• Login ke Blog sobat
• Pilih Layout/tata letak
• Add Gadget
• Copas Code dibawah ini

<style>
.rivai_menu{
font: bold 14px Arial;
width: 190px;         /* lebar menu */
}
.rivai_menu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.rivai_menu ul li{
margin:0;
padding:0;
}
.rivai_menu 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 #a5a5a4;
-moz-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
-webkit-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
text-shadow: 0 -1px 1px #a0fef8;
-moz-transition: all 0.2s ease-in-out;
-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;
}
.rivai_menu ul li a:hover, .rivai_menu ul li a.selected{
color:#fd0a04;
-moz-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
-webkit-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
}
</style>

<div class="rivai_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Trik Blog</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Template</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">About Me</a></li>
<li><a href="http://rivai-silaban.blogspot.com/">Contact Me</a></li>
</ul>
</div>

Keterangan gambar

width: 190px;  Lebar Menu
#              Link Halaman 
Home           Nama Halaman

Salam bloger...!! semoga artikel kali ini yang sudah susah payahnya saya posting dapat berguna buat sobat sobat bloger..

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 2:13 PM