Widget Recent Post Animasi dengan Thumbnail

Membuat Recent Post Animasi dengan Thumbnail - Widget recent post atau posting terbaru tentu saja akan lebih menarik jika ditambahkan efek animasi atau efek berjalan (slider).

Anda bisa cek live demonya DISINI

Penerapannya cukup mudah, berikut ini saya bagikan panduan cara settingnya di Blogspot anda:

1. Login ke akun blogger anda, lalu masuk ke bagian lay out / tata letak

2. Klik add a gadget pada halaman tata letak tersebut, Pilih gadget HTML/Javascript

3. Kemudian masukan kode script berikut ini di kolom script gadget tersebut. Edit dulu beberapa bagian script tersebut seperti keterangan di bawah, lalu save.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQz0ylTsvKVfIjmrrMoS5G89DWcBbzC7OW2SYkIr0fxv7nJSyMh7tA_dAQHataahdWzI1AdHTOuxxhVouWcFHRA0oj9Wob0z832_Fotzp_va4HAa2m_MMYX2qYUHgyDNvuOMlROpm74O9l/s1600/24work-blogspot-com.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><a href="http://www.tukangtokoonline.web.id/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Jasa Toko Online" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.tukangtokoonline.web.id" rel="dofollow" target="_blank" title="Jasa Toko Online"><img src="https://bitly.com/24workpng1" alt="Jasa Toko Online" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.tukangtokoonline.web.id" target="_blank" title="Jasa Toko Online"><img src="https://bitly.com/24workpng1" alt="Jasa Toko Online" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1c1mwoeedq3CdgNNmaHtkKGPq1CEXU7Khe_ZjkcGRYDkoVwfP8HexqA_yUA4MlloG7Kz-zSmcL1GYxZdJhi0UnGd0CyMt-JfdmCXr-3W2a9-Tdy66bB5wQzJ8uW4NPWcCvlq960VTpg5/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1c1mwoeedq3CdgNNmaHtkKGPq1CEXU7Khe_ZjkcGRYDkoVwfP8HexqA_yUA4MlloG7Kz-zSmcL1GYxZdJhi0UnGd0CyMt-JfdmCXr-3W2a9-Tdy66bB5wQzJ8uW4NPWcCvlq960VTpg5/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1c1mwoeedq3CdgNNmaHtkKGPq1CEXU7Khe_ZjkcGRYDkoVwfP8HexqA_yUA4MlloG7Kz-zSmcL1GYxZdJhi0UnGd0CyMt-JfdmCXr-3W2a9-Tdy66bB5wQzJ8uW4NPWcCvlq960VTpg5/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1c1mwoeedq3CdgNNmaHtkKGPq1CEXU7Khe_ZjkcGRYDkoVwfP8HexqA_yUA4MlloG7Kz-zSmcL1GYxZdJhi0UnGd0CyMt-JfdmCXr-3W2a9-Tdy66bB5wQzJ8uW4NPWcCvlq960VTpg5/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE1c1mwoeedq3CdgNNmaHtkKGPq1CEXU7Khe_ZjkcGRYDkoVwfP8HexqA_yUA4MlloG7Kz-zSmcL1GYxZdJhi0UnGd0CyMt-JfdmCXr-3W2a9-Tdy66bB5wQzJ8uW4NPWcCvlq960VTpg5/s1600/noimage.png";
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://www.tukangtokoonline.web.id";

limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.dropboxusercontent.com/s/3frdg2yvzmdwsto/animated-recent-posts-ycode-1.js' type='text/javascript'></script>
</div>

Keterangan :
1. Hapus script berikut  (paling atas) :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

jika di template anda sudah ada.

2. Ganti script :

home_page = "http://www.tukangtokoonline.web.id";

text warna merah dengan url blog anda.

3. Ukuran Gambar, cari script berikut,

thumbwidth = 70;thumbheight = 70;

ganti dengan ukuran yg anda inginkan.

4. Posting yang tampil

numposts = 10; 

Defaultnya adalah 10, ganti sesuai keinginan.

Selesai.

Semoga bermanfaat.