Kolom halaman dalam sebuah blog merupakan elemen penting yang berguna untuk menambahkan berbagai widget kedalam blog kita. Namun kadang template yang kita miliki kurang sesuai dengan apa yang kita inginkan. Ada kalanya kita ingin menambahkan widget di bagian tertentu tapi tidak tersedia kolom untuk itu. Jika demikian, tentu kita harus menambahkan kolom baru kedalam template blog tersebut.
Cara untuk menambahkan kolom baru tersebut sebenarnya tidak terlalu sulit. Kita tinggal menambahkan kode CSS kedalam template blog kita lalu memberikan perintah HTML pada body template tersebut. Berikut adalah langkah-langkah yang harus kamu lakukan:
Contoh hasil yang bisa kamu lihat:
Nah, segitu aja dulu coy... Selamat mencoba!!!
Cara untuk menambahkan kolom baru tersebut sebenarnya tidak terlalu sulit. Kita tinggal menambahkan kode CSS kedalam template blog kita lalu memberikan perintah HTML pada body template tersebut. Berikut adalah langkah-langkah yang harus kamu lakukan:
- Seperti biasa, Login ke blogger.
- Dari dasbor klik Elemen Halaman dan pilih Edit HTML.
- Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
- Buatlah kode CSS di atas ]]></b:skin> seperti contoh berikut:
/* Tambahan Dua Kolom */
#tambah {
width:300px;
height:auto;
position: relative;
float: right;
margin: 5px 0 0 0;
padding: 0px;
font-size: 12px Arial, Helvetica, sans-serif;
}
#kiri {
width: 150px;
float: left;
padding: 0 5px 0 5px;
}
#kanan {
width: 130px;
float: right;
padding: 0 5px 0 5px;
}
Pada perintah tersebut, kolom ditempatkan di sebelah kanan dengan margin atas 5px (putaran jarum jam: atas, kanan, bawah, kiri) dan lebar kolom 300px, yang terbagi untuk kolom kiri 150px dan kanan 130px. Masing-masing kolom memiliki jarak dalam kolom (padding) kiri dan kanan 5px.
Kamu dapat membuatnya sesuai dengan ukuran dan posisi yang kamu inginkan. Tapi jangan lupa, jika ukuran kolom utama 300px maka ukuran kolom-kolom lain ditambah margin kiri dan kanan tidak boleh melebihi 300px. - Setelah itu buatlah kode HTML yang diletakkan di antara <body> dan </body> (tergantung mau diletakkan dimana, di header, side, atau footer), misalnya seperti berikut:
<div id='tambah'>
<b:section class='tambah' id='kiri' showaddelement='yes'>
</b:section>
<b:section class='tambah' id='kanan' showaddelement='yes'>
</b:section>
</div> - Lakukan pratinjau, jika OK, simpan dan ucapkan alhamdulillah...
Contoh hasil yang bisa kamu lihat:
- Tambahan 3 kolom di header dapat dilihat di blog ini (lihat jam, asmaulhusna, dan slide foto).
- Tambahan 2 kolom di header dapat dilihat di blog ini (lihat slide foto dan logo).
- Tambahan 1 kolom di atas footer dapat dilihat di blog ini (lihat banner sahabat).
Nah, segitu aja dulu coy... Selamat mencoba!!!
0 comments:
Post a Comment
Komen yang bijak sangat di nantikan...! Terimakasih..