Cara Membuat 3 Kolom Diatas Footer


Dari sekian lama sudah tidak aktif dalam berposting dan kinilah saat nya saya untuk melajutkan postingan yang sudah lama saya tunda karena di 2 bulan terakhir yang lalu saya terlalu sibuk dengan pekerjaan yang sangat-sangat menumpuk dan akhir nya pada 1 minggu yang lalu telah terselesaikan juga. . . sebelumnya saya mohon maaf yang sebesar-besarnya kepada sahabat blogger, bila mana saya ada kesalahan dalam berposting dan dalam tutur bahasa yang kurang mengenakan untuk sahabat blogger sekalian.

Baiklah pada kesempata kali ini saya akan mencoba untuk berbagi kembali tentang sebuah pengalaman membuat 3 kolom di atas footer, mungkin untuk sahabat blogger sudah tidak asing lagi tetapi ini hanya sekedar pengahangat alias awalan posting pada hari ini... kayak secangkir teh ataupun kopi begitulah bunyinya hehehehe.
tanpa banyak basa-basi langsung aja deh sobat ke TKP >> Cekidot....

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Cari kode ]]></b:skin>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.

6. Copy kode di bawah ini dan paste di atas kode tersebut.

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

7. Cari kode <!-- end content-wrapper --> Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.
8. Copy kode di bawah ini dan paste di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col4' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col5' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col6' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

9. Klik tombol SIMPAN TEMPLATE.

Cukup segitu dulu deh kawan postingan saya kali ini dan saya ucapkan selamat mencoba dan semoga sukses.... Salam Blogger Sejati

0 komentar:

Posting Komentar