Wednesday, December 16, 2015

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:
Cara Membagi Header Blog Menjadi Dua Bagian

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:

Cara Membagi Header Blog Menjadi Dua Bagian

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).

No comments:

Post a Comment