Membuat Header Blogspot Menjadi Dua Kolom

Membuat Header Blogspot Menjadi Dua Kolom

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.

No comments:

Post a Comment