Monday, September 5, 2016

Cara Membuat Widget Footer Menjadi 3 Kolom itu Mudah

Chat on Whatsapp

WarnetQQ Situs Poker Online Terpercaya Domino99 Online

Situs Poker Online Terpercaya SBCC
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.

Cara Membuat Widget Footer Menjadi 3 Kolom itu Mudah

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.


Previous
Next Post »
BLOGGER
DISQUS

No comments