Amal membantu Membagikan

Browse » home» animasi » blogroll » dengan » efek » ganteng » Blogroll Ganteng Dengan Efek Animasi

---

Blogroll Ganteng Dengan Efek Animasi

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