Monday, March 30, 2009

Bikin 2 Kolom Page Elemen di Bawah Kolom Posting Pada Template Blogspot/blogger

Kode ini sebenarnya untuk membuat 2 kolom di bawah header yang aku dapatkan dari SURIYADI'S BLOG dan sudah aku coba untuk lakukan dan berhasil. Cuma setelah itu aku jadi berubah pikiran dan ingin membuat 2 kolom page elemen itu adanya di bawah kolom postingan. Setelah aku goggling cari-cari informasi, ternyata kode yang sama bisa digunakan hanya saja kode akhir untuk memunculkan page elemen itu yang letaknya berbeda.

Cara membuat 2 kolom page elemen di bawah kolom posting-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:

/* KolomAtas2
—————————- */

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

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

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

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

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

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

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

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

Catatan:

Nama baris kodenya tidak diganti, yaitu kolomatas, seperti aslinya, hanya saja ditambahi angka 2, jadi kolomatas2, agar berbeda dengan nama baris kode yang digunakan untuk membuat 2 kolom dibawah header.

Baris kode yang ditandai dengan warna merah yaitu 860 itu adalah lebar kolom keseluruhan, dan ini bisa dirubah disesuaikan dengan lebar kolom masing-masing template; begitu juga dengan lebar kolom kiri 500px dan lebar kolom kanan 340px bisa disesuaikan dengan keinginan masing-masing. Jarak/padding page elemen nya juga bisa disesuaikan.

4. Sekarang cari kode seperti dibawah

</div> <!-- end content-wrapper -->

dan letakan kode dibawah ini tepat berada dibawah kode diatas

<div id='kolomatas2'>
<b:section class='kolomatas2' id='left-kolomatas2'>
</b:section>
<b:section class='kolomatas2' id='right-kolomatas2'>
</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.

*****

Tips Blogger lainnya:

di

No comments:

Post a Comment