Macam Mana Nak Pasang Code Widget Header

Google Blog Press

1. Pergi ke Blogger Dashboard, Kemudian Klik Pada Template Dan >Edit HTML
2. Selepas Edit HTML anda akan nampak code code yang berserabut, anda tidak digalakkan membuang walau satu code dengan sengaja atau tidak sengaja; Ok, Selepas itu sila tekan CTRL+F pada butang keyboard atau "right click" mouse. Pada petak di atas hujung sebelah kanan akan "appear search" 
3. Sila copy code yang tertera dibawah dan "pastekan" pada kotak "search"

Demo Widget Header | Title bersama Logo Google Barcode

  <b:section class='header' id='header' maxwidgets

4. Di situ akan lihat code "class='header id"

Langkat berikutnya anda perlu tukar code "class='header' dengan class=header header left'

5. Langkah ke 5: copy code yang tertera di bawah dan "pastekan" pada kotak search tadi, jika ia telah ditutup kerana anda telah tekan butang "save" semasa membuat perubahan langkah ke-4. Maka tekan CTRL+F sekali untuk susulan berikut, selepas kemudian itu sila tekan "enter" guna keyboard, selepas memasukan code dibawah.

   <div class='header-cap-bottom cap-bottom'>

Selepas itu anda akan dapat melihat satu code seperti berikut:

 </div>
</div>
<div class='header-cap-bottom cap-bottom'>

6. Langkat seterusnya di atas code </div> sila copy code di bawah:

  <div style='clear:both;'/>

Ia akan kelihatan seperti contoh di bawah setelah anda pastekan code berikut.

<div style='clear:both;'/>

</div>
</div>
<div class='header-cap-bottom cap-bottom'>

7. Langkah yang ke-7, kita akan akan buatkan widget code di atas header dengan pastekan code yang tertera di dalam kotak bawah yang berwarna hijau dan sila pastekan di atas code

<div style='clear:both;'/>

pada langkat yang ke=6

 

 <b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Yang terakhir sekali sila cari code </head> (tekan CTRL+F) kemudian sila copy CSS code yang tertera di bawah:

<style>
.header-left{
display: inline-block;
float: left;
}
#header-right {
display:inline-block;
float:right;
margin-right: -20px;    
}
</style>

Dan"PASTE" diatas code </head> dan Tekan butang "Save Template" yang bewarna kuning oren
seperti:

 Siap, sila ke "Layout" akan lihat "header" dan "header-right seperti di bawah