Dan saya jadikan ide untuk artikel saya kali ini.
Apakah kamu pernah mencoba untuk merubah tampilan template yang saat ini sedang kamu pakai?
Misalnya, pada template saat ini ternyata hanya disediakan 2 kolom widget untuk footer dan kamu ingin menambah kolom tersebut agar menjadi 3 kolom.
Nah berarti artikel kali ini bisa kamu terapkan dalam blog kamu.
Dibawah ini adalah contoh widget footer blog 3 kolom yang sudah diterapkan pada template blog kangwira saat ini
Nah, Bagaimana caranya untuk merubah kolom tersebut?
Sebenarnya hanya sedikit kode yang bisa kamu salin dan kamu tempelkan kedalam template kamu.
Baiklah, kita langsung saja mempraktekkan tutorial tentang Cara Membuat Widget Footer Blog agar Menjadi 3 Kolom.
Cara membuat widget footer 3 kolom
- Buka akun blogger kamu
- Pilih menu > Template > Edit Html
- Lalu salin kode dibawah ini
/* Footer 3 Colom Madamvia */
#footer-column-divide {
background:#2980b9; color:#fff; font-size:14px; clear:both; display:block;
}
#footer-column-divide a {
color:#fff;
}
#footer-column-divide a:hover {
color:#333;
}
#footer-column-divide h2, #footer-column-divide h3 {
height:25px; font-size:16px; color:#fff; text-align:left; border-bottom: 2px solid #fff; padding:0px; margin:10px;
}
.footer-column {
padding: 10px;
}
.footer-column .widget-content {
padding: 10px;
} - Tempel kode di atas tepat diatas kode ]]></b:skin>
- Selanjutnya, kamu salin kode dibawah ini.
<div id='footer-column-divide'>
<div id='footer-left' style='width: 35%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='column-left' preferred='yes' style='float:left;'/>
</div>
<div id='footer-center' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='column-center' preferred='yes' style='float:left;'/>
</div>
<div id='footer-right' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='column-right' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>- Silahkan kamu tempel kode di atas tepat diatas kode <div id='footer'>
- Simpan lalu lihat hasilnya
Mudah kan ?
Baca Juga : Menampilkan Widget di Atas Artikel
Jika kamu tidak menemukan <div id='footer'> pada template yang sedang kamu gunakan saat ini, kamu bisa menempelkan kode html di atas tepat diatas footer credit link, karena di setiap template pasti berbeda-beda kode.
Sekian dulu tutorial singkat tentang Cara Membuat Widget Footer Blog agar Menjadi 3 Kolom.
Semoga kalimat penyampaiannya mudah dipahami ya.
