Cara Menambah 4 Kolom Footer di Blog

Kali ini, saya akan bahas mengenai bagaimana cara menambah kolom Footer. 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 : ]]></b:skin> 
• Paste kode CSS berikut tepat SEBELUM kode ]]></b:skin>

/*----- CSS Footer Start -----*/
#rdtfooter {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#000;
}
#rdtfooter-wrapper {
background:#000;
margin:auto;
border:1;
}
#rdtfooter-wrapper {
background:#000;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
color:#ddd;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.rdtfooterbar {margin: 0; padding: 0;}
.rdtfooterbar .widget {margin: 0; padding-top: 10px;}
.rdtfooterbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: center;
border:1; style:none;
color:#ccc;
text-transform:normal;
font: bold 18px Georgia, Arial, Tahoma, Verdana;
}
.rdtfooter ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.rdtfooterbar li {
display:block;
color:#444;
line-height: 1.6em;
margin-left: 0 !important;
padding: 4px;
border-bottom: 0px;
border-top: 1px solid #444;
list-style-type: none;
}
.rdtfooterbar li a {
text-decoration:none; color: #eee;
}
.rdtfooterbar li a:hover {
text-decoration:none;
}
.rdtfooter li:hover {
display:block;
}
/*----- End CSS Footer -----*/

• Lanjut ..., cari kode : <div id='credits'>

• Paste kode di bawah, SEBELUM kode <div id='credits'>

<!-- Footer Script Start -->
<div id='rdtfooter'>
<div id='rdtfooter-wrapper'>

<div id='rdtfooterbar-wrapper'>
<b:section class='rdtfooterbar' id='rdtfooterbar1' preferred='yes'>
<b:widget id='HTML' locked='false' title='Kolom' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Komentar' type='Feed'/>
</b:section>
</div>

<div id='rdtfooterbar-wrapper'>
<b:section class='lowerbar' id='rdtfooterbar2' preferred='yes'>
<b:widget id='HTML11' locked='false' title='' type='HTML'/>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='rdtfooterbar-wrapper'>
<b:section class='lowerbar' id='rdtfooterbar3' preferred='yes'>
<b:widget id='BlogList1' locked='false' title='Link Partner' type='BlogList'/>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='rdtfooterbar-wrapper'>
<b:section class='lowerbar' id='rdtfooterbar4' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Site Info' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>
<!-- Footer Script End -->

Notes : Sobat bisa juga paste kodenya di atas kode </body>

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) misal dengan 33%. Lalu, hapus script yang saya beri warna merah.

- See more at: http://www.masasha.net/2012/03/cara-menambah-4-kolom-footer-di-blog.html#sthash.1rvZZDVC.dpuf

Sumber: http://www.masasha.net/2012/03/cara-menambah-4-kolom-footer-di-blog.html