cara membuat 4 kolom layout di footer blog

cara membuat 4 kolom layout di footer blog
Membuat 4 kolom layout dibawah halaman atau footer blog berguna untuk pemasangan berbagai widget pada halaman blog. Semakin banyak kolom layout yang kita milii akan mempermudah untuk memasang berbagai widget baik itu berupa iklan adsense, aplikasi dan lain lain. Cara membuat 4 kolom layout dibawah halaman blog masih dapat dikatakan suatu pekerjaan yang tidak begitu berat sebab hanya memerlukan sedikit polesan baik itu pada CSS dan htmlnya. Oke daripada panjang lebar penjelasannya dan paling parahnya jadi bikin bingung langsung saja genk kita menuju TKP, simak tutorial yang ada dibawah ini. Untuk melihat DEMOnya silahkan kunjungi link dibawah ini :


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

 TUTUP CODE
#BD-kolombawah-container { border-top: 4px solid #990000;background-color: #2A2A2A;border-bottom: solid #999 3px;} .BD-kolombawah { padding:10px 5px 5px 5px;margin: 0 5px 0 0;
color: #D6D6D6; line-height: 1.5em; font-size:11px;}.BD-kolombawah h2, h3, h4 {
padding-bottom:10px; text-align:center;margin-bottom:10px;
font:&quot;normal normal 80% &#39;Comic Sans MS&#39;,&#39;Lucida Sans Unicode&#39;,&#39;Trebuchet MS&#39;,Sans-serif&quot;;
color:#FFFF00;
line-height:1em; letter-spacing:.1em;
border-bottom: 2px dotted #666666;}.BD-kolombawah ul { list-style-type: none; margin:-10px -10px 0 0; padding:0 0 0;} .BD-kolombawah ul li {

background: url(https://lh6.googleusercontent.com/-ILuElHTkZ0c/Ufo-O4UcO0I/AAAAAAAABp4/gJ-r5EPzs5A/h120/slider+pagination.png) no-repeat 0 0px;widht:5px; height:5px;
margin:0 0 0; padding-left:26px; line-height:0.7em;}
.footer-column ul li:hover {
background: url(https://lh6.googleusercontent.com/-ILuElHTkZ0c/Ufo-O4UcO0I/AAAAAAAABp4/gJ-r5EPzs5A/h120/slider+pagination.png) no-repeat 0 -16px;widht:5px; height:5px;
margin:0 0 0; padding-left:26px;
line-height:0.7em;}.BD-kolombawah .widget {margin:0 0 .5em; padding:0 0 1em;}


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

<div id='BD-kolombawah-container'>
<div id='footer1' style='width: 225px; float: left; margin:0 -5px 0 5px; '>
<b:section class='BD-kolombawah' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='footer 1' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div></b:includable>
</b:widget>
</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0 -18px 0 18px; '>
<b:section class='BD-kolombawah' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='footer 2' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div></b:includable>
</b:widget>
</b:section>
</div>
<div id='footer3' style='width: 225px; float: right; margin:0 5px 0 -5px; '>
<b:section class='BD-kolombawah' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Footer 4' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div></b:includable>
</b:widget>
</b:section>
</div>
<div id='footer4' style='width: 225px; float: right; margin:0 18px 0 -18px; '>
<b:section class='BD-kolombawah' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='footer 3' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div></b:includable>
</b:widget>
</b:section>
</div>
<div style='clear:both;'/>
</div>