Membuat Multi Kolom Footer Blogger Template

proBlogiz

---

Jika saat ini Anda menggunakan Blogger Template, dan berniat untuk menambah kolom widget khususnya kolom footer. Maka janganlah  bergegas untuk mengganti template blogger yang sekarang Anda pakai dengan template baru, karena selain menghabiskan banyak waktu Anda, juga Anda harus memulainya semua kembali dari awal, terutama menyesuaikan blog dengan template baru itu.

Oleh karena itu, saya kali ini membagi tutorial tentang cara menambah atau membuat multi kolom footer pada blogger template.  Membuat Multi Kolom Footer maksudnya adalah menambah elemet atau kolom widget  dibagian paling bawah template, sehingga Anda lebih leluasa memasang lebih banyak lagi widget untuk keperluan blog Anda.

Dengan mengikuti panduannya dibawah, Anda akan dapat dengan mudah menambah kolom footer widget sesuka hati Anda, 3 kolom footer, 4 kolom footer, 5 kolom footer atau mungkin lebih. Namun perlu diketahui standard bagi multi kolom footer di blogger template 4 sampai 5 kolom footer, lebih dari itu blog akan kelihatan aneh.

DEMO Multi Kolom Footer

Note: 

Sebelum memulai ada baiknya cek dahulu css template Anda khususnya pada #outer-wrapper{ width : ?; } jika memakainya, sesuaikan dengan lebar footer. Dan juga hapus semua css  #footer-wrapper bawaan karena diganti dengan css baru dibawah ini #lower-wrapper { }.  

Jika misalnya  #outer-wrapper{width : 850px; } , maka buat #lower-wrapper {width : 850px;} atau kurangi ukuran #lowerbar-wrapper {width : 20%;}, intinya disesuaikan saja.

Jangan lupa hapus juga kode <div id='footer-wrapper'>.... </div> ganti dengan kode HTML yang baru dibawah.

Ini untuk mempermudah kalau Anda bingung, carilah kode-kode yang saya sebutkan ini dengan Control+F di template Anda

Langkah Membuat Multi Kolom Footer Blogger Template

Pertama kita akan menambahkan kode CSS untuk template blogger Anda dan kemudian juga kode HTML.

Masuk Blogger > Template > Edit HTML

Backup Template > Unduh Template Lengkap

Tekan Control+ F > cari kode ]]></b:skin>

Copy kode CSS berikut dan letakkan tepat diatas kode ]]></b:skin>

/*----- MULTI COLUMN FOOTER WIDGET -----*/
#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
background:#333333; 
} 
#lower-wrapper { 
background:#333333; 
margin:auto; 
padding: 20px 0px 20px 0px; 
width: 960px; 
border:0; 
} 
#lowerbar-wrapper { 
background:#333333; 
float: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 23%; 
text-align: justify; 
color:#ddd; 
font: bold 12px Arial, Tahoma, Verdana; 
line-height: 1.6em; 
word-wrap: break-word; 
overflow: hidden; 
} 
.lowerbar {margin: 0; padding: 0;} 
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
.lowerbar h2 { 
margin: 0px 0px 10px 0px; 
padding: 3px 0px 3px 0px; 
text-align: left; 
border:0; 
color:#ddd; 
text-transform:uppercase; 
font: bold 14px Arial, Tahoma, Verdana; 
} 
.lowerbar ul { 
color:#fff; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
} 
.lowerbar li { 
display:block; 
color:#fff; 
line-height: 1.6em; 
margin-left: 0 !important; 
padding: 6px; 
border-bottom: 1px solid #222; 
border-top: 1px solid #444; 
list-style-type: none; 
} 
.lowerbar li a { 
text-decoration:none; color: #DBDBDB; 
} 
.lowerbar li a:hover { 
text-decoration:underline; 
} 
.lowerbar li:hover { 
display:block; 
background: #222; 
}

Kemudian cari kode </body> dan letakkan kode HTML berikut diatasnya.

<div id='lower'> 
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section> 
</div>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section> 
</div>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section> 
</div>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 
</b:section> 
</div>

<div style='clear: both;'/> 
</div> </div>

Save Template dan Selesai!!

Sekarang coba Anda lihat di Tata Letak atau Page Element  kolom widget akan  terlihat seperti gambar dibawah ini.

Seperti yang Anda lihat ada total empat kolom secara default dan Anda dapat menambahkan kolom widget sebanyak yang Anda ingin. Jika Anda ingin menambah atau mengurangi jumlah kolom vertikal ikuti langkah-langkah di bawah ini.

Mengurangi atau Menambah Kolom Footer Widget

Untuk warna dan ukuran keseluruhan serta padding dan margining sudah sempurna. Satu-satunya hal yang Anda perlukan untuk menyesuaikan  dengan template Anda adalah lebar widget dan jumlah kolom vertikal.

Untuk mengurangi atau menambah lebar keseluruhan widget, yang perlu Anda lakukan yaitu mengubah width: 960px;

Jika Anda ingin mengurangi jumlah kolom widget menjadi tiga kolom maka cukup menghapus bagian kode ini :

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 
</b:section> 
</div>

Atau jika Anda ingin menambahkan kolom lagi, dengan menambahkan kode di bawah ini tepat di atas <div style='clear: both;'/>

<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar#' preferred='yes'> 
</b:section> 
</div>

note :

lowerbar # adalah pada jumlah kolom. Jadi jika Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar # dengan lowerbar5.

setelah Anda  menambahkan kolom kelima kemudian ingat untuk mengubah width: 23%; menjadi width: 17%;

Selamat menikmati Multi Kolom Footer Blogger Template baru Anda !!!

Good Luck!!