Tutorial : scrollbar dalam blog archive

Scrollbar dalam blog archive memang sangat sangat diperlukan untuk cepat kan loading blog dan tidak meleret-leret panjang sampai ke bawah.

1. Dashboard > Template > Edit HTML

2. CTRL + F [Find]

<div id='ArchiveList'>

3. Copy this. Paste SEBELUM code di atas.

<div style='overflow:auto; width:ancho; height:250px;'>

Merah : Boleh lah ikut kesesuaian blog anda.

4. Preview. No error, save!

5. Kalau error, CTRL + F [find]

<b:include name='quickedit'/>

6. Copy dan paste ini di bawah.

</div>

Tutorial : border dan shadow keliling post tittle

1. Dashboard > Template > Edit HTML

2. CTRL F [Find]

.post h3  

 Kalau tak jumpa juga

h3.post-title {

 Kalau tak jumpa juga

 h4 }

3. Copy this.

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;

Tulisan berwarna boleh ditukar.

Warna di sini.

4. Paste SELEPAS code yang di cari.

5. Preview. Tak ada eror, save!

Tutorial : Menu tab

bla bla bla

1. Dashboard > Template > Edit HTML  

2. CTRL + F [Find]  

 ]]></b:skin>

3. Copy code ini dan paste SEBELUM / ATAS ayat di yang dicari diatas tadi.  

a.menutab { background:url(URL BACKGROUND IMAGE); display: inline-block; font: normal 10px 'Lucida Sans Unicode', Lucida Grande, sans-serif; color: #000000; border: 2px solid #eee; display: inline-block; letter-spacing: 1px; margin: 0 2px 0 0; padding: 4px 9px; text-transform: uppercase; } a.menutab:hover { -webkit-transition: 1.0s; -moz-transition: 1.0s; border: 2px solid #ccc; background:#e23767; color:#ffffff; } 

4. Adjust tulisan berwarna.  
Kelabu : Warna sini 
kuning : solid | dashed | dotted  

5. Preview. Kalau tak ada error, save!  

Tak habis lagi tau.

 6. Layout > Add gadget > HTML/Javascript 

<center><a href="LINK PAGE"><img src="URL GAMBAR"/></a> <a href="LINK PAGE"><img src="URL GAMBAR"/></a> <a href="LINK PAGE"><img src="URL GAMBAR"/></a> <a href="LINK PAGE"><img src="URL GAMBAR"/></a></center> 

 Kalau taknak center, hanya paste ini.

  <a href="LINK PAGE"><img src="URL GAMBAR"/></a> <a href="LINK PAGE"><img src="URL GAMBAR"/></a> <a href="LINK PAGE"><img src="URL GAMBAR"/></a> <a href="LINK PAGE"><img src="URL GAMBAR"/></a>

  Sekian

Tutorial : Center kan header

1. Dashboard > Layout > Template designer > Advanced > Add CSS 

2. Copy this! 

 .header-outer { margin-left:130px; }  

merah : tukar ikur kesesuaian ye..

Paste mcm ni.

3. Apply to blog. Siap!