Pages

Cara menambah kolom Footer pada Blog

Pada beberapa template blog, memang ada yang mempunyai design layout yang bagus, namun tidak mempunyai footer. Untuk itu, mari kita tambah footer nya ... (Jangan lupa, back up dulu template sobat, buat jaga-jaga bila ada error ...)
  • Login ke blog. Dari Dashboard >>Design >> Edit HTML
  • Cari kode : ]]>
  • Paste kode CSS berikut tepatSEBELUM kode ]]>
/*----- CSS Footer Start -----*/
#rdtfooter { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px;}
#rdtfooter-wrapper { margin:auto;width: 860px; border:0; }
#rdtfooterbar-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width:23%;color:#333; font: 12px Trebuchet MS, verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.rdtfooterbar {margin: 0; padding: 0;}
.rdtfooterbar .widget {margin: 0; padding: 10px 0px 0px 0px;}
.rdtfooterbar h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:normal; font: bold 12px Trebuchet MS, Arial, Tahoma, Verdana;
}
.rdtfooterbar ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.rdtfooterbar li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.rdtfooterbar li a { text-decoration:none; color: #333; }
.rdtfooterbar li a:hover { text-decoration:none; color:#000;}
.rdtfooterbar li:hover { display:block;}
/*----- End CSS Footer -----*/
  • Lanjut ..., cari kode :
  • Paste kode di bawah, SEBELUM kode

<!-- Footer Script Start -->
<div id='rdtfooter'>
<div id='rdtfooter-wrapper'>
<div id='rdtfooterbar-wrapper'>
<b:section class='rdtfooterbar' id='rdtfooterbar1' preferred='yes'>
</b:section>
</div>
<div id='rdtfooterbar-wrapper'>
<b:section class='rdtfooterbar' id='rdtfooterbar2' preferred='yes'>
</b:section>
</div>
<div id='rdtfooterbar-wrapper'>
<b:section class='rdtfooterbar' id='rdtfooterbar3' preferred='yes'>
</b:section>
</div>
<div id='rdtfooterbar-wrapper'>
<b:section class='rdtfooterbar' id='rdtfooterbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- Footer Script End -->

  • Notes : Sobat bisa juga paste kodenya di atas kode

Sobat bisa juga merubah nilai nilai dari lebar(width). Sesuaikan dengan template sobat. Untuk membuat nya menjadi 3 kolom, ubah nilai prosentase (pada kode CSS, yang berwarna merah) misaldengan 33%. Lalu, hapus script yang saya beri warna merah.

  • Jangan lupa, Preview dulu, baru kemudian Save/Simpan template sobat.
Silahkan bereksperimen .. Good Luck ..!

No comments:

Post a Comment