Membuat Widget Recent Post dengan thumbnail yang bisa berputar

Widget kali ini mempunyai kelebihan yaitu Related Artikel terbaru dari blog sobat, selain itu widget ini merupakan jenis widget thumbnail slain itu mempunyai efek berputar ketika ganis (agan-agan dan sista-sista) mengarahkan pointer ganis ke gambar widget tersebut dan juga akan otomatis rolled

Baik langsung saja, caranya tidak sulit ikuti perintah dari saya :

1. Login ke Blogger.com ganis

2. Klik Tata Letak > Tambah Gadget > HTML/Javascript lalu ganis kopas saja kode dibawah ini

<style type="text/css">
#spylist-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
    font-family:calibri;
}

#spylist-widget ul {
    width: autopx;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#spylist-widget li {
    width: autopx;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibFF7760HGWNUQJCqkMf1WAVA2Yqk870YVcM4KCpQdKq7l760Js_3VEdU2VE2GC3pO-8ou9mpwwLKX1BwD2jGmBqUkp462xDQhFYUKZwFIw9QodqiWKpbhtvy642iAX8-cbOSxvm1Vu64/s320/latesthack.com-.jpg) repeat-x;
    border: 1px solid #ddd;
}

#spylist-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#spylist-widget img {
    float: left;
    margin-top: 5px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#spylist-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAKwrBqmMoCHge38ggKQuV6__JuJ4y41N_BLfERB5LkNIy5wU9AuA_kkJYokilC7ENRAUbPdTfJOewLsDVo7FWBuUMQoonHvzeO8eP65iSdgZlX1bKEPsHMtQXlb5to0zjnw-eSe1QE4/s1600/defaultimage.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAKwrBqmMoCHge38ggKQuV6__JuJ4y41N_BLfERB5LkNIy5wU9AuA_kkJYokilC7ENRAUbPdTfJOewLsDVo7FWBuUMQoonHvzeO8eP65iSdgZlX1bKEPsHMtQXlb5to0zjnw-eSe1QE4/s1600/defaultimage.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAKwrBqmMoCHge38ggKQuV6__JuJ4y41N_BLfERB5LkNIy5wU9AuA_kkJYokilC7ENRAUbPdTfJOewLsDVo7FWBuUMQoonHvzeO8eP65iSdgZlX1bKEPsHMtQXlb5to0zjnw-eSe1QE4/s1600/defaultimage.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAKwrBqmMoCHge38ggKQuV6__JuJ4y41N_BLfERB5LkNIy5wU9AuA_kkJYokilC7ENRAUbPdTfJOewLsDVo7FWBuUMQoonHvzeO8eP65iSdgZlX1bKEPsHMtQXlb5to0zjnw-eSe1QE4/s1600/defaultimage.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAKwrBqmMoCHge38ggKQuV6__JuJ4y41N_BLfERB5LkNIy5wU9AuA_kkJYokilC7ENRAUbPdTfJOewLsDVo7FWBuUMQoonHvzeO8eP65iSdgZlX1bKEPsHMtQXlb5to0zjnw-eSe1QE4/s1600/defaultimage.jpg";
imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVAKwrBqmMoCHge38ggKQuV6__JuJ4y41N_BLfERB5LkNIy5wU9AuA_kkJYokilC7ENRAUbPdTfJOewLsDVo7FWBuUMQoonHvzeO8eP65iSdgZlX1bKEPsHMtQXlb5to0zjnw-eSe1QE4/s1600/defaultimage.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;fntsize = 9;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";numposts = 10;
home_page = "http://www.hzndi.blogspot.com/";
limitspy=5;
intervalspy=4000;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><br />
<div id="spylist-widget">
<script src="http://hzndi.googlecode.com/files/hzndi.blogspot.com-scrollpost.js" type="text/javascript"></script>

</div>

Keterangan :

• Ubah jumlah postingan yang ditampilkan dengan mengubah kode numposts = 10
• Ubah http://www.alfarisiku.blogspot.com dengan alamat URL blog kamu, untuk mengganti URLnya harus menggunakan http://www.namablogkamu.com/ ingat pake garis miring '/' dibelakang domain kamu, kalau tidak widget ini tidak akan berjalan !
• Ubah showPostDate = true; ke false jika tidak ingin menamplkan tanggal postingan 

4. Simpan 
dan selesai..

semoga bermanfaat trimakasih telah membaca artikel ini

Membuat Widget Recent Post dengan thumbnail yang bisa berputar 2013-01-04T16:29:00+07:00 Rating: 4.5 Diposkan Oleh: M Zaky Alfarisi