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 :
http://templatefullseo.blogspot.com/

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


#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVc4lmvzr_1xzEJBgRwTI5mxkkZdDK1O9FnsRgWOKsbGzqEkJQbClAkXsUyObG7rsvvAM0bNusf8dPyyNJ7E1l6UIpHIze25UYBFoxwiOTGJe3SkLVHJlVmF88RMRItf9Vs0WA4rUct5k/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVc4lmvzr_1xzEJBgRwTI5mxkkZdDK1O9FnsRgWOKsbGzqEkJQbClAkXsUyObG7rsvvAM0bNusf8dPyyNJ7E1l6UIpHIze25UYBFoxwiOTGJe3SkLVHJlVmF88RMRItf9Vs0WA4rUct5k/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;}




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


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



7. Save template anda, dan lihat hasilnya

Kesimpulan

4 kolom layout pada footer halaman anda akan berguna untuk berbagai widget yang anda perlukan untuk bloging, selain itu hal ini akan menambah suatu desain halaman blog anda menjadi semakin menawan dan terlihat cantik dan elegan.

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 : 9:59 PM