Cara Membuat Widget Slide Recent Post With Thumbnail

Pada postingan kali ini saya akan berbagi cara membuat widget slide recent posting dengan thumbnail, yang membuat blog kita lebih menarik dan cantik...:) keuntungan menggunakan widget ini  adalah bisa menampilkan hampir semua recent yang kita posting sebelumnya dengan tampilan ala slide, jadi recent post akan secara bergantian menarik bukan ??, nah bila sobat binggung cara membuatnya berikut ini bisa dilihat screenshotnya dibawah ini.

Berikut ini ikut langkah-langkah cara membuatnya :

1. Silahkan login dengan akun blogger sobat. 
2. Masuk Rancangan/desain
3. Pilih tata Letak/Layout
4. Klik Add a Gadget/Tambah Gadget dan pilih HTML/Javascript
5. Selanjutnya Copas kode berikut ini :

<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:show;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:280px;
overflow:show;
list-style-type: none;
padding: 5px 5px;
margin:0px 0px;
}
#spylist li {
width:280px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:8px;
overflow:show;
margin:3px 3px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:show;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:8px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:show;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:3px 3px;
margin:8px 8px;
}

-->
</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 = 20;
home_page = "http://alamat blog sobat.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<br />
<div id="spylist">
<script src="https://sites.google.com/site/kodeblogger/javascript/rpts-kode-blogger.js" type="text/javascript"></script>

6.  Simpan/Save Template

Catatan:
Teks yang diberi warna merah, gantilah dengan alamat blog sobat.
Sekian dulu semoga bermanfaat, kalau ada sobat masih binggu silahkan komentar dibawah  ini.

Posted by Unknown on Rabu, 27 November 2013 - Rating: 4.5

Title : Cara Membuat Widget Slide Recent Post With Thumbnail
Description : Pada postingan kali ini saya akan berbagi cara membuat widget slide recent posting dengan thumbnail, yang membuat blog kita lebih menarik ...

Share to

Facebook Google+ Twitter