Cara Membuat Footer 3 Kolom Dengan Background

Cara Membuat Footer 3 Kolom Dengan Background - Nah sekarang akan saya share bagaimana Cara Membuat Footer 3 Kolom Dengan Background 




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  :

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(http://4.bp.blogspot.com/_C6KkooKXCEw/TICgrtGXyRI/AAAAAAAAGzU/enOVeXD63p0/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 selesai sudah semoga sukses salam blogger

Post a Comment

W a r n i n g !
Komentar anda tidak boleh mengandung unsur:
- Penghinaan atau Pelecehan.
- Spamming (Spam Comment).
- Link Aktif atau Anchor Text, dan sejenisnya.

Komentar akan muncul setelah di setujui.
Tulislah setiap kata dengan penuh kesopanan.

Terima kasih untuk kunjungannya.