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

KATEGORI


HIBURAN


  • RCTI












  • VIDEO

    Iklan Semua Halaman

    cara buat 5 kolom layout di footer blogger

    Monday, 27 February 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.