Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz


Multi Kolom Footer Blogger Template

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.


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.

4 Kolom Footer


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!!

Artikel Terkait Lainnya:
Click here for comments

14 komentar

Salam Kenal, gan. ANe Marlon Alamo onlineprivates[dot]blogspot.
Newbie Blogger, Subscriber Baru blog agan. Ikut nyimak dan belajar. Mohon pancerahannya. Izin ngopi ya gan. Terimakasih
Lam Kenal. GBU.

REPLY

Thanks gan. Ini juga lagi ane cari2. Daripada gabung widget.
Dah saya coba, tapi jadinya 4 Baris, Satu(1) Kolom gan. Kalu mau jadi 4 Baris,4Kolom gimana gan?
Terimakasih

REPLY

mungkin Anda memasang kode "</div>" dibawah "<div style='clear: both;'/>" seharusnya diatas, setelah saya lihat blognya, ente sepertinya menempatkan widget2 (hi-stats, profile) disatu tempat aja di "id='lowerbar4'", jadi yang muncul cuma satu kolom

REPLY

ga berhasil, di template saya, gak bersisian, tapi kayak drop-down, kalo maunya berjejer gimana?

REPLY

itu terjadi mungkin karena sudah css footer bawaan template Anda, yg kurang width 960px;, coba dicek atau kurangi width 23% menjadi 20%

REPLY

nb: cek kalau pake #outer-wrapper buat width: 960px;, hapus #footer wrapper karena sudah pake #lower wrapper yg diatas

REPLY

gag mau bro
udah semuanya saya ikuti
knapa ini?
gag mau isi banyak footer blog saya

REPLY

mantap bro langsung saya coba nih

REPLY

Tutorial yang sangat bermanfaat.. salam kenal.

REPLY

jangan lupa kunjungi balik
http://aromaessen.com

REPLY

Min, hasilnya memanjang kebawah, itu kenapa ya?

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|