Cara Membuat 5 Kolom Layout Di Footer Blog

Unknown

Trik Blog

3 Okt 2013

Belum ada komentar

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. 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'> atau jika sekarang cari kode </body> dan letakan kode di bawah ini tepat di atasnya.








<!-- 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