Membuat Menu Link Bergoyang

Buat sobat blogger yang suka otak atik template, Menu Link Bergoyang ini bisa jadi alternatif untuk menambah tampilan blog anda lebih keren. Saya sebut Menu Link Bergoyang sebab link ini memiliki efek slide, yaitu ketika pointer mouse diarahkan diatas link, maka link tersebut akan bergoyang seperti dicolek sama tangan, Berikut Trik Membuat Menu Link Bergoyang yang saya maksud :

D E M O

Langkah 1
Login ke blogger dengan akun anda.
Langkah 2
Klik Rancangan.
Langkah 3
Dan KLik tab Edit HTML.
Langkah 4
Cari kode di bawah ini atau yang mirip dengan kode ini : </head>
Langkah 5
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/AVvXsEigS-cxAAhhYfK5OSiRbzdVCQI713iMe8MjChzk7ZlTL2mZ2E8t-aHMV0qThDcjdk25yiKYQ1XllH8Oykylx4SDViAU8KUZiRCfV7pdx8S9mqBslg2ygSY6Nhe0znYyEBUIDJUhHAs-oZd2/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.