tutorial Recent Post thumbnail dengan JQuery

Bismillahirrohmanirrokhim ,, salam untuk sobat semua ..

kali ini saya akan memposting tentang tutorial membuat/memasang "Recent Post thumbnail dengan JQuery"
yg Berguna untuk mempermudah pencarian posting" kita .. karena "Recent Post thumbnail dengan JQuery" ini bisa bergerak secara otomatis dalam artian bergerak naik/turun .. tidak hanya itu saja , "Recent Post thumbnail dengan JQuery"  ini akan mempercantik tampilan di Blogger sobat .. karna dalam pergerakannya yg otomatis itu memperlihatkan gambar" dalam postingan kita ..

Untuk lebih jelasnya lihat Recent post di sebelah Kiri yg bawah  itu Recent Post thumbnail dengan JQuery .. sayang gambar" dalam postingan saya kurang menarik untuk di lihat ... wekwekweewk ..

Bila sobat" tertarik dan ingin memasang Recent Post thumbnail dengan JQuery ini di blog sobat .. saya akan mencoba menuliskan tutornya .. simple banget kok tutornya ..

Cekidot :

1. masuk Blogger sobat
2. dasbor ==> tata Letak ==> Tambah Gadget ==> pilih yg HTML/Java Script
3. masukkan kode di bawah ini dengan cara copy paste ..

Untuk melihat file Click Spoiler

<!-- 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://g4lax1.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 -->

keterangan : Ganti semua huruf/angka yg saya tandai dengan warna Merah
- angka 10 adalah jumlah post yg tampil di widget kita
- UrLnya ganti dengan Link URL Blog sobat
- angka 4 adalah Jumpah penampakannya di Recent Post
- angka 4000 kecepatan gerakannya

- Untuk URL yg warna Biru .. itu mungkin Pembuatnya [saya sendiri ga tau kwawakwkkw]

Simple kan ..  Ok , sampai di sini dulu saya menuliskan "tutorial Recent Post thumbnail dengan JQuery"
Semoga ada manfaatnya untuk kita semua ..

Dan Semoga Rahmat serta Hidayah-NYA selalu tercurah Untuk Kita semua ... Amin ..








<a href="http://nicroganteng.blogspot.com/2012/11/tutorial-recent-post-thumbnail-dengan.html">tutorial Recent Post thumbnail dengan JQuery</a>