Membuat Header Blogspot Menjadi Dua Kolom

Posted by Andi Aryatno Sunday, January 20, 2013 ,

Banyak blogger yang membuat blognya memiliki header dua kolom. Maksudnya biasanya sebelah kiri untuk logo blog, dan sebelah kanan dimanfaatin untuk pemasangan iklan dan lain-lain. Kebanyakan blogger pemula kesulitan dalam Membuat Header Blogspot Menjadi Dua Kolom. Kali ini saya akan men-share  cara tersebut.

1. Tahap Pertama

  • Kamu harus login terlebih dahulu ke akun blogger kamu, kemudian masuk ke dasbor dan pilih menu "Template"
  • Klik "Edit HTML" dan pilih "Lanjutkan"
  • Jangan lupa ceklist kotak kecil yang disampingnya ada tulisannya "Expand Widget Template"
  • Cari kode berikut, fokuslah pada kode yang dicetak tebal. (Gunakan tombol ctrl + F untuk melakukan pencarian cepat.
.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
Kamu hapus kode diatas dan ganti dengan kode berikut

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}

Catatan :
- Kode yang berwarna merah adalah presentasi perbandiangan antara lebar header sebelah kanan dan kiri

2. Tahap Kedua
Cari kode dibawah ini

<div class='region-inner header-inner'>

Terus kamu tambah dengan kode dibawah ini

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Maka hasilnya akan seperti ini

<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Catatan
- Yang dicetak tebal merupakan kode yang ditambahkan
- Kode yang berwarna merah adalah susunan kolom kebawah, kamu bisa menggantinya teserah sesuai keinginan kamu

3. Tahap Ketiga Selesai dan Simpan Template

Sebelum kamu mengeklik "Simpan Template" ada baiknya kalau kamu klik Pratinjau terlebih dahulu. Hal ini saya anjurkan karena bertujuan untuk mengetahui kalau-kalau ada kesalahan / kekurangan dalam memasukkan script. Kalau diklik Pratinjau ternyata tidak masalah, sekarang lah waktunya Simpan Template.

Untuk melihat hasilnya, kamu bisa langsung masuk ke menu Tata Letak.

Sekian postingan tentang cara membuat header blogspot menjadi dua kolom, semoga bermanfaat dan bisa membantu menyelesaikan permasalah kamu.
Salam,

Share on :


Artikel Terkait:

4 comments

  1. Terimakasih atas infonya,
    Tapi kenapa diblog saya nggk bisa yah????

    help me gan...
    http://aan-shared.blogspot.com

     
  2. sikkahoder Says:
  3. kok punya saya tidak ada #header-wrapper {??? tolong dong dibantu...

     
  4. Apk Says:
  5. nice info

     
  6. Nury Ahmad Says:
  7. gak ketumu gan .header-outer..
    >> http://fruithealthy.blogspot.com/

     

Post a Comment

Powered by Blogger.

Followers