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

Sunday, September 22, 2013

cara membuat 4 kolom layout di atas postingan blog

Kolom layout atau gadget merupakan tempat berbagai widget blog, cara membuat 4 kolom layout di atas main blog merupakan suatu trik jitu buat para bloger mania yang memiliki fitur atau aplikasi yang bayak yang akan ditempatkan dihalaman blognya. 4 kolom layout diatas main blog postingan dapat anda manfaatkan untuk berbagai fitur agar tampilan halaman blog anda menjadi lebih rapi dan elegan bila mana widget yang anda pasang tersusun rapi, an memiliki banyak aplikasi untuk menukung halaman blog ataupun artikel yang telah anda posting. Oke langsung saja menuju TKP , lihat screen shotnya pada gambar dibawah ini sekalian simak cara memasangnya.


4 kolom layout

Referensi Artikel


  • Cara membuat 2 kolom layout dibawah postingan blog
  • 5 kolom layout di footer halaman blog
  • Membuat 4 kolom layout di footer halaman blog
  • cara membuat 2 kolom layout di sidebar blog


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 atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

  5. /*****************************************
    Name : 4 Kolom layout diatas main blog
    By : Rivai Silaban | Blog Design
    Update : Minggu, 22 September 2013
    ******************************************/
    #BDRSLAYOUT-MAINKOLOM {
    width: 99%;/* Lebar */
    margin:0;
    padding: 0;
    text-align: center;
    }
    #BDRSLAYOUT-MAINKOLOM .BDKOLOM{
    width:140px; /* Lebar Kolom */
    height:auto;
    margin:3px ;
    text-align: center;
    padding:2px 5px;
    line-height: normal;
    }/* End CSS 4 kolom layout */



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

    Pada umumnya kode <div class='main-wrapper'> biasanya ada pada template HTML/XML blog tapi ada beberapa blog mungkin tidak memiliki kode persis seperti kode <div class='main-wrapper'>.

    Tapi anda tidak perlu kawatir tentang kode <div class='main-wrapper'>, bila di template blog anda tidak sama persis dengan kode tersebut cari saja kode yang sejenis yang penting letak 4 kolom layout ini diatas kode postingan halaman blog ( Widget Blog 1 ).


  8. Cari code <div class='main-wrapper'> setelah ketemu copy kode dibawah ini dan pastekan tepat dibawah kode <div class='main-wrapper'>.

  9. <!-- BDRS layout 4 kolom Start -->
    <div id='BDRSLAYOUT-MAINKOLOM'>
    <!-- BDRS layout 1 -->
    <div id='box1' style='width:140px;float:left;margin:3px 5px; '>
    <b:section class='BDKOLOM' id='main-column-1' preferred='yes'>
    <b:widget id='HTML71' locked='false' title='Kolom 1' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS 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>
    <!-- BDRS layout 2 -->
    <div id='box2' style='width:140px;float:left;margin:3px 5px;'>
    <b:section class='BDKOLOM' id='main-column-2' preferred='yes'>
    <b:widget id='HTML72' locked='false' title='Kolom 2' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS 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>
    <!-- BDRS layout 3 -->
    <div id='box3' style='width:140px;float:left;margin:3px 5px;'>
    <b:section class='BDKOLOM' id='main-column-3' preferred='yes'>
    <b:widget id='HTML73' locked='false' title='Kolom 3' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS 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>
    <!-- BDRS layout 4 -->
    <div id='box4' style='width:140px;float:left;margin:3px 5px;'>
    <b:section class='BDKOLOM' id='main-column-4' preferred='yes'>
    <b:widget id='HTML74' locked='false' title='Kolom 4' type='HTML'>
    <b:includable id='main'>
    <!-- BDRS 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>
    <!-- BDRS layout 4 kolom end -->


  10. Save template anda, dan lihat hasilnya

Kesimpulan

4 kolom layout diatas Main blog atau diatas halaman postingan blog, dapat anda manfaatkan untuk berbagai keperluan widget blog atau tempat berbagai aplikasi untuk mendukung fasilitas halaman blog anda.

Bila anda mengalami kesulitan dalam memasang kodenya di halaman blog anda atau ada kode yang error silahkan hubungi saya atau share bersama saya melalui form Comment dibawah.

4 Kolom layout diatas postingan blog
Minggu, 22 September 2013
Rivai Silaban | Blog Design

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 : 9:53 AM

2 comments :

  1. Salam.
    Perkenalkan nama saya Widi.
    Asli Jatim, besar di Jogja. Saya mulai belajar ngeblog baru-baru ini alias Newbie.

    Isi dari blog mas sungguh bagus.
    Tapi perkenankan saya tau bagaimana mas belajar ttg script, html, dll?
    bisa email saya di widyandaresta@gmail.com

    ReplyDelete
    Replies
    1. salam kenal juga mas..
      thx atas pertanyaannya..
      mari sama sama belajar mas, saya juga masih sebatas debu di dunia internet ini.. sama kok

      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