membuat Accordion Menu dengan Efek Transisi Keren

Membuat Accordion Menu dengan Efek Transisi Keren - Masih tentang Trik Blogger, sesuai judul post ini Membuat Accordion Menu dengan Efek Transisi Keren, kali ini Dsd-syndicate kembali berbagi salah satu komponen yang digunakan blog Dsd-Syndicate ini, yaitu Menu Accordion / Menu Vertikal yang ada di blog ini.

lihat gambar ini:

check this on:

saya menggunakan tampilan blogger yang lama

1. Masuk ke dashboard blogger, Klik rancangan, pilih Edit HTML

2. Cari kode ]]></b:skin> lalu letakkan atau paste kode berikut di atas kode ]]></b:skin> tadi

.navbox {position:relative;float:left;}ul.nav {list-style:none;display:block;width:220px;position:relative;padding:0px 0 0px 0;-webkit-background-size: 50% 100%;-moz-background-size: 50% 100%;}li {margin: 10px 0 0 50px;}ul.nav li a { font-family:Arial,Helvetica,Sans-serif;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;-webkit-transition:all 0.3s ease-out;-moz-transition: all 0.3s ease-out;background:#ffc000 ;color:#1e1e1e;padding:3px 15px 3px 15px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:0px;width:150px;display:block;text-decoration:none;-webkit-box-shadow:4px 2px 0px #1e1e1e;-moz-box-shadow:4px 2px 0px #1e1e1e;}ul.nav li a:hover {background:#1e1e1e;color:#fff;padding: 3px 15px 3px 30px;}

3. Simpan Template
4. Klik Elemen Laman, Tambah Gadget > HTML/Javascript > lalu masukkan kode berikut:

<div class="navbox"> <ul class="nav"> <li><a href="http://andi-techno.blogspot.com/">Accordion Menu</a></li> <li><a href="YOURLINK">Menu1</a></li> <li><a href="YOURLINK">Menu2</a></li> <li><a href="YOURLINK">Menu3</a></li> <li><a href="YOURLINK">Menu4</a></li> </ul> </div>

Edit:
Ganti teks "YourLink" dengan link yang mau dijadikan menu
Ganti Teks "Menu" dengan Nama Menu sobat


5. Klik simpan, Lalu lihat hasilnya :D

Selesai Deh ..
Terima Kasih Semoga Bermanfaat ok...

Related Post :