Tutorial Recent Post Bergerak

Menarik bukan kalau letak recent post bergerak kat sidebar tu. Marilah cuba buat tutorial recent post bergerak. 

Log in blogger >> dashboard >> layout >> add a gadget >> html 

Copy kod kat  bawah ni and paste dalam kotak gadget html

Font warna merah tukar url blog sendiri.

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

overflow:hidden;

float:center;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:200px;

padding: 2px 2px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:center;

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

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://img15.imageshack.us/img15/5439/noimagex.png";

imgr[1] = "http://img15.imageshack.us/img15/5439/noimagex.png";

imgr[2] = "http://img15.imageshack.us/img15/5439/noimagex.png";

imgr[3] = "http://img15.imageshack.us/img15/5439/noimagex.png";

imgr[4] = "http://img15.imageshack.us/img15/5439/noimagex.png";

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 = "url blog";

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>

Save! 

Tutorial letak icon comel sebelah title sidebar

Dashboard>>design>>edit HTML 

Click Expand Widget Templates. Kemudian cari kod kat bawah ni 

<h2 class='title'><data:title/></h2>

atau kod bawah ni

<h2 class='title'>your widget title</h2>

contohnya kod macam ni 

<h2 class='title'>About me</h2> 

Untuk memudahkan pencarian tekan Ctrl+F button. copy kod di atas dan paste dalam kotak pencarian.
Bila dah jumpa kod yang nak dicari tu, copy kod bawah ni

<img src='letak URL icon disini'/>

dan paste kan ditengah tengah antara dua kod yang dicari tadi.

Contoh yang dah siap paste macam ni.

<h2 class='title'><img src='letak URL icon disini'/><data:title/></h2> 

atau

<h2 class='title'><img src='letak URL icon disini'/>About me</h2>

Dah siap, sila preview. Kalau dah kelihatan ada icon comel tu, save. Ulang langkah yang sama untuk letak di setiap tajuk sidebar.