TUTORIAL YANG PERNAH DICUBA - Memasang Recent posts slider

 

Recent posts slider seperti yang  anda lihat pada blog ini (Catatan Terbaru) di atas post, sememangnya widget yang sangat menarik. Widget tersebut akan memaparkan tajuk post beserta thumbnail (image) secara rotation. Untuk memasang  Recent posts slider tersebut, anda boleh mencuba langkah2 dibawah. Terima kasih diucapkan kepada http://maribinablog.blogspot.com/ 

Untuk memasang widget recent post slider ini pada blog anda, sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1). Sila edit kod yang di bold mengikut kesesuaian blog anda.

width:280px;  (lebar kotak)

width:262px;  (lebar teks pada kotak)

background:#FFFFFF;  ( background kotak)

color:#A32929;  (Warna teks)

numposts = 20;  (Bilangan tajuk post yang ingin dipaparkan)

home_page = "http://Masukkan URL blog anda disini.blogspot.com/";  ( URL blog anda)

<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:280px;

overflow:hidden;

float:center;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:262px;

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://Masukkan URL blog anda disini.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>

Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save. 

soksek: Entri ini dibuat kerana ramai yang bertanya mengenai..