Bikin 2 Kolom Page Elemen di Bawah Header (di Atas Kolom Posting) Pada Template Blogspot/Blogger

Awalnya si lihat blog dari malaysia sana yang tampilannya oke banget, menurutku ya, jadi akhirnya ingin juga meniru. Setelah goggling cari-cari informasi, akhirnya ketemu juga informasi yang pas seperti apa yang aku inginkan di SURIYADI'S BLOG.

Cara membuat 2 kolom page elemen di bawah header-nya adalah sebagai berikut:

1. Login ke Blogspot --> Layout --> Edit HTML

2. Untuk jaga-jaga bila nanti ada kesalahan dalam proses edit HTML, download dulu template awal ya.

3. Cari kode ]]></b:skin> dan letakan kode berikut tepat diatasnya:

/* KolomAtas
—————————- */

#kolomatas {
width: 950px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}

#kolomatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#kolomatas ul {
padding: 0;
margin: 0;
}

#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #031c5d; */
}

#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#FFFF33;
text-decoration: none;

}
#kolomatas ul li a:hover {
background: #B1ACB1;
}

#left-kolomatas { /* yang ini nih kode kolom kiri */
width: 450px;
float: left;
padding-left:15px;
}

#right-kolomatas { /* kalo yg ini kode kolom kanan */
width: 450px;
float: left;
padding: 0 5px 0 15px;
}

Catatan: baris kode diatas di kopi-paste seperti aslinya, bagian yang ditandai dengan warna merah yaitu 950px itu adalah lebar kolom keseluruhan; kemudian karena ingin dijadikan 2 kolom maka harus dibagi 2 menjadi 450px - 450px kiri dan kanan. Sedang sisa jaraknya (50px) digunakan untuk jarak kiri (padding) kiri 15px, tengah 20px dan kanan 15px.

Untuk keperluan blog ini, kode diatas sudah dirubah, lebar kolom keseluruhan adalah 860px, lebar kolom kiri 340px dan lebar kolom kanan 500px.Baris kode dengan warna hitam dihilangkan. Jarak / padding page elemen nya juga disesuaikan untuk keperluan blog ini.

4. Sekarang cari kode seperti dibawah

<div id=’outer-wrapper’>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’NAMA BLOG ANDA’ type=’Header’/>
</b:section>
</div>

dan letakan kode dibawah ini tepat berada dibawah kode diatas

<div id='kolomatas'>
<b:section class='kolomatas' id='left-kolomatas'>
</b:section>
<b:section class='kolomatas' id='right-kolomatas'>
</b:section>
</div>

5. Simpan templates, kemudian lihat hasilnya di bagian Page Elements

Catatan: Kalau template tidak bisa disimpan, coba tanda petik ('), yang diberi warna merah, pada kode diatas dihapus dan ditulis ulang, setelah itu simpan.

Selamat mencoba.

Catatan tambahan: awalnya 2 page elemen yang telah dibuat di blog ini digunakan untuk Recent Posts dan Popular posts, tetapi setelah di pertimbangkan lagi, akhirnya dibiarkan kosong.

*****

Tips Blogger lainnya:

• Kode HTML untuk membuat Read More pada blogger/blogspot
• Pasang Menu Bar di blogger/blogspot
• Kode HTML untuk sembunyikan Navbar pada blogger/blogspot
• Atasi error bX-hq2u5m saat upload template baru di blogger/blogspot
• Pasang Recents Posts dan Recent Comments di Blogger
• Kode HTML untuk blogger/blogspot agar Title Posting lebih bersahabat dengan SEO
• Bikin Sidebar di Sebelah Kiri Pada Template Blogspot/Blogger
• Bikin 2 Kolom Page Elemen Di Bawah Header (di Atas Kolom Posting) Pada Template Blogspot/Blogger
• Bikin 2 Kolom Page Elemen Di Bawah Kolom Posting Pada Template Blogspot/Blogger
• Kode Untuk Memberi Warna Pada Background Posting
• Buat Garis Pinggir Atau Kotak Pada Kolom Posting dan Sidebar