Join The Community

Premium WordPress Themes

Sabtu, 09 April 2011

Cara Menambah 3 Kolom Dibagian Footer

Elemen halaman Footer terkadang masih jarang yang memanfaatkannya. Tapi ini juga cukup bagus untuk menambah kolom Gadget pada Laman Blog kita. Apalagi yang senang memasukan berbagai macam widget, saya rasa ini sangat diperlukan.... Nah, kalau ada teman-teman yang tertarik untuk memanfaatkan Elemen 3 kolim ini, silahkan ikuti petunjuk dibawah ini :

  • Login ke Blogger
  • Klik Tab Tata Letak/Layout
  • Edit HTML --> Expand Template Widget
  • Cari kode ]]></b:skin>  dengna menggunakan Ctrl+F
  • Copy code dibawah ini tepat diatas kode ]]></b:skin>
/* bottom
---------------------------- */ #bottom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom { /* yang ini nih kode kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom { /* kalo yg ini kode kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom { /* kalo yg ini kode kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
  • Lihat bagian </body> yaitu pada bagian bawah kode template, cari kode yang mirip dengan kode berikut : 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div> 
  • Copy paste kode berikut tepat diatas kode diatas 
<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>
  • Simpan Template. Terakhir, cek pada bagian Edit Laman untuk memastikan yang dilakukan telah berhasil....
Semoga bermanfaat...!!!


0 komentar:

Posting Komentar