Tab Bergerak-gerak (Ayat bergerak di menu bar)

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

 3) Copy dan paste kod berikut dalam ruangan HTML/Javascript tadi

<script language=javascript>

 msg = "ayat anda di sini";

msg = "..." + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);

pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}

scrollMSG();

</script>

Nota: Tukarkan 'ayat anda di sini' dengan ayat yang anda mahu.
4) Save dan lihat hasilnya. Selamat mencuba! :)

Scroll Box Untuk Blog Archive

Penggunaan aplikasi scroll box pada blog archive adalah satu langkah yang bijak bagi menjimatkan ruang sidebar dalam blog anda, memandangkan blog archive kebiasaannya akan menjadi terlalu panjang dengan capaian link post-post lama dalam blog. Untuk menggunakan aplikasi scroll box ini, sila ikuti tutorial di bawah:

1) Login akaun blogger anda

2) Dashboard > Design > Edit HTML 

3) Tick pada kotak Expand Widget Templates

4) Sebelum itu, sila backup templates anda terlebih dahulu sebagai langkah berjaga-jaga.

5) Dengan menggunakan fungsi find pada keyboard (tekan ctrl + F serentak), cari kod

<div id='ArchiveList'>

6) Anda akan jumpa kod ini <div class='widget-content'> sebelum kod<div id='ArchiveList'> tadi.

7) Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 6 dengan kod di bawah:

<div class='widget-content' style='overflow:auto; height:200px'>

Contoh
Sebelum :

<div class='widget-content'>

<div id='ArchiveList'>

Selepas digantikan kod scrollbox :

<div class='widget-content' style='overflow:auto; height:200px'>
<div id='ArchiveList'>

8) Save dan lihat hasilnya.

*Nota - boleh tukar 200px mengikut tinggi yang anda mahukan.

Selamat mencuba! :)

Border pada Tittle Sidebar

Preview:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

h2 {

4) Kemudian copy dan paste kod di bawah SELEPAS / DI BAWAH kodh2 { tadi
* kod ini adalah untuk border bentuk segiempat. Kalau korang nak bentuk border yang lain, just pilih kat sini

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

nota: FFECF5  - kod warna untuk warna background title sidebar korang
        000000 - kod warna untuk warna border title
        C0C0C0 - kod warna untuk warna bayang-bayang border
korang boleh pilih warna kat bawah ni:
( untuk paparan lebih besar, klik di sini)
5) Klik preview

6) Kalau takde error dan menjadi, terus klik save template dan lihat hasilnya :)

Letak Read More Pada Setiap Post

Dengan fungsi ini, setiap entri post akan diringkaskan dan di set kepada read more. Image yang ada pada setiap entri akan disetkan kepada saiz yang lebih kecil dan di letakkan pada sebelah kiri. Fungsi ini juga akan menghadkan secara auto jumlah teks yang akan dipaparkan pada satu entri.

Untuk membina fungsi auto read more ini, sila ikut beberapa langkah di bawah:

P/S: Sebelum itu, sila backup template anda terlebih dahulu sebagai langkah berjaga-jaga.

1) Sign in akaun blogger anda

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  

</head>

4) Copy kod di bawah dan pastekan sebelum/di atas kod </head>yang anda cari dalam langkah 3 tadi

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

5) Sekali lagi, dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod di bawah pula, 

<data:post.body/>

6) Copy kod di bawah dan gantikan pada kod <data:post.body/>tadi

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCibxfXOf_iGeuT01QwSYKhJHjWq7cfp-IPzyphg6kzKjcfBEt0KJ_gJuE9sigj7vTBXsI16SEfVziOzrqnxFbnWczKTrOAwAXPuIOUfbJiDs6_By8Y5ldsj5-AOoOBPh3zIvA9qOgF5I/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Pada url yang diboldkan purple di atas, masukkan url button pilihan anda. Pilih button di sini .

http://img810.imageshack.us/img810/9164/readmorerainbow.png

http://img823.imageshack.us/img823/7318/readmorepinkblack.png

http://img88.imageshack.us/img88/4597/readmorepurpleblue.png

http://img28.imageshack.us/img28/5989/readmorepinkwhite.png

http://img97.imageshack.us/img97/5011/readmoreblue.png

http://img193.imageshack.us/img193/7492/readmoreblack.png

http://img220.imageshack.us/img220/1725/readmoregreen.png

http://img823.imageshack.us/img823/5470/readmorepink.png

http://img412.imageshack.us/img412/7315/27170680.png

http://img100.imageshack.us/img100/4641/55997688.png

http://img850.imageshack.us/img850/7259/93789459.png

http://img861.imageshack.us/img861/4052/43082527.png

http://img40.imageshack.us/img40/3784/43423111.png

7) Akhir sekali klik preview, dan jika tiada error, klik save.

Icon Lucu sebelah arsip blog

Preview:

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

<li><a expr:href='data:i.url'><data:i.title/></a></li>

4) Masukkan kod di bawah diantara kod <li> dan <a expr:href='data:i.url'><data:i.title/></a></li> yang korang cari tadi:

<img src='url icon'/>

contoh:

<li><img src='url icon'/><a expr:href='data:i.url'><data:i.title/></a></li>

nota:
url icon -masukkan url icon yang korang nak. Korang boleh pilih icon comel2 dekat sini . Cara nak dapatkan url gambar pula, refer di sini  Ataupun just copy url image yang disediakan di bawah:

http://dl8.glitter-graphics.net/pub/1008/1008838wybxuht5da.gif

http://dl4.glitter-graphics.net/pub/1009/1009254cq7evun01h.gif

http://dl.glitter-graphics.net/pub/1008/1008951xbh88shb03.gif

http://dl2.glitter-graphics.net/pub/436/436032x06lk4lcqb.gif

http://dl9.glitter-graphics.net/pub/438/438969azkmwb42oa.gif

http://dl4.glitter-graphics.net/pub/1008/1008954qqr71dvokd.gif

5) Dah siap, klik preview, jika tiada error, klik save template.

Selamat mencuba! :)

Letak Gambar Sebelah Tajuk Entri / Post

 Caranya:
1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Template"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

 <a expr:href='data:post.url'><data:post.title/></a>

4) Copy kod di bawah dan letakkan di antara kod <a expr:href='data:post.url'> dan <data:post.title/></a> yang korang cari dalam langkah 3 tadi

<img src="url gambar"/>

Contoh, rupa kod korang akan jadi macam ni:

<a expr:href='data:post.url'><img src="url gambar"/><data:post.title/></a>

5) Kemudian, pada url gambar, gantikan dengan url gambar pilihan korang. Kat bawah ada disediakan beberapa gambar, pilih je. Ataupun korang boleh search sendiri dekat google. 

Contoh, rupa kod korang lastly akan jadi camni:

<a expr:href='data:post.url'><img src="https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/cute.gif"/><data:post.title/></a>

Just copy url gambar yang disediakan

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/cute.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/2.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/3.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/4.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/5.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/6.gif

http://img26.imageshack.us/img26/7237/34199498.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/8.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/arrow.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/arrow2.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/arrow3.gif

https://6412544969642075171-a-1802744773732722657-s-sites.googlegroups.com/site/jombinabelogsebelahtajukpost/arrow4.gif

http://img827.imageshack.us/img827/9452/t18.png

http://img845.imageshack.us/img845/1995/60329625.png

http://img59.imageshack.us/img59/1008/t19.png

6) Lastly, klik preview dulu, dan jika tiada sebarang error, klik save template.