Cara Membuat Recent Post Thumbnail dengan jQuery

Cara Membuat Recent Post Thumbnail dengan jQuery - Assalamu'alaikum! Halo sob, apa kabar? Sebelumnya saya sempat membuat artikel tentang cara setup blogspot menjadi co.cc. Dan sekarang, Insya Allah saya akan membahas tentang sebuah widget. Dab widget yang akan saya bahas ini adalah recent post/artikel terbaru.

Widget recent post, memiliki banyak manfaat sob. Salah satunya adalah membuat tampilan menjadi lebih menarik. Kenapa? Karena widget ini dapat bergerak (bergerak dalam arti bukan berkeliaran). Lalu, selain bergerak, widget ini pun dapat memasukkan gambar yang ada di posting ke dalam widget sesuai posting agar tampilan menjadi lebih bagus. Oke sob, langsung aja saya kasih script-nya ..

<!-- Recent Post Script Start -->
<script src="blog-caratrikblog.googlecode.com/files/widget-recentpost.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://caratrikblog.blogspot.com/";
    limitspy=4
    intervalspy=4000
    </script>
    <div id="spylist">
        <script src='http://blog-caratrikblog.googlecode.com/files/widget-recentpost1.js' type='text/javascript'></script>
    </div>
<!-- Recent Post Script (http://caratrikblog.blogspot.com) End -->   

- Angka yang berwarna biru adalah jumlah post yang tampil di widget
- Silahkan ganti link url yang berwarna merah dengan link blog sobat.
- Letakkan script ini di HTML/JavaScript

Selesai

Cara membuat widget recent post thumbnail, script recent post di atas saya ambil dari blog seseorang (maaf saya lupa dapat dari mana). Tapi yang pasti, script tersebut punya Abu Farhan. Oke sob, sekian saja untuk kali ini. Wassalam!

Credit : Abu Farhan