Cara Membuat Footer 3 Kolom Dengan Background

Nah sekarang akan saya share bagaimana Cara Membuat Footer 3 Kolom Dengan Background seperti blog saya ini.

Cara Membuat Footer 3 Kolom Dengan Background ini akan membantu sahabat yang mempunyai sidebar yang terlalu penuh, untuk meng-antisipasinya maka silahkan sahabat untuk menambahkan kolom pada footer. Dan ini akan membantu tingkat loading pada blog sahabat, karena widget yang ditaro si samping blog, dengan widget yang ditaro pada bagian footer tentu akan berbeda tingkat loadingnya.

Nah apabila sahabat tertarik untuk membuatnya, dibawah ini Cara Membuat Footer 3 Kolom Dengan Background seperti blog milik kami :

1. Seperti biasa sahabat harus login terlebih dahulu ke Blogger

2. Lalu Pilih Rancangan

3. Setelah ini Edit HTML

4. Jangan lupa untuk Centang pada Expand Widget

5. Selanjutnya silahkan sahabat cari kode ]]></b:skin>

6. Copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVGxZggi7OJ-Q_eYnfH2NWGG95oDl5uG_p6aWjP4ouMK777fZgxzSunHHJSr9MncuOwp3Sz3GPuOsgZ4dcfYtW8tMiJX4DbInDQxT8RhBMF_eySANsPSdWyn-yZGiiuawzU6uTr8i-ycKj/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}

7. Sesuaikan lebar kolom dengan blog sahabat dengan mengganti angka yang berwarna Biru

8. Selanjutnya cari lagi kode yang mirip dengan kode

end content-wrapper 

atau 

</div> <!-- end content-wrapper-->

9. Copy kode dibawah ini dan pastekan tepat diatas kode tadi

<div id='bottom'>

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

<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>

</div>

10. Simpan Template dan lihatlah hasilnya

Demikian Cara Membuat Footer 3 Kolom Dengan Background seperti blog saya semoga bermanfaat. Untuk saran dan kritiknya silahkan poskan pada kotak komentar. Terimakasih