Link Bergerak Ketika Di Sorot

Akhirya bisa online lagi setelah beberapa hari ini di sibukkan kegiatan offline yang mengharuskan meninggalkan kegiatan blogging untuk sementara waktu. Pada kesempatan yang sangat berharga ini saya akan membahas sedikir tutorial ringan tentang cara membuat link bergerak ketika di sorot mouse.

Trik ini sangat cocok bagi sobat blogger yang igin memperindah tampilan blognya. Silahkan lihat demo di bawah. Bagi yang tertarik, silahkan ikuti tutorial berikut ini.

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7
• Link 8
• Link 9
• Link 10

1. Login ke akun blog sobat.
2. Pilih design lalu masuk edit HTML.
3. Cari kode </head> lalu pasang kode di bawah ini di atas kode </head> tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<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>

4. Setelah itu save template.

Untuk menambah linknya, silahkan pergi ke page elemen >> add gadget >> HTML/Java Script letaknya terserah sobat mau di pasang dimana. Kemudian masukkan kode di bawah ini ke dalamnya.

<ul id="sliding-navigation">

<li class="sliding-element"><a href="#">Link 1</a></li>

<li class="sliding-element"><a href="#">Link 2</a></li>

<li class="sliding-element"><a href="#">Link 3</a></li>

<li class="sliding-element"><a href="#">Link 4</a></li>

<li class="sliding-element"><a href="#">Link 5</a></li>

<li class="sliding-element"><a href="#">Link 6</a></li>

<li class="sliding-element"><a href="#">Link 7</a></li>

<li class="sliding-element"><a href="#">Link 8</a></li>

<li class="sliding-element"><a href="#">Link 9</a></li>

<li class="sliding-element"><a href="#">Link 10</a></li>

</ul>

Silahkan di edit link nya sesuai kebutuhan.
Semoga bermanfaat.
Alhamdulillah...