Cara Pasang Dancing Vertical Slide Menu

Beberapa macam menu dalam blog merupakan navigasi penting untuk pengunjung berselancar mencari yang mereka perlkukan. Pilihannya bisa anda suguhkan menu horizontal atau vertikal. Tergantung sejauh mana anda memodifikasi menu tersebut sehingga menjadi atraktif dan menarik. Kali ini saya akan share cara pasang dancing vertical slide menu dengan menggunakan jquery warna hitam, sehingga tampilannya cukup menarik dan terkesan tegar. Ok langsung saja kita bahas cara pembuatan Dancing Vertical Slide Menu di blog anda. ikuti langkah berikut.


Log in ke blog anda
Klik Rancangan (bila anda menggunakan tampilan dashboard new blogger view, langsung saja klik Template)
Klik Edit Template
Masukkan ko9de berikut di atas kode </head>

<script src='http://bloekoetoek-blogonol.googlecode.com/files/jquery.js' type='text/javascript'/><script src='http://bloekoetoek-blogonol.googlecode.com/files/sliding_effect.js' type='text/javascript'/>

Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>

ul#sliding-navigation li.sliding-element h3{color:#fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWge00FZ5pSrwVWwrSXNQJ-HOnsjb9DhrmYFivNJgGvezCsKCvx4_w3i9VjZaagf7fgzZqAZJQwoptqttoPnz4ApHfTDfLKo5nEJtQwMoiMQqG_S5t7sgAte4VqM-9pQ-2EPZ4lEl68aE/) repeat-y; font-weight:normal}
#hide{position:absolute; top:30px; left:-190px}
ul#sliding-navigation{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQVK8h2jzsjnudOwSk4rJuzqwRDG3XgetiGeth0X3NXFzV6mawLBprkEJuK8Rzh8bFlm3uPIjh6KhyphenhyphenKjNw1GkAF4jJfiCPjsBI-gOBX4hLQg4XSvxth-Dx5r_29ukoE-mq7kVpQ1OWoY0/); list-style:none; font-size:14px; margin:30px 0}
ul#sliding-navigation li.sliding-element h3, ul#sliding-navigation li.sliding-element a{display:block; width:150px; padding:5px 15px; margin:0; margin-bottom:5px}
ul#sliding-navigation li.sliding-element h3{color:#fff; background:#333; border:1px solid #1a1a1a; font-weight:normal}
ul#sliding-navigation li.sliding-element a{color:#999; background:#222; border:1px solid #1a1a1a; text-decoration:none}
ul#sliding-navigation li.sliding-element a:hover{color:#ff6}

Klik Simpan Template.
Sekarang klik lagi Rancangan (bila anda menggunakan tampilan dashboard new blogger view, langsung saja klik Layout atau Tata Letak)
Klik Add Gadget atau Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<ul id="sliding-navigation"><li class="sliding-element"><h3>MASUKKAN JUDUL ANDA DI SINI</h3></li><li class="sliding-element"><a href="MASUKKAN ALAMAT LINK ATAU ALAMAT POSTING ANDA DI SINI" rel="nofollow" target="_blank">JUDUL 1</a></li><li class="sliding-element"><a href="MASUKKAN ALAMAT LINK ATAU ALAMAT POSTING ANDA DI SINI" rel="nofollow" target="_blank">JUDUL 2</a></li><li class="sliding-element"><a href="MASUKKAN ALAMAT LINK ATAU ALAMAT POSTING ANDA DI SINI" rel="nofollow" target="_blank">JUDUL 3</a></li><li class="sliding-element"><a href="MASUKKAN ALAMAT LINK ATAU ALAMAT POSTING ANDA DI SINI" rel="nofollow" target="_blank">JUDUL 4</a></li><li class="sliding-element"><a href="MASUKKAN ALAMAT LINK ATAU ALAMAT POSTING ANDA DI SINI" rel="nofollow" target="_blank">JUDUL 5</a></li></ul>
<span style="font-size:4px;"><a href="http://blogonol.blogspot.com/" rel="nofollo" target="_blank">blogonol</a></span>

Langkah terakhir klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"