April 11, 2013

Blogroll Ganteng Dengan Efek Animasi

Dari judulnya, mungkin temen-temen sudah bisa menebak postingan apa kali ini???

Kali ini, saya ingin share mengenai cara membuat blogroll yang animatif, sehingga tampilan nya menjadi lebih menarik untuk dipandang...

DEMO :



Tutorial ini saya buat berdasarkan tutorial yang saya pelajari dari Mas Taufik, dan saya share kembali kepada temen-temen yang lain yang merasa tertarik dengan model blogroll seperti ini.

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut diatas kode </head> :

var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    }, anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    anim = setInterval(roll, 3000);
});

5. Simpan Template.

6. Letakkan link-link yang akan ditampilkan secara animasi pada tempat yang temen-temen inginkan seperti contoh dibawah :

<ul id="blog-roll">
    <li><a href="#">Alya Zahra 1</a></li>
    <li><a href="#">Alya Zahra 2</a></li>
    <li><a href="#">Alya Zahra 3</a></li>
    <li><a href="#">Alya Zahra 4</a></li>
    <li><a href="#">Alya Zahra 5</a></li>
    <li><a href="#">Alya Zahra 6</a></li>
    <li><a href="#">Alya Zahra 7</a></li>
    <li><a href="#">Alya Zahra 8</a></li>
    <li><a href="#">Alya Zahra 9</a></li>
    <li><a href="#">Alya Zahra 10</a></li>
</ul> 

7. Enjoy.

*Kode yang digaris bawah tidak perlu ditaruh di template apabila telah terdapat kode serupa

Bagaimana sob???
Semoga postingan ini bermanfaat....

9 comments

  1. Lapor sobat, Kunjungan perdana FOLLOWBACK sukses, terimakasih ya sudah berkunjung ke tempat saya, salam persahabatan !!

    ReplyDelete
    Replies
    1. sama-sama sob, terima kasih yah...:)

      Delete
  2. jangan lupa kunjungi blog saya juga yah....
    http://andirifki25.blogspot.com/

    ReplyDelete
    Replies
    1. ok gan, terima kasih kunjungannya...

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. disini ada widget related post gak ya .. dicari gak ada sih. pengen ditambahin soalnya :) .

    ReplyDelete
    Replies
    1. artikel terkait dengan tampilan sederhana :
      http://aiizahh.blogspot.com/2013/02/cara-membuat-artikel-terkait-pada.html
      pleased pleased pleased

      Delete