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

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
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() {
    setInterval(roll, 3000);
});
</script> 

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

Sumber : http://aiizahh.blogspot.com/2013/04/blogroll-ganteng-dengan-efek-animasi.html#ixzz2TzdziChP
Follow us: @aiizahh on Twitter