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>
<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 :)
AD-BLOCKER DETECTED!
