Cara Menambahkan Tiga Kolom Footer di Blog

Kali ini psoting saya adalah cara menmabahkan atau membuat tiga (3) kolom widget diatas footer responsive dan keren pastinya. sebelumnya basa basi dulu :)

Dalam sebuah blog terdapat kolom widget yaitu tempat memasang widget yang di perlukan sebuah blog. Kolom widget biasanya berada di samping post body (area posting), baik itu di bagian kiri mau[un bagian kanan. Kolom widget yang berada di samping post body juga bisa di sebut kolom sidebar. Selain itu juga ada kolom widget yang berada di bawah post body atau berada di bagian paling bawah blog yang biasanya di sebut kolom footer.

3 kolom widget

Sekarang saya akan memberikan cara untuk menambahkan atau membuat tiga kolom footer atau tiga kolm widget di bawah post body. Tiga kolom footer yang akan kita buat sekarang ini sudah responsive dan dijamin keren dan cocok untuk template anda yang blum memiliki tiga kolom footer. Dan bagi yang blog nya sudah punya atau sudah memiliki kolom footer silahkan ganti jika anda mau menggantinya menggunakan yang ini.

Alasan kenapa harus ada kolom footer di blog anda :

Sebenarnya bukan keharusan tetapi jika anda butuh silahkan tambahkan tiga kolom ini di blog anda
Blog kelihatan lebih profesional dengan adanya kolom footer

menurut saya blog keliatan lebih keren aja kalau ada kolom footer, jika anda memiliki pendapat yang sama dengan saya ndak perlu lama-lama lagi, langsung saja pasang di template blog anda

Membantu sidebar menampung widget anda

bukan masalah sidebar capek menampung widget sendirian ya, tetapi tidak bagus kelihatanya kalau semua widget anda taruh di kolom sidebar jika memiliki widget yang cukup banyak. Jika anda tidak memiliki banyak widget itu terserah anda.

Cocok untuk menaruh widget yang berat

widget berat berarti widget yang membutuhkan waktu yang cukup lama untuk meload widget tersebut.

Itulah empat alasan yang mungkin kurang waras haha

Untuk yang ingin menambahkan tiga kolom footer tersebut, silahkan ikuti langkah-langkah dibawah ini :

Buka Template > Edit HTML
Cari ]]></b:skin>
Tempatkan kode di bawah ini di atas ]]></b:skin>

/* BOTTOMBAR */
#bottombar {background:#444444;border-top:6px solid #e4e4e4;overflow:hidden;margin:0 auto;padding:15px;color:#dddddd;}
#bottombar .left {float:left;width:34%;}
#bottombar .center {float:left;width:34%;}
#bottombar .right {float:right;width:32%;}
#bottombar .left .widget, #bottombar .center .widget {margin:0 15px 5px 0;}
#bottombar .right .widget {margin:0 0 5px 0;}
#bottombar h2 {font:Arial; font-wight:bold;font-size:16px ;margin:0 0 10px 0;padding:6px 0;border-bottom:2px solid #ededed;text-transform:uppercase;position:relative;color:#fff;}
#bottombar h2:after {content:" ";width:90px;height:0px;position:absolute;left:0;bottom:-2px;border-bottom:2px solid #eeeeee;}
#bottombar ul, #bottombar ol {list-style-type:none;margin:0 0 0 0;padding:0 0 0 0;}
#bottombar li {margin:5px 0;padding:0 0 0 0;}
#bottombar ul li:before {color:#dddddd !important;}
#bottombar a {color:#dddddd;}
#bottombar a:hover {color:#fff;}

Untuk membuatnya responsive silahkan tempatkan CSS responsive di bawah ini di atas ]]></b:skin>

@media only screen and (max-width:640px){
#bottombar {padding:10px;}
#bottombar .left, #bottombar .center, #bottombar .right {float:none;width:100%;max-width:100%}
#bottombar .left .widget, #bottombar .center .widget, #bottombar .right .widget{margin:0 0 10px 0;}}
@media only screen and (max-width:480px){
#bottombar {padding:8px;}}