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

Wednesday, May 8, 2013

Cara membuat 2 kolom gadget di sidebar blogspot

Element gadget sangat diperlukan disuatu perancangan blog khususnya pada blogspot., cara membuat 2 kolom disidebar blogspot merupakan suatu trik untuk memasang 2 widget berdampingan disidebar blog. Element gadget ini berguna untuk keperluan menempatkan berbagai aplikasi ataupun kode kode script dan code code HTML agar blog kita sempurna dan banyak fasilitas dan membuat para pengunjung blog kita merasa betah berlama lama di blog kita sekaligus memperindah tampilan pada blog kita. Dalam postingan kali ini saya akan menerangkan dan memberikan suatu script untuk membuat element 2 kolom gadget di sidebat atau disamping halaman blog kita. Oke daripada ceramah panjang lebar dan ngak jadi jadi langsung aja ke TKP.


2 kolom layout di sidebar

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

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 : 2 Kolom layout di sidebar blog
    By : Rivai Silaban | Blog Design
    Update : 08 Mei 2013
    ******************************************/
    #kolom_sidebar {
    clear:both;
    }
    .box_Kolom {
    padding:0px 10px 10px 10px;
    border:1px dotted $bordercolor;
    }/* 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. Pada tahap selanjutnya cari kode <div id='sidebar-wrapper'> setelah ketemu atau terkadang templatenya tidak sama codenya , paling tidak hampir sama berada disamping halaman, untuk memudahkan lihat layout blog anda berada disamping kiri atau kanan. Untuk penempatan dibawah <div id='sidebar-wrapper'> atau diatas letakkan code script yang dibawah ini berada di bawah code <div id='main-wrapper'>.

  8. <!-- BDRS layout 2 kolom tart -->
    <div id='kolom_sidebar'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box_Kolom' id='Rivai blog 1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
    <b:section class='box_Kolom' id='Rivai blog 2' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div> <!-- BDRS layout 2 kolom end -->


  9. Save template anda, dan lihat hasilnya

Kesimpulan

Cara membuat 2 kolom layout di siebar halaman blog ini sangat cocok buat para bloger mania yang menginginkan atau memasang 2 widget berdampingan dalam sidebar blog.

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.

2 Kolom layout disidebar halaman blog
08 Mei 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 : 12:16 AM

12 comments :

  1. Nice info gan, saya coba dulu yah.

    ReplyDelete
  2. berhasil work.. thx infonya gan
    jgn lupa b'kunjung http://idegemilang.blogspot.com/

    ReplyDelete
  3. @Gia Achmad
    Sama sama gan... makasih atas kunjungannya sob.

    ReplyDelete
  4. artikelnya sudah saya praktekin sekarang sidebarnya udah 2 di pojok atas kanan terima kasih tutornya... salam kenal kunjung balik di blog saya http://xmisteri.blogspot.com

    ReplyDelete
  5. @Anak Bugis..
    Oke silahkan sob.. salam kenal juga...
    makasih atas kunjungannya

    ReplyDelete
  6. Replies
    1. sama sama sob..
      silahkan sob..
      salam blogger

      Delete
  7. Kode sidebar-wrapper nya ada banyak gan, pilih yang mana??

    ReplyDelete
    Replies
    1. memang terkadang penulisannya tidak seperti itu, itu tergantung templatenya , tapi setidaknya coba dicari code yang bersangkutan dengan code sidebar blog agan... nah tempatkan saja di sana itu sama kok yang penting di sidebar gan...

      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