Cara Membuat Link Senggol Sederhana Pada Blog - RoufTracal.blogspot.com

Jumat, 09 Maret 2012

Cara Membuat Link Senggol Sederhana Pada Blog

Tutorial ini saya dapatkan dari "carabuatwebgratis" pertama kali saya liat, langsung saja tertarik, lalu saya coba dan hasilnya bisa dilihat disamping.
Link senggol ini bisa jadi alternatif untuk menambah tampilan blog anda. Saya sebut link senggol sebab link ini memiliki efek slide, yaitu ketika pointer mouse diarahkan diatas link, maka link tersebut akan bergeser seperti disenggol....hehehee....., dan akan terlihat bergoyang bila diarea link pointer mouse diarahkan keatas dan kebawah.
Berikut bentuk Link senggol yang saya maksud :

Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

5. Copy kode di bawah ini dan taruh sebelum kode :

<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/AVvXsEh56Ca7jIIKJGc63LBd-lamDxmYG8Wx3aTJRSEVBTFzmxD4If6Bz2hsS8D37TBHFwHmhcwIbcJjrMq6-w11r0NfdaVUhL5aW8dqJBSnxnYW0vLi9-jrUg6hme-_GepywyqqNU3wD_QTTYBR/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>

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 :

Ok...., Selamat mencoba dan Semoga bermanfaat....
Trimakasih.
Sumber Kopast From CaraBuatWebGratis