Cara Membuat Slider Recent Post Pada Sidebar

Tuesday 29 June 2010

Kalau korang perhatikan pada sidebar sebelah kiri, korang akan nampak satu widget yang bertajuk "Recent Post" yang bergerak-gerak kan? Hari ni saya nak buat satu lagi nota untuk diri saya sendiri dan ingin kongsikan kepada sesiapa sahaja yang sudi lawat blog ni bagaimana cara-cara untuk buat widget seperti ni..

Cara-caranya ialah:


1. Masuk kat dashboard>design>add gadget>HTML/java script

2. copy script kat bawah ni dan masukkan pada ruangan content


<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;
margin-bottom:-20px;
padding:0px 0px -20px 0px;
height:350px;
}
#spylist ul{
width:270px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:252px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#FFFFFF;
border:1px solid #ddd;
}

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

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:0px;
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 = " ";

showPostDate = false;

showcomments = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 20;

home_page = "http://URL korang.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>


3. Edit spylist ul(lebar kotak) dan spylist il(lebar tulisan) mengikut kesesuian korang sendiri

4. Korang boleh tukar saiz gambar mengikut kesukaan korang sendiri dengan mengubah nilai thumbwidth dan thumbheight mengikut kesukaan korang sendiri..

Setakat itu sahaja untuk nota hari ini hehehe... Kepada sesiapa yang berminat boleh buat latihan ye hehehe...

22 comments:

suka_haha said...

erm pe function die ea?bleyh trg detail?

suka_haha said...

thanks 4 the info

suka_haha said...

function dia sama macam letak banner kat sidebar tu gak tapi ni nampak cantik sikit kalau nak dibandingkan dengan banner yang duduk statik je.. tapi ini bukan untuk banner tapi ntuk show post kita yang lepas-lepas itu je kot.. hehe..

suka_haha said...

sama-sama hehe..

suka_haha said...

KENAPA SAYA BUAT TAK JADI EK? ERK..

suka_haha said...

url korang tu dah tukar pada url awk ke??

suka_haha said...

boleh juga ni, nak pasang kat blog yang satu lagi..
terima kasih sangat..

suka_haha said...

nice tutor.. :)

suka_haha said...

sama2 hehe..

suka_haha said...

terima kasih hehe..

suka_haha said...

dah dapat...tq bnyk2...sila lawat http://villakejora.blogspot.com

suka_haha said...

dah lawat hehe...

suka_haha said...

thanx bro!

suka_haha said...

sama-sama hehe..

suka_haha said...

nk try buat jugak la nanti..thnx mat din...
mat din..cm ne nk buat copy link banner kita..bagi tunjuk ajar skit..

suka_haha said...

waa pernah wat.. tp tak kuor gambo..nak cube yang nih..kalo tak jadi gak memang sadiss bangat!

suka_haha said...

maksud awk nak letak kod dalam kotak ke?? kalau ye awk tengoklah sini.. http://maribinablog.blogspot.com/2009/10/meletak-kod-banner-pada-scroll-box.html promote nescafe lak hehehe..

suka_haha said...

trylah.. saya try kluar je gambar hehe...

suka_haha said...

salam, tq krn sudi kongsi ilmu yg payah orang nak bagi..

suka_haha said...

sama-sama hehe..

suka_haha said...

nice tutorial. . .tq..

suka_haha said...

sama-sama hehe..