Home › Membuat Header Blogspot Menjadi dua Kolom

Membuat Header Blogspot Menjadi dua Kolom

dua Kolom
Kita sudah mengenal Struktur Dasar Template Blogspot dan dengan pengenalan tersebut kita dapat juga merubah Lebar Header, Halaman Posting dan Sidebar dengan mengenal sedikit kode utama bagian tersebut. Sekarang kita coba membagi Header menjadi dua kolom.

Membuat Header Blogspot Menjadi dua Kolom, Bagaimana sih bentuk header dua kolom tersebut. kira-kira seperti sobat lihat di bawah ini, yang sebelah kiri merupakan header utama yang di potong sedangkan sebelah kanan header hasil potongan.

Di dalam postingan ini header yang akan di modifikasi adalah untuk blog yang memakai templete baru.

Header Tambahan

PERTAMA
  • Login terlebih dahulu, kalau sudah login silahkan langsung ke RANCANGAN
  • Klik Edit HTML
  • Sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
  • Jangan lupa di centang
  • Kalau sudah kita mulai merubah html nya
Cari kode seperti dibawah ini, cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal .header-outer

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

Hapus kode di atas dan ganti (replace) dengan kode di bawah ini

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

KEDUA

Cari kode di bawah ini

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

Tambahkan dengan kode di bawah ini

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

Hasil jadi seperti bawah ini

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

catatan :
  • Untuk yang bercetak tebal merupakan kode yang di tambahkan tambahan 
  • Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah. 
KETIGA 
  • Selesai dan simpan template
Selamat Mencoba Semoga Berhasil.
Share this article :

19 comments

PERTAMAX diamankan sobat,,,,,,,,

Waaaah nice info nih sob,,, makasih sob udah berbagi

@Falah Mulyana
Sama-sama sobat. Salam

tips bermanfat Sob..cocok tuk narok iklan...hehe. happy blogging

@Iskaruji dot com
Tahu aja si Om.. tujuannya sih..
Salam

sobat, gimana cara nya buat nambahin share to fb , twitter atau yang lain nya? tlg di balas ya, thanks

thanks info nya sobat.. sukses selalu.. 'n mampirlah kapan2 ke blog q.. tthanks,,

@AryaDharma
Sama-sama Sobat.

Untuk Share bookmark nya
1. Arahkan mouse ke +Share kemudian keluar menu,
2. Lihat dibawah sebelah kiri ada tulisan +Add this klik aja,
3. Kemudian kita akan dibawa kehalaman Share bookmark,
4. Pilih jenis kesukaan kita,
5. Ikuti petunjuk yang ada.
6. Selesai

Semoga bisa membantu.

trima kasih sobat,,

@AryaDharma
Mudah-mudahan bisa membantu ya.
Salam

thanks sobat,, sangat membantu,,
eh ya, mau tanya donk,, gmana cara nya biyar Blog kita banyak pengunjung nya??? tolong informasi nya,, silahkan balas atau komentar di salah satu post saya,,
happy Blogging sobat,,

sobat, kamu punya facebook atau twitter pribadi gak?? q mau tukeran info donkk,,

@AryaDharma
Ada sobat nanti saya kasih ya.
Salam

sobatt,, gimana nih cara nya byar blog kita banyak pengunjung nya?? tlg informasi nya,, terima kasih,,
salam..

@AryaDharma
Makasih kunjungannya sobat

wah.. bagus nih buat pasang iklan di samping header..makasih infonya yah broo..

@wafinela
Tujuannya seperti itu Teman. Salam

punya ku tidak ada kode .header-outer{,,, gimana gan ???

@HENDRO
Template lain biasanya beda Script nya coba cari berdasarkan .header aja dulu, pokoknya yang hampir mirip aja.

Bro, Sekarang tampilan Edit HTML nya baru,