Monday, September 5, 2016

Cara Membuat Widget Footer Menjadi 3 Kolom itu Mudah

Chat on Whatsapp

Pernah ada teman blog yang bertanya kepada Kang Wira "Bagaimana cara membuat widget footer menjadi 3 (tiga) kolom ?", 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

Cara Membuat Widget Footer Menjadi 3 Kolom itu Mudah

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>

Previous
Next Post »

KASIH KOMENTAR DISINI

BLOGGER
DISQUS
Pilih System Komentar

No comments