cara buat 5 kolom layout di footer blogger




cara buat 5 kolom layout di footer blogger

cara mudah buat 5 kolom layout di footer blogger


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. 

silahkan simak penjelasan dibawah ini , dan langsung saja kita peraktekin..

cara buat 5 kolom layout di footer blogger

1. Pertama , pastikan anda sudah masuk di dasbhor andasendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Temukan kode seperti ini ]]></b:skin>
4. Anda copy code script css di bawha ini, dan kemudian anda bisa paste di atas kode ]]></b:skin>
                  CODE CSS 
/***************************************** 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'>

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

Demikian penjelasan pada hari ini, selamat mencoba dan Semoga bermanfaat untuk anda. terimakasih sudah berkunjung.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect