- Login ke blogger dengan akun anda.
- Klik Rancangan.
- Dan KLik tab Edit HTML.
- Cari kode di bawah ini atau yang mirip dengan kode ini </head>.
- Copy kode di bawah ini dan letakkan sebelum kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}
//]]>
</script>
<style type="text/css">
ul.listpanah {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuRP_E4KTEsvuL5nAsbBVRmittMmVTFusD_u2sakkrvgmIu3p8TFb88ftdxVHUzb7lJyK0alkZxVFYh4bPK8DHhvrr8OfX1Tf_bi1n77Sbl6bWdSnu-HIQPWobGgIlw4lJkST69dBqwZ41/s12/List+6.jpg');}
a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#669CFF;text-decoration:none;}
</style>
STOP...! Jangan tutup dulu Tutorial masih belum usai perjalanannya Kita.
Langkah selanjutnya anda tinggal
menampilkan Link senggol tersebut pada sidebar blog anda. Berarti anda
tinggal menambah gadget. Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman.
2. Tambah Gadget.
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript.
4. Copy dan paste kode dibawah ini pada gadget tersebut :
<div class id="sliding-navigation">
<ul class="listpanah">
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK1</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 2</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK3</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 4</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 5</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK6</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 7</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 8</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK9</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 10</a></li>
</ul></div>
Selesai sudah tutorial kali ini, Selamat mencoba dan Semoga bermanfaat.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan atas.
Jangan lupa luangkan waktu untuk berkomentar di Lora Malunk Blog......
Terima Kasih
Sumber : http://lora-malunk.blogspot.com/2011/11/membuat-menu-link-bergoyang.html
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Link Bergoyang . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
