Link Bergerak Ketika Di Sorot - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Selasa, 22 Maret 2011

Link Bergerak Ketika Di Sorot

Akhirya bisa online lagi setelah beberapa hari ini di sibukkan kegiatan offline yang mengharuskan meninggalkan kegiatan blogging untuk sementara waktu. Pada kesempatan yang sangat berharga ini saya akan membahas sedikir tutorial ringan tentang cara membuat link bergerak ketika di sorot mouse.

Trik ini sangat cocok bagi sobat blogger yang igin memperindah tampilan blognya. Silahkan lihat demo di bawah. Bagi yang tertarik, silahkan ikuti tutorial berikut ini.


1. Login ke akun blog sobat.
2. Pilih design lalu masuk edit HTML.
3. Cari kode </head> lalu pasang kode di bawah ini di atas kode </head> tadi.

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

4. Setelah itu save template.

Untuk menambah linknya, silahkan pergi ke page elemen >> add gadget >> HTML/Java Script letaknya terserah sobat mau di pasang dimana. Kemudian masukkan kode di bawah ini ke dalamnya.

<ul id="sliding-navigation">

<li class="sliding-element"><a href="#">Link 1</a></li>

<li class="sliding-element"><a href="#">Link 2</a></li>

<li class="sliding-element"><a href="#">Link 3</a></li>

<li class="sliding-element"><a href="#">Link 4</a></li>

<li class="sliding-element"><a href="#">Link 5</a></li>

<li class="sliding-element"><a href="#">Link 6</a></li>

<li class="sliding-element"><a href="#">Link 7</a></li>

<li class="sliding-element"><a href="#">Link 8</a></li>

<li class="sliding-element"><a href="#">Link 9</a></li>

<li class="sliding-element"><a href="#">Link 10</a></li>

</ul>

Silahkan di edit link nya sesuai kebutuhan.
Semoga bermanfaat.
Alhamdulillah...

20 komentar:

  1. infonya bagus bangetz!
    makasih udah sharing gan!

    BalasHapus
  2. mantebz gan . . sip dah pkonya tutor blognya, ditunggu yang lain tipsnya :b

    BalasHapus
  3. bagus sob link nya,
    salam kenal y...
    :O

    BalasHapus
  4. salam kenal
    keren juga gan link nya...
    sukses sllu..

    BalasHapus
  5. keren2 ya linknya,mksh atas segala tipnya.

    BalasHapus
  6. Mantap Gan :b
    Tanxsss !!!!

    BalasHapus
  7. mantap gan link nya....
    sukses sllu y gann....

    BalasHapus
  8. salam kenal,kren gan link2 nya,.........
    sukses sllu y gan....

    BalasHapus
  9. Terima kasih atas komentar kalian semua....

    BalasHapus
  10. terima kasih gan ats tutorialnya mdh mdhn bermanfaat ya salam kenal

    BalasHapus
  11. informasinya luar biasa sangat bermanfaat sekali...
    Banyak sekali ilmu pengetahuan yang saya dapatkan
    Terimakasih banyak atas informasinya ...
    Semoga semakin sukses

    BalasHapus
  12. artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    BalasHapus
  13. kereen bangettt sok artikelnya thanks infonya...

    BalasHapus
  14. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus

Post Top Ad

Space Iklan