Cara buat New Post bergulir dengan tumbnail di blog

Tweet

Ketika orang mengunjungi blog Anda, penting untuk menjaga mereka di sana untuk selama mungkin, seseorang lagi adalah di blog Anda semakin besar kemungkinan mereka akan kembali dan berlangganan atau follower.Displaying daftar posting terbaru Anda pada sidebar Anda adalah cara yang bagus untuk menjaga para pengunjung sibuk. Ada banyak widget posting terbaru dan widget arsip Anda dapat menggunakan tapi yang akan kita bahas di posting ini menantang akan menarik perhatian orang di blog Anda. Widget ini akan menampilkan posting terbaru Anda dan termasuk thumbnail kecil, tetapi memiliki bonus tambahan menggunakan efek animasi yang bergerak lancar melalui tulisan.

Cara Tambah Tulisan animasi terbaru Gulir Dengan Thumbnail Untuk Blogger?

1. Login ke akun Blogger Anda.
2. Pergi ke Tata Letak > Add A Gadget
3. Dalam Add A Gadget jendela, pilih HTML / Javascript
4. Copy kode di bawah ini dan Paste di dalam kotak konten.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:345px;
}
#spylist ul{
width:320px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:288px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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 = 15;
home_page = "http://d-copy.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

Penting:

1. Ganti ukuran tinggi dan lebar sesuai keinginan Anda.
2. Jika Anda melihat dalam kode Anda akan menemukan http://d-copy.blogspot.com/ ganti dengan URL blog Anda.
3. Kode berwarna pink adalah jumlah postingan yang akan ditampilkan.