Cara Membuat Animated JQuery Link Di Blogspot

Rasanya sudah cukup lama juga blog ini terbengkalai. Maklum, akhir-akhir ini saya tengah di sibukan oleh sebuah pekerjaan baru yang jika saya pikir-pikir sama sekali tidak ada hubungannya dengan skill yang saya miliki, maka dari itu saya membutuhkan banyak waktu untuk mempelajari pekerjaan yang baru saja saya peroleh. ( Koq jadi curhat yah ? )

Hingga saat ini saya belum dapat ide apapun untuk menulis. Namun saya harus tetap menulis entah apapun jadinya tulisan ini nanti. Sebab jika dilihat dari Alexa Rank, blog ini mengalami penurunan yang sangat drastis. Dulu sempat menyentuh angka 500.000, sekarang malah terjun bebas menyentuh angka 2.000.000. Hahaha... Entah apa sebabnya, saya juga belum jelas.

Jalan-jalan di dunia maya dan bertanya pada paman google, akhirnya ada juga bahan untuk tulisan sekedar menambah koleksi artikel. Setelah mengetikan kata-kata yang tidak jelas dan membosankan, akhirnya tujuan penulisan mendarat pada sebuah judul yaitu Cara Membuat Animated JQuery Link Di Blogspot.

1. Buat sobat Dente On The Blog yang ingin memasang animasi ini, silahkan menyimak :)

2. Seperti biasa Sign-in ke Blogger dan klik Rancangan dan klik Edit HTML

3. Centang "Expand Widget Templates"

4. Cari Kode dengan menggunakan Ctrl + F </head>

5. Silahkan Copy dan pastekan tepat diatas </head> kode di bawah ini

$(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> 
<script type='text/javascript'> 
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;); 
</script> 

6. Simpan dan klik elemen halaman >> tambah gadget

7. Pilih "HTML /java script" dan copy paste kode berikut

<ul id="sliding-navigation"> 
<li class="sliding-element"><a href="Link1">Nama1</a></li>    
<li class="sliding-element"><a href="Link2">Nama2</a></li>     
<li class="sliding-element"><a href="Link3">Nama3</a></li>     
<li class="sliding-element"><a href="Link4">Nama4</a></li>  
<li class="sliding-element"><a href="Link5">Nama5</a></li> 
<li class="sliding-element"><a href="Link6">Nama6</a></li> 
<li class="sliding-element"><a href="Link7">Nama7</a></li> 
<li class="sliding-element"><a href="Link8">Nama8</a></li> 
<li class="sliding-element"><a href="Link9">Nama9</a></li> 
<li class="sliding-element"><a href="Link10">Nama10</a></li> 
</ul>

Silahkan ganti huruf yang berwarna merah  dengan alamat URL sobat, dan yang berwarna pink dengan nama yang sobat kehendaki.

Simpan dan Selesai :)

Demonya silahkan klik disini

Sumber : bloggertrix.com