Animasi Posting terbaru untuk Blogger dengan Thumbnail

Recent post animasi adalah cara yang fantastis untuk menyajikan berita update untuk efek readers. Dan akan menampilkan tulisan anda paling baru dalam thumbnail kecil, tapi memiliki bonus tambahan menggunakan efek animasi yang bergerak lancar melalui posts. Ini adalah tutorial yang membahas tentang cara menambahkan Animasi Posting terbaru untuk Blogger dengan Thumbnail dan Spy Sederhana.

Cara Memasang animasi Posting terbaru untuk blogger dengan thumbnail

 

Sekarang kita mulai percobaannya ...

Langkah 1. Login ke Blogger Account anda. Lalu ke Blogger Dashboard.
Langkah 2. Setelah klik pada link Add a Gadget Sebuah kotak pop-up akan terbuka sekarang dengan banyak daftar gadget.
Langkah 3. Pilih 'HTML / Javascript' dan tambahkan salah satu kode yang diberikan di bawah ini.

<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/AVvXsEjoIc_G0a17g_hrYZGaqccSzLCO-GSK4m9IJjx5ttTPr0gktcr0PfhxZR1qijHDT4as_tC6XV7GrC9JXc6M9QE5nS23HvziQa5O-Sres5NPNyGQ2Bas1pzIyFFqRKr3gCOGFE7J_Q6GtX41/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://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" 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/AVvXsEiL2mbbDxhM-EHlO348IYa8mg4sFcaY5dHsksifWubw-zA-QQvzoE9fhs_99UThxPol23pg4QSmyOfzz1oAKLuwpCGVaZ3wHkNGBI-a1RQYVXxPDQ6oAEqOfwQ2ggJkyx32cENOUxNXbdmx/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL2mbbDxhM-EHlO348IYa8mg4sFcaY5dHsksifWubw-zA-QQvzoE9fhs_99UThxPol23pg4QSmyOfzz1oAKLuwpCGVaZ3wHkNGBI-a1RQYVXxPDQ6oAEqOfwQ2ggJkyx32cENOUxNXbdmx/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL2mbbDxhM-EHlO348IYa8mg4sFcaY5dHsksifWubw-zA-QQvzoE9fhs_99UThxPol23pg4QSmyOfzz1oAKLuwpCGVaZ3wHkNGBI-a1RQYVXxPDQ6oAEqOfwQ2ggJkyx32cENOUxNXbdmx/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL2mbbDxhM-EHlO348IYa8mg4sFcaY5dHsksifWubw-zA-QQvzoE9fhs_99UThxPol23pg4QSmyOfzz1oAKLuwpCGVaZ3wHkNGBI-a1RQYVXxPDQ6oAEqOfwQ2ggJkyx32cENOUxNXbdmx/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL2mbbDxhM-EHlO348IYa8mg4sFcaY5dHsksifWubw-zA-QQvzoE9fhs_99UThxPol23pg4QSmyOfzz1oAKLuwpCGVaZ3wHkNGBI-a1RQYVXxPDQ6oAEqOfwQ2ggJkyx32cENOUxNXbdmx/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://bdlab.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work.webs.com/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>
</div>

Dan sekarang klik Save

Catatan: Jika template Anda sudah memiliki jquery, maka jquery di bawah ini tidak usah dipasang. Html dari atas beberapa hal bisa diganti:

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

width: 220px;
width: 208px:
menyesuaikan dasar pada template Anda

background: # fff repeat-x;
sesuaikan warna backuground

thumbwidth = 70;
thumbheight = 70;
ukuran gambar sesuai dengan kebutuhan Anda

numposts = 10;
berapa banyak posting yang akan menunjukkan


sumber: http://24work.blogspot.com/2011/12/animated-recent-posts-for-blogger.html