cara buat 5 kolom layout di footer blogger cara buat 5 kolom layout di footer blogger - mizipediacom mizipediacom: cara buat 5 kolom layout di footer blogger










KATEGORI

LIVE TV

Iklan Semua Halaman

cara buat 5 kolom layout di footer blogger

Senin, 27 Februari 2017



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.
Lihat Juga