Membuat widget footer 3 kolom pada template terbaru blogger

kredit gambar: pexel

Pembuatan widget ini dapat diterapkan pada empat template terbaru blogger yang telah support layout versi 3.

Seperti yang anda lihat template terbaru memang keren habis tapi lihat bagian kakinya (footer) sangat monoton, padahal banyak widget yang ingin kita tempatkan disana, tapi sayang kontainernya tidak ada. Jadi memang kita harus membuatnya dan jangan kuatir dengan bentuk layout footer default yang sempit pada saat dibuka melalui pengaturan, itu hanya tampilan saja, faktanya akan berbeda.

1. Cara membentuk widget text tiga kolom: Tambahkan CSS

1. Masuk kepengaturan blogger
2. Pilih tema/theme
3. Pilih sesuaikan
4. Pada blogger theme designer pilih lanjutan atau advance
5. Scroll keatas menu yang segera muncul di sebelah kanannya scroll sampai ke menu paling bawah.
6. Pilih atau klik Tambahkan CSS atau Add CSS.
7. Pada kotak blanko CSS kosong yang muncul tambahkan kode berikut (copy dan pastekan)

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Tambahkan HTML:

1. Masuk ke dalam pengaturan blogger
2. Pilih tema/theme
3. Pilih edit HTML
4. Pada halaman editor HTML blogger pada template editblogSOHO cari kode berikut: <div class='hbzsub'>

Dan letakan kode berikut tepat diatasnya:

 <p>
<hr align='center' color='#ffae00' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text' visible='true'>
<b:includable id='main'>
<b:include name='widget-title'/>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Pada template lain kodenya bisa beda, namun jelas sekali meletakannya harus pada bagian ID footer.
SAVE TEMPLATE. Tidak ada JavaScript hanya HTML CSS sehingga widget menjadi ringan dan gesit.

2. Cara membentuk tulisan berikut link memanfaat kan widget TEXT
Membentuk tulisan footer pada masing masing 3 section widget yang telah kita buat adalah dengan cara masuk kepengaturan blogger.

1. Pilih tataletak
2. pilih tambahkan gagdet
3. Pilih tambahkan gagdet "text"
4. Silahkan buat judul atau kosongkan saja, lalu pada kotak widget pilih atau klik HTML yang terletak di sebelah kanan atas kotak dialog, dan copy kode berikut lalu pastekan ke dalam kotak dialog text tadi:

Contoh Sumber kode:

<ul class="footer-links" style="background-color: white; color: #202020; font-family: &quot;arial&quot; , sans-serif; font-size: 13px; list-style: none; margin: 0px; padding: 0px;">
<li style="margin: 0px; padding: 0px;"><a href="https://www.editblogtema.net/" style="color: #999999; text-decoration-line: none;">Home</a></li><li style="margin: 0px; padding: 0px;">
<a href="https://www.editblogtema.net/" style="color: #999999; text-decoration-line: none;">Perihal</a></li><li style="margin: 0px; padding: 0px;">
<a href="https://www.blogger.com/go/tutorials" style="color: #999999; text-decoration-line: none;">Source</a></li></ul><div><div><br /></div><div><br /></div><div><br /></div></div>

Keterangan: Tulisan merah dapat anda ganti dengan kata yang sesuai dengan misi blog anda sendiri.
Link warna biru dapat dengan anda ganti dengan link sumber blog anda sendiri.

Contoh tampilan jadi:

• Home
• Perihal
• Source

Begitulah semuanya. Sekali lagi hanya HTML CSS.