Cara Membuat Widget Gadget Baru 3 Kolom Footer

Hanya sharing info tentang Ilmu Ngeblog ketika saya pengen banget menambahkan beberapa widget yg berformatkan HTML/Javascript/widget lainya, tapi sepertinya sangat tidak menarik kalau semuanya di letakan di sidebar dan menumpuk jadi tampak sesak/sempit dan kurang indah. Akhirnya saya coba tambahkan 3 kolom widget di bagian bawah, selain mengurangi kepadatan sidebar widget ini juga bisa menambah cantik tampilan dan tampak longgar.

Bagi sobat yg ingin mencoba menambahkan 3 kolom widget footer di blog anda seperti tampak pada footer page blog ini. Awalnya juga sama tidak ada widget/gadget yg bisa untuk disisipkan format HTML/Javascript/widget lainya.

Sekarang kita akan menambahkan beberapa kolom Blogger Footer kita. Jika anda menggunakan salah satu template default Blogger, anda telah memperhatikan bahwa di bagian Footer Page blog anda, dan anda hanya memiliki horizontal Tambah Gadget unsur yang memiliki lebar yang sama seperti di Blog.




Kita bisa berbuat lebih baik. Mari kita mulai dengan menambahkan 3 kolom di footer, dan tempat default di bagian bawah.

Keuntungannya adalah:
► Anda dapat menempatkan lebih banyak widget (gadget)
► Mengubah tampilan sesuai yang anda inginkan
► kawasan konten utama anda akan memuat lebih cepat jika anda menempatkan "yg terbesar" di bagian bawah widget

Ok, mari kita lakukan ini. Kali ini, anda hanya perlu Copy-Paste. Hanya membutuhkan waktu 2 menit mngerjakannya. Sebelum anda mulai, lakukan back up template untuk menjaga apabila terjadi kegagalan.

1. Jika anda sudah memiliki beberapa widget (gadget) di Footer, harap dihapus terlebih dulu.
Cara menghapusnya:
Login ke Blogger ► LAYOUT ► Page Element ► Periksa apakah anda memiliki gadget di footer ► Jika anda menemukannya, klik Edit dan ► Hapus

2. Selanjutnya buka LAYOUT ► EDIT HTML dan cari bagian kode berikut:

]]></b:skin>
</head>

Setelah ketemu letakan kode di bawah ini tepat diatas kode warna hijau

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

Itu adalah CSS style untuk bagian Footer baru. Kita akan berbicara tentang kustomisasi (warna, perbatasan, latar belakang, judul ...) di Ilmu Ngeblog lain.

3. Sekarang, untuk menambahkan beberapa konten. Cari kode ini:

<b:section class='footer' id='footer'/>

Anda HAPUS kode diatas yg warna orange, dan GANTI dengan kode ini:

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

Simpan template.

Pada dasarnya, itu saja. Ini bekerja untuk Template dengan lebar yang berbeda, karena kolom fluida (dibuat untuk meregangkan agar sesuai dengan footer-wadah lebar).
Beberapa margin penyesuaian mungkin diperlukan untuk template yang lebih luas.

Lain kali bisa sharing tentang bagian lain yang menyenangkan - kustomisasi.

Selamat mencoba dan semoga berhasil. See you....