Cara Membuat Shadow Menu Navigation Pada Blog

Kamu Pasti Tahu Apa Itu Menu Navigasi kan ? dan Menu Navigasi Itu Pasti Berbeda-beda Di Setiap Blog/Website , Nah Sekarang Saya Akan Memberi Menu Navigasi Yang Di Beri Effect Shadow Saat Di Sentuh.. Nih Dia Caranya!

Caranya :

1. Login Ke Blog Kamu

2. Masuk Ke Bagian Tata Letak/ Layout

3. Kamu Buat 1 Gadget HTML/JavaScript Di Bagian Bawah Header

4. Kamu Copy/Paste Script HTML Di Bawah Ini Lalu Save.

<ul id="shadowmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

5. Lalu Kamu Masuk Ke Bagian Edit HTML, Di Situ Kamu Cari Kode ]]></b:skin>  Lalu Kamu Copy/Paste Script CSS DiBawah Ini Tepat Di Atas Kode ]]></b:skin>.

#shadowmenu {
font-size:24px;
list-style:none;
padding:0;
margin:120px auto;
width:100%;
text-align:center;
}
#shadowmenu li a, #shadowmenu li a:hover {
transition:all 100ms ease;
}
#shadowmenu li a {
text-decoration:none;
color:#666;
padding:5px 10px;
border-radius:5px;
background:rgba(255,255,255,0.2);
box-shadow:0 2px #555;
position:relative;
}
#shadowmenu li a:hover {
color:#666;
}
#shadowmenu li {
display:inline-block; margin-right:10px;
}
#shadowmenu li a:active {
box-shadow:none;
bottom:-2px;
}
#shadowmenu li a:hover{
color:#fff;
text-shadow:0 0 10px #fff;
}

6. Jika Sudah Save Template dan Liat Hasilnya :D ... 

NB.

  Di Script HTML Kamu Bisa Mengganti Nama Menu dan Link Tujuannya Dengan Cara Misalnya Menu "HOME" Kamu Beri Link Blog Kamu http://www.blogkamu.blogspot.com/ Linknya Di Simpan Di Tempat Tanda # Kress , Dan Jangan Lupa Hapus Tanda # Kressnya Kalau Sudah Menyimpan Link.