Cara Menciptakan Widget Footer Menjadi 3 Kolom Itu Mudah

Selasa, 01 Oktober 2013

Pernah ada teman blog yang bertanya kepada Kang Wira "Bagaimana cara menciptakan widget footer menjadi 3 (tiga) kolom ?"
Dan saya jadikan inspirasi untuk artikel saya kali ini.

Apakah kau pernah mencoba untuk merubah tampilan template yang ketika ini sedang kau pakai?

Misalnya, pada template ketika ini ternyata hanya disediakan 2 kolom widget untuk footer dan kau ingin menambah kolom tersebut supaya menjadi 3 kolom.

Nah berarti artikel kali ini dapat kau terapkan dalam blog kamu.



Dibawah ini ialah teladan widget footer blog 3 kolom yang sudah diterapkan pada template blog kangwira ketika ini

Nah, Bagaimana caranya untuk merubah kolom tersebut?

Sebenarnya hanya sedikit arahan yang dapat kau salin dan kau tempelkan kedalam template kamu.

Baiklah, kita pribadi saja mempraktekkan tutorial wacana Cara Membuat Widget Footer Blog supaya Menjadi 3 Kolom.

Cara menciptakan widget footer 3 kolom

• Buka akun blogger kamu
• Pilih hidangan > Template > Edit Html
• Lalu salin arahan 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 arahan di atas sempurna diatas arahan ]]></b:skin>
• Selanjutnya, kau salin arahan 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 kau tempel arahan di atas sempurna diatas arahan <div id='footer'>
• Simpan kemudian lihat hasilnya

Praktis kan ?

Baca Juga : Menampilkan Widget di Atas Artikel

Jika kau tidak menemukan <div id='footer'> pada template yang sedang kau gunakan ketika ini, kau dapat menempelkan arahan html di atas sempurna diatas footer credit link, alasannya di setiap template niscaya berbeda-beda kode.

Sekian dulu tutorial singkat wacana Cara Membuat Widget Footer Blog supaya Menjadi 3 Kolom.

Semoga kalimat penyampaiannya gampang dipahami ya.

Share This :