Tutorial berikut ini akan memandu bagaimana cara membagi header blog menjadi dua bagian, sebelah kiri untuk nama/logi dan kanan untuk banner atau iklan --biasanya berukuran 468px.
So... this is about How to Divide Blogger Header In Two Parts. Ini caranya:
LANGKAH PERTAMA
1. Template > Edit HTML
2. Cari (Ctrl+F) kode yang penampakkannya seperti berikut ini:
LANGKAH PERTAMA
1. Template > Edit HTML
2. Cari (Ctrl+F) kode yang penampakkannya seperti berikut ini:
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
3. Copy & Paste kode berikut ini di antara kode </b:section> and </div>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
<div style='clear: both;'/>
Hasilnya seperti ini:
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
</div>
4. Copy + Paste kode berikut ini di atas atau sebelum kode ]]></b:skin>
#header, body#layout #header {width:300px;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:468px;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
#header-right, body#layout #header-right {width:468px;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
Catatan:
Angka 300 (untuk space nama blog/logo di kiri) dan 468 (untuk space iklan di kanan) bisa diubah. Kalau ragu, biarkan seperti itu.
Angka 300 (untuk space nama blog/logo di kiri) dan 468 (untuk space iklan di kanan) bisa diubah. Kalau ragu, biarkan seperti itu.
5. Save template!
LANGKAH KEDUA
1. Klik Layout
2. Akan muncul kolom buat Widget baru HTML/Javascript di bawah Header seperti gambar di bawah.
Edit dan masukkan kode iklan atau url gambar di sana yang akan muncul di samping logo/nama blog.
Itu dia Cara Membagi Header Blog Menjadi Dua Bagian, seperti sering CB praktekan juga ketika memodifikasi template blog bawaan blogger, misalnya template CB Theme, yang aslinya The Simple default blogger.
CARA LAIN
Jika cara di atas gagal, atau kode-kodenya beda dengan tips di atas, coba gunakan cara lain berikut ini.
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'/>
</b:section>
</div>
<!-- /swt-blogheader -->
<div style='clear: both'/>
.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%;}
#header {padding: 0;margin:0;overflow:hidden;float:left; width:35%;}
#swt-blogheader-right {padding: 0;margin:0;overflow:hidden;float:right;width:65%;}
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 di Picasa Web Google, lalu copy link addressnya (image url link).
MASIH CARA LAINNYA:
Masih gak bisa juga? Coba cara lain yang dishare Spice Blogger Tricks.
Nah itu dia cara membagi header menjadi dua bagian alias membuat widget baru di samping nama/logo blog. Good Luck!
Sumber:
http://www.mybloggerbuzz.com/2014/03/divide-blogger-header-two-parts.html
http://www.superwebtricks.com/blogger-beginner-guide/display-adsense-in-blog-header
http://www.eliteblogpress.com/2014/01/divide-blog-header-two-parts.html
http://www.eliteblogpress.com/2014/01/divide-blog-header-two-parts.html
Demikian artikel tentang Cara Membagi Header Blog Menjadi Dua Bagian ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membagi Header Blog Menjadi Dua Bagian ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
