Menu Vertikal Dengan Efek Bayangan

Menu vertikal dengan efek bayangan ini sebenarnya sama dengan menu vertikal lainnya. Bedanya hanya terletak pada bentuk dan tampilannya saja. Menu vertikal ini dilengkapi dengan efek bayangan yang akan berfungsi ketika cursor mengenai widget tersebut. Pembuatannya hanya menggunakan CSS dan dijamin tidak memberatkan loading blog. Baiklah, sekarang mari kita bahas cara membuat menu vertikal dengan efek bayangan. Ikuti langkah berikut.

Log in ke blogger
Klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<style>
.blogonol_blockmenu{font:bold 14px Germand; width:190px}
.blogonol_blockmenu ul{border:1px solid #eee; padding:0; margin:0; list-style:none}
.blogonol_blockmenu ul li{margin:0; padding:0}
.blogonol_blockmenu 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; -moz-box-shadow:inset 7px 0 10px rgba(114,114,114,0.6); -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; -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}
.blogonol_blockmenu ul li a:hover, .blogonol_blockmenu 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); -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)}
</style>
<div class="blogonol_blockmenu">
<ul>
<li><a href="MASUKKAN ALAMAT BLOG ANDA DI SINI">Home</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI">JUDUL 1</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI">JUDUL 2</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI">JUDUL 3</a></li>
<li><a href="MASUKKAN LINK ANDA DI SINI">JUDUL 4</a></li>
</ul>
</div>

Selanjutnya perhatikan tulisan dengan cetak tebal, ganti sesuai petunjuk dan kebutuhan anda. Demikian tutorial cara membuat menu Vertikal dengan efek bayangan. Semoga dapat memberi manfaat bagi kita semua. Amin. Selamat mencoba dan sukses selalu.

"keep spirits and do the best