January 6, 2015

Cara Membagi Header Blog Menjadi Dua Bagian (2 Kolom)

January 6, 2015

Cara Membagi Header Blog Menjadi Dua Bagian
Cara Membagi Header Template Blog Bawaan Blogger Menjadi Dua Bagian/Dua Kolom.

TEMPLATE blog bawaan blogger (default) biasanya hanya punya satu kolom di header, sehingga hanya bisa menyimpan nama atau logo blog di sana.

Tutorial berikut ini akan memandu bagaimana cara membagi header blog menjadi dua bagian atau dua kolom.

Kolom kiri untuk nama blog (logo) dan kolom kanan untuk banner atau iklan --biasanya berukuran 468px.

So... this is about How to Divide Blogger Header In Two Parts atau membagi header blog di template bawaan blogger menjadi dua kolom. Ini caranya:

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>

3. Copy & Paste kode berikut ini di antara kode </b:section> and </div>

<b:section id='header-right' showaddelement='yes'/>
<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>

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;}

Catatan:
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.


Cara Membagi Header Blog Menjadi Dua Bagian


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:

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 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 & Happy Blogging! (http://www.contohblog.com).*

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://stackoverflow.com/questions/10874593/how-to-split-blogger-header-into-2-columns

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

7 comments on Cara Membagi Header Blog Menjadi Dua Bagian (2 Kolom)

  1. Sebelum dan sesudahnya makasih juragan. Saya mengikuti cara kedua dari artikel ini karna cara pertama sudah saya lakukan dan tida berhasil. hehe, tapi masih ada kendala nih, ukuran logo 'headernya' memang mengecil tapi elemen pada layout nya tidak terbagi menjadi 2, masih tetap seperti awal (seperti gambar layout pada cara pertama). trus ketika saya coba tambahkan iklan (add a gadget) iklannya tampil dibawah header bukan di samping. Barang kali ada solusi LAGI mohon bantu.. :D

    ReplyDelete
    Replies
    1. sekarang sudah sip juragan, TRIMAKASIH BUANYAK. :D

      Delete
  2. Siiip juragan, banyak tutorial yg saya terapkan tp tdk berhasil tapi kali ini berhasil, thanks !

    ReplyDelete
  3. makasi bnget...skrg lega....

    ReplyDelete

Contact Form

Name

Email *

Message *