Hai
sobat blogger, malem-malem gak bisa tidur, trus ditemeni facebook, plus
blogging, dan ternyata ada yang tanya kepada saya tentang cara membuat
recent post berjalan, buat dah nih tutorial, itung-itung hari ini baru satu artikel yang saya buat.
Penjelasannya
singkat saja, recent post adalah kumpulan post yang pernah kita buat di
blog kita yang kita tampilkan secara acak bisa sebagai widget atau
post baru, tapi yang saya bahas untuk kali ini adalah recent post yang
dibuat untuk widget disertai dengan animasi efek berjalan pada recent
post tadi, sehingga yang ditampilkan banyak dan terus berganti seiap saat.
Untuk
membuatnya sangat mudah, tapi bagi yang ingin melihat contonya ada di
sidebar blog ini (update 6 februari 2013), mungkin jika sobat
mengunjungi blog ini sudah saya ganti berarti sudah tidak ada, dan saya
berikan screenshotnya
untuk caranya sangat mudah sekali, dan berikut adalah caranya :
- masuk dulu pada blogger sobat
- pilih gadget HTML/JavaScript
<style media="screen" type="text/css">
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:509px;
}
#spylist ul{
width:290px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:290px;
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<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 = 20;
home_page = "http://pro-duck.blogspot.com/";
limitspy=6
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div>
Ket :
Ganti tulisan yang berwarna merah dengan alamat blog sobat
Sekian saja yang dapat saya sampaikan untuk kali ini, kurangnya saya mohon maaf, dan semoga artikel ini bermanfaat,
terima kasih telah berkunjung... ^_^
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Cara Membuat Recent Post Berjalan di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment