Cara membagi header menjadi 2 kolom seperti blog ini :)

Untuk apa kolom header dibagi menjadi 2 kolom? jawabannya, kalau header blog, pada umumnya kolom pertama yaitu kolom judul blog dan kolom kedua bisa sobat pakai seperti untuk adsense, pemasangan iklan, search engine dll. Membagi atau membelah header menjadi 2 kolom, perlu diketahui desain template itu sangatlah komplek dan menggunakan banyak sekali teknik.

Agar tidak terjadi hal yang tidak diinginkan, saya sarankan untuk membackup dulu templatenya.. Jika tertarik, ikuti step by stepnya:

Mengganti kode CSS header anda

Login pada pada Blogger
Masuk ke Template >> Edit HTML
Cari kode header-wrapper (ada dua kode yang sama) *pilih yang pertama*. Kode setiap template berbeda beda ada yang header atau kepala, tanpa wrapper. Kode ini biasanya terletak di bagian <b:skin> anda tinggal menggulirkan scroll keatas.

Kode selengkapnya seperti ini

Kode diatas ganti dengan kode dibawah ini

#header-wrapper{-moz-border-radius:10px 10px 10px 10px;-webkit-border-bottom-left-radius:10px -webkit-border-bottom-right-radius:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;border-radius:10px;background: #FFF; width:1006px;margin: 3px 0px 0px 10px;padding-left:3px;height:140px;overflow:hidden;padding-right: 20px; border: 2px solid #ccc;}

#header-inner{background-position:center;}

#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:43%;overflow:hidden;padding-left:14px;padding-bottom:0px}

#header h1{margin:0 5px 0;padding:5px 0 0 0px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:41px;color:#003B7A;text-shadow: 0 1px 0 #fff;}

#header .description{padding-left:5px;color:#003B7A;font-size:12px;padding-top:0px;margin-top:0px;}

#header h1 a,#header h1 a:visited{color:#003B7A;text-decoration:none}

#header h2{padding-left:15px;color:#003B7A;font:12px Arial,Helvetica,Sans-serif}

#header2{float:right;width:53%;margin-right:0px;padding-right:0px;overflow:hidden;}

#header2 .widget{padding:0px 10px 0 0px;float:right}

Keterangan:

# Tulisan berwarna orange adalah kode agar setiap pojok header membulat (tidak siku-siku). Ini adalah kode editan agar desain setiap pojok smooth

# Huruf berwarna hijau adalah kode warna untuk background header. Gunakan " transparent " jika anda ingin menggunakan warna transparan

# Angka berwarna biru adalah ukuran lebar dan tinggi header

# Tulisan berwarna pink adalah letak header 1 dan 2. (barangkali anda akan menaruh judul blog di bagian kanan)

# Tulisan berwana merah adalah ukuran header 1 dan 2 berdasarkan skala persen..

Mengganti Kode HTML Header

Selanjutnya cari kode dari header-wrapper (ada dua kode yang sama) #pilih yang kedua#. Biasanya kode ini terletak dibawah <body>

kode selengkapnya seperti ini :

<div class='outer' id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='yes'><b:widget id='Header1' locked='false' title='Yoyo Saorang (Header)' type='Header'/></b:section></div>

Hapus kode di atas dan ganti dengan kode di bawah ini

<div class='outer' id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='yes'><b:widget id='header' locked='false' title='Yoyo Saorang (Header)' type='Header'/></b:section><b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'></b:section></div>

Simpan Template

Last Words

Selesai, jika semua step dilakukan dengan benar, tampilan kolom sesudah diedit akan menjadi seperti pada header milik saya. Header ini biasanya digunakan untuk menaruh iklan advertiser. Sekian post tentang Cara membagi header menjadi 2 kolom. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)

Cara membagi header menjadi 2 kolom seperti blog ini :)

Mengganti kode CSS header anda

Mengganti Kode HTML Header

Last Words

Related Posts

Popular Posts

Label

Cari

Donasi

Artikel Pilihan