Membuat Widget Recent Post Dengan Thumbnail yang Bisa Berputar

Jika beberapa hari yang lalu saya membagikan random post dengan thumbnail yang bisa berputar, kali ini saya akan membagikan sebuah widget yang di buat oleh Abu Farhan dan Mungkin sebagian dari kalian sudah mengetahui tentang widget ini. Yup inilah widget artikel terbaru atau yang biasa kita sebut dengan recent post.

Widget ini akan menampilkan artikel terbaru dari blog kamu beserta thumbnail. Widget ini juga bisa di ubah sesuai keinginan kamu loh. Oh iyah, efek yang ditimbulkan dari widget ini adalah turun kebawah otomatis serta akan berputar saat kamu menyorot thumbnail-nya. Oke langsung saja kita lihat cara pembuatannya di bawah ini :

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript setelah itu kamu salin dan masukkan kode di bawah ini kedalam kotak HTML/Javascript tersebut.

<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/AVvXsEhrNY5_80LJTuEzeAKLvNenEoKmReIQV3tTE8_QA_Obe92HsaeqYxBzuXi2ROewIsWwnhYhujk6xoyRV22UBUNjrVkcSn5EGfRFHD5F49b9y81YHMicyE1X7fSp_m_E3JxPEintWVDE6Xs/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/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/s1600/defaultimage.jpg";
imgr[5] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4saPW3D1qiInazJd45kWXkeaD8qnvo-enk9wlUafN9yuZKhPVndhnsy2NyHavjuY-s2PGLNJh6eVPTSZnKIDtnV_a_pw_EJdzz-ckAKkE-d3PEtho59E5x450IowmPCfp2uw_GWXG2_s/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>

Note :

• Ubah jumlah postingan yang ditampilkan dengan mengubah kode numposts = 10
• Ubah http://www.hzndi.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 kamu lihat hasilnya dan untuk demo livenya mungkin kamu bisa melihatnya di bawah ini.

Postingan Terkait:

Posted in: Blogger,CSS3,Jquery,Recent Post,Widget