Senin, 18 November 2013
Cara Membuat 3 Kolom Di Bawah Header Dijamin 100
Setelah beberapa hari sempat vakum dari aktifitas blogging, dikarenakan beberapa aktifitas lain yang memang harus diselesaikan segera dan juga mungkin karena akibat dompet yang semakin hari semakin kering aja hehehe.
Pernah saya berangan-angan jikalau biaya untuk berinternetan dapat di gratiskan oleh semua operator yang ada di Indonesia. Gak bisa saya bayangkan pasti deh orang yang pertama paling kegirangan adalah sobat blogger terutama saya sendiri hehehe.
Oke, gak usah baca curhatan saya di atas mending sobat blogger baca tutorial yang akan saya bahas kali ini yakni bagaimana cara membuat 3 kolom di bawah header di blog seperti gambar di bawah ini.
Adapaun cara untuk membuat 3 kolom di bawah header adalah sebagai berikut.
1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan Lupa centang Expand template widget.
4. Cari code di bawah ini. Untuk mempermudah pencarian tekan ctrl+F.
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan Lupa centang Expand template widget.
4. Cari code di bawah ini. Untuk mempermudah pencarian tekan ctrl+F.
]]></b:skin>
5. Setelah code di atas ketemu, copy code di bawah ini dan letakkan di atas code ]]></b:skin>
#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
6. Kemudian cari code di bawah ini. Untuk mempermudah pencarian tekan ctrl+F.
<div id=main-wrapper> bila tidak ada cari code ini <div class=main-outer>
7. Setelah salah satu code di atas ketemu, copy paste code di bawah ini dan letakkan di atas salah satu code di atas.
<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>
9. Dan yang terakhir simpan template dan lihat hasilnya.
Gimana sobat mudahkan cara membuatnya. Sekarang tugas sobat hanya mencobanya di blog sobat. Selamat mencoba dan happy blogging 
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar