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

Thursday, August 1, 2013

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

  5. #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;}



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


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

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 9:59 PM

15 comments :

  1. Ini dia yang ane cari, terimakasih gan atas responnya. ane coba dulu ya. sukses selalu.

    ReplyDelete
    Replies
    1. sama sama sob silahkan dan makasi juga atas kunjungannya.. salam dari saya.

      Delete
  2. ok.thanks gan kereen ...ane coba berhasil.......salam sukses

    ReplyDelete
    Replies
    1. sama sama sob.
      salam kenal dari saya
      thx your visit

      Delete
  3. Replies
    1. sama sama sob,
      makasih atas pendapatnya dan kunjungannya..
      salam kenal..

      Delete
  4. Terimakasih Gan Infonya . Bila Berkenan Bisa datang Ke Blog Sederhana Saya :D

    ReplyDelete
    Replies
    1. thx atas pendapatnya dan kunjungannya,
      heheh iya nih yang saya bingungkan alamat blognya apa ya mau niat berkunjung ehh alamat lupa bawanya heheheh

      Delete
  5. kak punya saya kok gak muncul ya, punya saya tak bagi 3 kolom hanya kolom pertama yang muncul, kolom 2 dan 3 tidak muncul, trus yang dibawahnya footer ada kolom copyrigh juga tidak mucul, mohon pencerahannya kak :'( thanks sebelumnya....

    ini blog saya : http://wahyu-iwe.blogspot.com

    tolong kak...

    ReplyDelete
  6. coba di perhatikan codenya mungkin ada yang kurang, atau coba pasng dulu 4 kolo nanti kurangi satu bila sudah muncul...

    untuk share lebih leluasa silahkan kunjungi http://diskusi.rivai.org/
    saya akan membantu..

    ReplyDelete
  7. work gan thanks ya, kunbal tikiin.blogspot.com

    ReplyDelete
  8. luar biasa min tipsnya simple n manjur tanks buaaaaaaaaaaaaaaaaaaaaanyak min

    ReplyDelete
  9. Thanks....visit me in http://limasagung.blogspot.com

    ReplyDelete
  10. ini yang akan saya terapkan ke blog saya..moga-moga berhasil... terimakasih..

    ReplyDelete
  11. tutorial yg bagus dipasang langsung pas makasih ya Gan tlng kunjungi balik ya =>>> www.softwcomp.blogspot.com

    ReplyDelete

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