Link List Untuk Blog

Widget ini sangat sesuai untuk mereka yang suka meletakkan senarai link blog lain di blog mereka. Cara mudah untuk digunakan. Tidak jauh beza dengan kaedah link list yang anda gunakan cuma bezanya, kaedah ini adalah menggunakan jQuery sebagai asas CSS. Style link list anda akan lebih menarik. Jom kita cuba gunakan kaedah ini.

1) Pergi ke Dashboard >> Layout >> Edit HTML dan anda cari tag </head>.

2) Copy kod di bawah dan masukkan SEBELUM tag di atas:-

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

3) Klik "Save" dan pergi ke Dashboard >> Layout >> Page Element kemudian klik "Add A Gadget" dan pilih HTML/Javascript.

4) Copy kod di bawah dan masukkan ke dalam ruang HTML/Javascript:-

<ul id="sliding-navigation">
    
<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>
    
<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>
    
<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>
    
<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>
    
<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>

<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>

<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>

<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>

<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>

<li class="sliding-element"><a href="URL ANDA">NAMA LINK</a></li>
 
</ul>

Jika semuanya ok, klik save. Selesai.

**NOTA** Semua yang dihighlightkan berwarna BIRU hendaklah ditukar mengikut kesesuaian anda.

Untuk demo, anda boleh lihat di SINI.