Cara Membagi Header Blog Jadi Dua Bagian

LANGKAH PERTAMA

1. Template > Edit HTML

2. Cari kode <b:section class='header'> seperti dalam gambar di bawah ini:

3. Copy & Paste kode berikut ini di atas atau sebelum kode <b:section class='header'>yang dikasih highlight kuning di atas:

<div class='swt-blogheader'>

4. Copas kode berikut ini sebelum atau di atas kode </b:section> yang dihighlight grey di atas:

<b:section class='swt-blogheader-right' id='swt-blogheader-right' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<!-- /swt-blogheader -->
<div style='clear: both'/>

5. Copas kode berikut ini di atas kode ]]></b:skin>

.swt-blogheader {position: relative;width: 100%;}
#header {padding: 0;margin:0;overflow:hidden;float:left; width:35%;}
#swt-blogheader-right {padding: 0;margin:0;overflow:hidden;float:right;width:65%;}

Angka 35% (untuk logo/nama blog) bisa diubah menjadi 300px. Angka 65% (untuk space iklan di kanan) bisa diubah menjadi 468px. Sesuaikan aja dengan lebar keseluruhan headernya.

6. Save Template!

7. Klik Layout, maka akan tampak seperti ini:

Silakan klik "Add a Gadget" dan isi dengan kode iklan atau url gambar. Jika menampilkan gambar, maka kodenya adalah seperti ini:

<a href="URL_LINK"><img src="URL _GAMBAR" />

URL_LINK = link yang terbuka jika gambar diklik

URL _GAMBAR = ya... Url gambar yang dimunculkan di sana :) Simpan dulu gambarnya diPicasa Web Google, lalu copy link addressnya (image url link).

Artikel Lainnya