Cara membuat recent post bergerak ke bawah di sertai gambar

Mempercantik blog memang sudah bukan hal baru dalam dunia ngeblog, dari mulai memasang warna pelangi pada link, memberi ikon burung twitter berterbangan, dan membuat kursor bertabur bintang serta masih banyak lagi cara-cara lainnya untuk mempercantik blog kita. Nah pada kesempatan kali ini saya mau share bagaimana cara membuat Recent Post bergerak ke bawah.

Dengan membuat Recent Post, memungkinkan pengunjung akan mengeklik salah satu dari postingan sobat yang sedang berjalan ke bawah, dan tentu saja ini akan menambah pageview blog kita yang berdampak akan popularitasnya blog kita. Selain itu blog kita akan kelihatan lebih indah dan cantik. :-)

Jika sobat masih kurang mengerti tentang Recent Post berjalan ke bawah, lihat saja di sidebar kanan blog ini, thumbnail gambar dan judul postingannya bergerak ke bawah kan?  Itulah yang di maksud dengan Recent Post bergerak ke bawah. Terlihat lebih indah dan cantik kan. Hehehe.

Jika sobat tertarik untuk membuatnya di blog sobat, ikuti langkah-langkah berikut ini :

1. Login ke akun blogger

2. Pilih opsi Tata Letak

3. Tambahkan gadget lalu masukkan script di bawah ini pada HTML/Javascript kemudian Simpan

<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:343px;
}
#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:286px;
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 = 10;
home_page = "http://kamigurumadrasah.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>

4. Lihat hasilnya

Keterangan :  

Ganti yang saya beri warna merah dengan nama blog sobat.

Dan yang saya beri warna hijau adalah lebar sidebar sobat.

Dan yang saya beri warna biru adalah jumlah postingan yang akan muncul di Recent Post tersebut.

 

Source : http://goresanmouse.blogspot.com/2013/01/Cara-membuat-recent-post-bergerak-ke-bawah-di-sertai-thumbnail-gambar.html

 

Tweet