Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, August 10, 2013

cara membuat 5 kolom layout di footer blog

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. Semakin banyaknya kolom layout pada halaman blog akan menjadikan kita lebih bebas untuk berkreasi dan mendesign halaman blog menjadi lebih bagus. Dalam menempatkan widget akan terlihat lebihrapi dan tertata, hal ini lah yang menjadi pertimbangan oleh para bloger untuk memakai kolom layout yang begitu banyak. Anda bisa lihat dibawah halaman BLOG DESIGN ini ( pertanggal 10/8/2013 ) atau lihat demonya KLIK DISINI. Untuk mewujudkan hal tersebut silahkan simak penjelasan dibawah ini , dan langsung saja menuju TKP.


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

  5. /*****************************************
    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 *****/



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

  8. <!-- 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 -->


  9. Save template anda, dan lihat hasilnya


Kesimpulan

Semakin banyaknya kolom layout pada halaman blog akan memberikan keleluasaan untuk memasang berbagai widget yang diperlukan oleh halaman blog dan menjadikan tampilan halaman blog tersebut semakin lebih rapi dengan penataan widget pada halaman blog. Pemasangan 5 kolom layout di bawah halaman atau yang biasa disebut dengan footer halaman menjadikan tampilan halaman blog terlihat cantik dan berkesan elegan bila pemasangan widget pada halaman blog dapat disesuaikan dengan thems halaman blog.

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

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 8:31 PM

8 comments :

  1. keren nih mas footernya ...
    mas mau nanya gimana cara membuat tampilan postingan sama dengan tampilan anda ketika di home page ( halaman pertama )

    kalau bisa dikirim lewat email ya mas ..

    ReplyDelete
    Replies
    1. model snipet ya, semua bagian post harus di rombak,
      oya emailnya mana sob ?

      Delete
  2. Replies
    1. saya sudah posting sekalian sob, lihat saja dipostingan hari ini.

      bila ada masalah silahkan share dengan saya.
      salam bloger...

      Delete
  3. Makasih Mas Mantap Langsung Saya Pakai di template saya.
    Oh iya mas klo pingin ada background nya gmana ya ???

    ReplyDelete
    Replies
    1. coba cari dibagian CSS footer-wrappernya, tulisan " background " bila tidak ada tambahkan kode

      background:#333;

      didalam CSS footer-wrappernya sob..

      Delete
  4. Gan untuk mencari kode footer-wrapper-nya gimna caranya ya kok saya gk pernah ketemu, mksih

    ReplyDelete
    Replies
    1. footer wapper itu adalah seasion bawah, mungkin penulisan paa kode html template mas, tidak footer-warpper, tapi coba dilihat kode yang hampir hampir mirim, kuncinya adalah kode bawah/footer halaman blog mas..

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog