cara membuat 5 kolom layout di footer blog

Membuat 5 kolom layout dibawah halaman blog atau yang biasa disebut dengan footer akan memberi ruang yang cukup untuk menempatkan berbagai widget untuk keperluan halaman blog. Semakin banyaknya kolom layout pada halaman blog akan menjadikan kita lebih bebas untuk berkreasi dan mendesign halaman blog menjadi lebih bagus. Dalam menempatkan widget akan terlihat lebihrapi dan tertata, hal ini lah yang menjadi pertimbangan oleh para bloger untuk memakai kolom layout yang begitu banyak. Anda bisa lihat dibawah halaman BLOG DESIGN ini ( pertanggal 10/8/2013 ) atau lihat demonya KLIK DISINI. Untuk mewujudkan hal tersebut silahkan simak penjelasan dibawah ini , dan langsung saja menuju TKP.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi


/*****************************************
Name : Widget Footer 5 kolom
By : Blog Design
Update : 10/08/2013
******************************************/
.BD-kolombawah {
padding : 10px 5px 5px 5px;
margin : 0 5px 0 0;
color : #666;
line-height : 1.5em;
font-size : 11px;
}
.BD-kolombawah .widget ul li {
height : 5px;
margin : 0 0 0 -10px;
padding-left : 0px;
line-height : 0.7em;
color: #999;
list-style-type: none;
text-decoration: none;
}
.BD-kolombawah-title{
color : #CCFF00;padding-bottom:5px;
line-height : 1.5em;
font-size : 12px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: uppercase;
border-bottom: solid #999999 1px;
font-weight: 500;
}
.BD-kolombawah ul li:hover {
height : 5px;
padding-left : 26px;color: #fff;
line-height : 0.7em;
}
.BD-kolombawah .widget {
margin : 0 0 0.5em;
padding : 0 0 1em;
color: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
}
/***** Blog Design CSS footer and *****/




5. Setelah anda selesai memasang code CSSnya saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing.
6. Cari code <div id='footer-wrapper'> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <div id='footer-wrapper'>


<!-- BLOG DESIGN widget footer start -->
<div id='BD-kolombawah-container'>
<div id='footer1' style='width: 170px; float: left; margin:0 5px 0 5px; '>
<b:section class='BD-kolombawah' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='HTML50' locked='false' title='footer 1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h3 class='BD-kolombawah-title'>
<data:title/>
</h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='footer2' style='width: 170px; float: left; margin:0 5px 0 5px; '>
<b:section class='BD-kolombawah' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='HTML51' locked='false' title='footer 2' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h3 class='BD-kolombawah-title'>
<data:title/>
</h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='footer3' style='width: 200px; float: left; margin:0 5px 0 5px; '>
<b:section class='BD-kolombawah' id='footer-column-3' preferred='yes' style='float:left;'>
<b:widget id='HTML52' locked='false' title='footer 3' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h3 class='BD-kolombawah-title'>
<data:title/>
</h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='footer4' style='width: 200px; float: right; margin:0 5px 0 5px; '>
<b:section class='BD-kolombawah' id='footer-column-5' preferred='yes' style='float:left;'>
<b:widget id='HTML53' locked='false' title='footer 5' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h3 class='BD-kolombawah-title'>
<data:title/>
</h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='footer5' style='width: 170px; float: right; margin:0 5px 0 5px; '>
<b:section class='BD-kolombawah' id='footer-column-4' preferred='yes' style='float:left;'>
<b:widget id='HTML54' locked='false' title='footer 4' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h3 class='BD-kolombawah-title'>
<data:title/>
</h3 >
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<!-- BLOG DESIGN widget footer and -->



7. Save template anda, dan lihat hasilnya

Kesimpulan

Semakin banyaknya kolom layout pada halaman blog akan memberikan keleluasaan untuk memasang berbagai widget yang diperlukan oleh halaman blog dan menjadikan tampilan halaman blog tersebut semakin lebih rapi dengan penataan widget pada halaman blog. Pemasangan 5 kolom layout di bawah halaman atau yang biasa disebut dengan footer halaman menjadikan tampilan halaman blog terlihat cantik dan berkesan elegan bila pemasangan widget pada halaman blog dapat disesuaikan dengan thems halaman blog.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 8:31 PM