Membuat Link Senggol

Buat sobat blogger yang blognya suka menampilkan banyak fariasi, link senggolini bisa jadi alternatif untuk menambah tampilan blog anda. linksenggol ini memiliki efek slide, yaitu ketika pointer mouse diarahkan diatas link, maka link tersebut akan bergeser seperti disenggol....hehehee....., dan akan terlihat bergoyang bila diarealink pointer mouse diarahkan keatas dan kebawah.
Berikut tutorialnya

1. Login ke blogger dengan ID anda.
2. Dan KLik tab Edit HTML. 

3. Jangan lupa Klik tombol "Expand Widget Templates"

Copy kode di bawah ini dan taruh 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/AVvXsEiZ9XmhK7vGwValtyy0n_MPEamLDYCiV2RQHa51CwgE-7jkwjEkyvNaqxeWLDp6ukalvQ-Nl6BJZtEaLJx1gjjsn3czj9tcfDMeFZVDUol4gXRHEsyFat0lEx7CNlSwpmrLiWid9IcVSK9x/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>

4. Copy dan paste kode dibawah ini pada gadget

<div class  id="sliding-navigation">   
<ul class="listpanah">
   
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   1</a></li>  
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL  2</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   3</a></li>  
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   4</a></li>  
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   5</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   6</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   7</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   8</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   9</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL 10</a></li>
  
</ul></div>


Selamat mencoba dan Semoga bermanfaat.... 

Share this post: