Recent Post Animated With jQuery

Salah satu pengunjung saya bertanya mengenai Cara "Membuat Recent Post Animated". Ia mengatakan

mo tanya nich...klo mo buat resent post dengan konsep bergerak tu bagaimana? mohon untuk diajari donk....

Nah, oke, saatnya untuk berbagi.. Kalau tidak salah saya telah memposting artikel ini (maklum ingatan sedikit kurang tajam) tapi tidak apa apalah, apa salahnya coba buat berbagi? hehe
Oke. Berikut adalah tampilannya..

Oke, lets we create it
1. Login ke blog anda --> Layouts --> Tambah Gadget --> HTML/JavaScript
2. Letakkan kode berikut

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css" media="screen">
    <!--

    #spylist {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:350px;
    }
    #spylist ul{
    width:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
    border:1px solid #ddd;
    }

    #spylist li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }

    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->
    </style>

        <script language='JavaScript'>

    imgr = new Array();

    imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

    imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
    showRandomImg = true;

    boxwidth = 255;

    cellspacing = 6;

    borderColor = "#232c35";

    bgTD = "#000000";

    thumbwidth = 70;

    thumbheight = 70;

    fntsize = 12;

    acolor = "#666";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = true;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 10;

    home_page = "http://kukuhcdh.blogspot.com/";

    limitspy=4
    intervalspy=4000

    </script>

    <div id="spylist">
        <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
    </div>

*NOTE: Ganti text yang bewarna merah dengan alamat blog anda
3. Save

Selamat, anda mendapatkan recent post yang menawan ini..

Tweet

Artikel Terkait:

Trick Blog

• Trick Blog | Recent Post With Thumbnail Horizontal
• CSS3 | Transform Rotate : Memutar Text / Gambar
• Trick Blog | Berbagai Macam Cursor
• CSS3 | Create Beautiful Button
• CSS3 | Create Bubble Coda Style
• CSS3 | Membuat Background Pada Web Full Page
• Membuat Facebook Fans (Like Box) Pada Blog
• Membuat Background Efek Gradient Dengan CSS3
• Menyembunyikan Avatar Pada Komentar Blog
• Cara Memberikan Image Verification Pada Komentar

Post

• Memasang Random Post (Part 2)
• Fungsi Scroll Pada Posting
• Membuat Daftar Isi Otomatis
• jQuery Accordion Recent Post with Thumbnail
• Cara Membuat Navigasi Breadcumb Di Blogger
• Cara Membuat Huruf Pertama Besar (Drop Cap Pada Blog)
• Cara Menghilangkan Tanggal Pada Posting
• JavaScript Untuk Menampilkan Total Post, Comment Dan Online User
• Cara Menghilangkan Nomor Post Pada Label