web ini masih dalam tahap pengembangan jika nanti anda mengunjungi web ini dan apabila mengganggu kenyamanan anda kami dari phak management minta maff ketidak nyamanan anda itu dikarenakan web ini sedang melalakukan update

ucapan salam

Kamis, 14 Februari 2013

Efek link bergoyang terkena mouse/akan bergeser seperti tersenggol

Kamis, Februari 14, 2013    No comments


Buat sobat blogger yang blognya suka menampilkan banyak fariasi, 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 :



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 :

</head>


5. 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/AVvXsEiUyht58vqwfNmgI6Puc-aRQ3jnBb77eeue4_yFNQM9veqfhBrYEsY10w1GYir_5Tx52KJNol29N3TStJJfSBQu8BIfcjCI14TrHBaOs8uqMi95f7iBVhLticRGi6La9HzwwKcA_PeVtYsi/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 :
<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>

Ok...., Selamat mencoba dan Semoga bermanfaat..

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

komentar client