Matprofesor.blogspot.com

Sunday, April 1, 2012

Cara Buat Recent Post Bergerak/Berjalan




Aku sebenar nak share satu tutorial tentang Cara Buat Recent Post Bergerak/Berjalan macam yang korang tengok sendiri dalam blog aku nih? kat bahagian tepi.. hah tuh la contoh nanti akan jadi di blog @ web kroang nantik.. dun wurri.. tak mencemarkan HTML template blog korang.. kiter pakai script, copy dan paste pada Gadget korang.. Okeh.. step2 Cara Buat Recent Post Bergerak/Berjalan :

1.) Login di Blog : http://www.blogger.com/home
2.) Design - Add a Gadget - HTML/JavaScript

3.) Copy semua code di bahwa dan paste pada HTML/JavaScript

<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: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 = 20;
home_page = "http://slumberblogger-freedownload.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.)Tukar URL (warna merah) dengan URL blog korang, Numposts ada banyaknye artikel - Save template @ simpan template.

Insyaallah kalau korang ikut dengan saksama setiap dari step kat atas.. no hal dan no prob mesti boleh punyer.. sebab cara dia sangat simple, kalau orang yang baru belajar blog pon boleh catch up punye.. hehehe.. yelah mende simple.. okeh guys.. gudluck lah yer.. ^_^ ada masalah sembang di bahagian comment yep..

No comments:

Post a Comment

Anyone can coment