Recent Post Slide Show

Salam blogger, sebelumnya saya akan berterimakasi kepada pengunjung dan pencinta blogger sekalin khususnya shabat - sahabat blogger, pada kesempatan malam ini saya akan bagi bagikan satu buah trik yang sederhana, simpel tampi mengasikan hehe cara pemasangannyapun sangat simpel.

OK, trik yang akan saya berikan adalah cara membuat "Recent Post Slide Show" dengan yang namanya "Recent Post Slide Show" ini blog kita akan lebih cantik dan menarik, mudah mudahan pengunjung kita pun juga merasa betah AMIIIN.

OK, berhubung waktu udah malam, roko pun tinggal sebatang, kopi udah kerik kita langsung aja ke Pembahasan :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<script src="http://kangfatur.googlecode.com/files/recentpostslide.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(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://www.coretan-guru-komputer.co.cc/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://kangfatur.googlecode.com/files/recentpostslide2.js' type='text/javascript'></script>
</div>

PERHATIAN
Kode yang berwarna merah ganti dengan alamat link sobat OK

Setelah semua langkah - langkah terlewati, simpan dan lihat hasilnya??

Selamat mencoba semoga bermanfaat dan jangan lupa comennya,
Previous
Next Post »

19 komentar

Click here for komentar
KhuntienBoyz
admin
29 October 2010 at 07:07 ×

mantap nich gan thank info nya ya...

Reply
avatar
29 October 2010 at 07:16 ×

info yang bagus Kang... makasih ya..

Reply
avatar
30 October 2010 at 11:14 ×

wahh sangat bermanfaat nih kang

Reply
avatar
beebobie
admin
30 October 2010 at 11:14 ×

makasih kang infonya langsung saya pasang http://beebobie.blogspot.com

Reply
avatar
2 November 2010 at 08:50 ×

cara melebarkannya gimana mas,,thanks

Reply
avatar
Kang Fatur
admin
6 November 2010 at 05:33 ×

@Kissinger AritonangSobat aritonang disitu ada tulisan width yg atas dg yg bawah ganti ke duanya dg lebar sidebar sobat misalkan 220 semuanya samakan saja

Reply
avatar
gata
admin
14 November 2010 at 21:48 ×

kl slidenya kesamping kodenya gmn ya gan?

Reply
avatar
Kang Fatur
admin
20 November 2010 at 08:34 ×

@gatasobat Gata kayanya low ke sampingmah lum ada Script nya hehe, mudah2an ja kedepanmah nanti juga ada

Reply
avatar
7 February 2011 at 17:27 ×

keren kang.. gua cobain ya.

tp gimana kalau animasi slide shownya sama seperti yang Kang punya. itu tuh yg di atas posting..?

Reply
avatar
KANG ANWAR
admin
5 March 2011 at 17:48 ×

ma kasih Boz! udah aku pasang, kanganwar.blogspot.com....

Reply
avatar
sarastiana
admin
12 March 2011 at 18:32 ×

Trimakasih banyak infonya..., Blognya meriah sekali....OK.

Reply
avatar
1 April 2011 at 00:03 ×

haturnuhun kang..
salam knal kang..

Reply
avatar
okey
admin
18 April 2011 at 06:42 ×

sitenya keren siiipp...

Reply
avatar
simbah
admin
22 April 2011 at 18:32 ×

waduh mas...
setelah saya pake ke blog saya ,kq js yang di menu bar gak jalan..gmn tuh??

Reply
avatar
24 April 2011 at 02:39 ×

Ijin copas gan.. keren banget dah!!! Tutorialnya mantap. Pokoknya jempol deh buat blog ini.

Reply
avatar
Anonymous
admin
5 May 2011 at 08:28 ×

Your site is very much bad. As i can not copy even a html code.
How did you make it.
i am very much disappointed.
what the hell the site is .

Reply
avatar
Anonymous
admin
5 May 2011 at 08:30 ×

Do you know how to make website.
Do not visit this website .
Very much bad site.
i ever seen

Reply
avatar
8 May 2011 at 21:19 ×

Sukses kucoba Kang. Makasih ....

Reply
avatar
Thanks for your comment