Warung Bebas
kc17

Senin, 23 Januari 2012

Membuat 3 Kolom Elemen di Bawah Header

Menambahkan toga kolom tepat di bawah header sangat membantu kita untuk meminimalisir halam blog kita. Sehingga widget yang akan kita tambahkan tidak selalu vertikal, akan tetapi dapat memanjang secara horizontal. Mungkin sobat blogger masih ada yang bingung dengan tips ini. Jika sobat masih bingung denga tips ini, silahkan pelajari gambar di bawah ini.
Klik gambar untuk memperbesar
 Nah, jika sobat blogger sudah mengerti dengan tujuan tips ini, silahkan ikuti langkah-langkahnya jika sobat blogger ingin menampilkannya pada blog sobat.
1. Login ke blogger.com dengan account anda
2. Pada Template blog anda, silahkan cari kode ]]></b:skin>
3. Kopi dan pastekan kode berikut di atas kode yang anda cari tadi.
#box-main-container {
clear:both;
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
4. Setelah langkah ke-3 selesai, silahkan cari lagi kode yang mirip seperti ini <div id='main-wrapper'> Atau <div class='main-outer'>.
5. Setelah ketemu kodenya, Kopi dan Pastekan kode berikut ini di ATAS kode tersebut.
<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
6. Simpan Template, dan lihat perubahannya pada Tata Letak blog anda.
Semoga bermanfaat dan jika ada kesalahan, kami mohon maaf. Karena blog ini masih jauh dari kesempurnaan.
Catatan:
Jika ada kode CSS atau HTML yang tidak sesuai, silahkan cari-cari kode yang mirip dengan kode yang dicari tsb. Karena kode dari setiap Template ada yang berbeda. Thanks (Jkt/2012) 

0 komentar em “Membuat 3 Kolom Elemen di Bawah Header”

Posting Komentar

Adversite

 

YHS Rider_Community Copyright © 2012 Fast Loading -- Powered by Blogger