Tambah 3 Kolom di Bawah Header

Kali ini saya mau berbagi tips blogger cara menambahkan tiga kolom elemen di bawah header, untuk fungsinya sendiri terserah anda ingin meletakkan apa saja ke dalamnya. Biasanya area widget ini oleh sebagian blogger untuk menempatkan banner iklan. Berikut ini langkah-langkahnya

3 Kolom di Bawah Header

  1. Login ke akun Blogger.
  2. Pada Dashboard pilih Template dan klik Edit HTML (Jangan lupa, backUp dulu Template lengkap untuk mengantisipasi jika terjadi kesalahan saat copy/paste script)
  3. Cari kode  ]]></b:skin> (untuk memudahkan pencarian tekan "Ctrl + F" pada keyboards).
  4. Copy kemudian letakkan kode di bawah berikut di atas/sebelum kode  ]]></b:skin> tadi.
/* Top Header
---------------------------- */
#topheader {
width:930px;
clear:both;
float:left;
color:#333;
background:#fff;
margin:0 auto;
padding:0 0 10px;
}

#topheader a:visited {
color:gray;
text-decoration:none;
}

#topheader h2 {
font-size:11px;
font-weight:700;
line-height:1.4em;
text-transform:uppercase;
border-bottom:1px dotted silver;
margin:0 0 10px;
padding:20px 0 2px;
}

#topheader ul {
color:#333;
margin:0;
padding:0;
}

#topheader ul li {
list-style-type:none;
background:fff;
border-bottom:1px dotted #ccc;
padding-left:17px;
margin-top:2px;
}

#left-topheader {
width:360px;
float:left;
padding-left:15px;
}

#center-topheader {
width:230px;
float:left;
padding:0 20px;
}

#right-topheader {
width:260px;
float:right;
padding-right:15px;
}

Kode warna putih, silahkan anda sesuaikan dengan lebar/width kolom tamplate anda. Sedangkan kode warna merah adalah nilai width/lebar tiap-tiap kolom tersebut, silahkan anda modifikasi sendiri sesuai keinginan.
Kemudian sekarang kita akan membuat id untuk properti elemennya. Carilah kode berikut

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Info Dunia dan Tips Blogger (Header)' type='Header'/>
</b:section>

Copy lalu Paste kode di bawah berikut ini tepat di bawah/setelah kode di atas.

<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'/>
<b:section class='topheader' id='center-topheader' preferred='yes'/>
<b:section class='topheader' id='right-topheader' preferred='yes'/>
</div>

Simpan template dan lihat hasilnya.
Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Tambah 3 Kolom di Bawah Header
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2012/03/tambah-3-kolom-di-bawah-header.html

Related Post

0komentar:

Post a Comment

*Silahkan tinggalkan komentar, saran atau kritik sesuai topik untuk kemajuan blog ini.
*Komentar anda secepat mungkin direspon, karena saya tidak selalu online.
*KOMENTAR TIDAK SOPAN, BERIKLAN, VULGAR, MELECEHKAN, SARA atau PROVOKATIF akan dianggap SPAM, dan berakhir di Tong Sampah..!!!