Home » » Cara Membuat Dua Kolom Sidebar

Cara Membuat Dua Kolom Sidebar

Sobat blogger pada tutorial blog kali ini aye akan membawakan cara membuat dua kolom pada sidebar. Hal ini baik untuk menempatkan beberapa widget yang berukuran kecil seperti widget alexa, atau histats. Atau untuk menempatkan beberapa banner tukeran link agar tidak makan banyak tempat
Langkah untuk membuat dua kolom pada sidebar adalah sebagai berikut
1.   Login ke blogger > Rancangan > edit HTML
2.   Cari kode #sidebar dan ingatlah berapa lebar kolom tersebut, misalnya width:300px, karena sebaiknya kita membuat du kolom yang lebarnya tetap 300px setelah di jumlahkan
3.   Tempatkan perintah CSS seperti ini di bawah #sidebar
.sidebar1 {float: left; width: 150px; margin: 0; padding: 0;}
.sidebar2 {float: right; width: 150px; margin: 0; padding: 0;}
#sidebar-wrapper {float: left; width: 350px; margin: 0; padding: 0;}

4.   Cari kode
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
----hingga----
</b:section></div>
</div>

5.   Tempatkan kode berikut ini di atas </div>
<b:section class="sidebar1" id="sidebar1" preferred="yes">
<b:section class="sidebar2" id="sidebar2" preferred="yes">
</b:section></b:section></div>

6.   Simpan telpate dan lihat hasilnya
Sekian dulu postingan mengenai cara membuat dua kolom pada sidebar, semoga bisa bermanfaat dan selamat mencoba.
Terima kasih telah membaca artikel mengenai cara membuat dua kolom pada sidebar di blog aye.
Share this article :

12 comments:

  1. wah ganti kostum ya, nice

    ReplyDelete
  2. kan neng cici memang udah cakep kok

    ReplyDelete
  3. makasih mbak informasinya, saya newbi sekali, mohon bimbingannya ya, salam kenal mbak

    ReplyDelete
    Replies
    1. sama-sama... aye juga masih newbie kok...
      kita belajar bersama aja ya...
      makasih dah berkunjung

      Delete
  4. nice blog and profesional sobat...............

    ReplyDelete
    Replies
    1. makasih atas kunjungannya gan.
      Kayaknya kata profesional masih jauh dari aye gan

      Delete
  5. mantap nih,,, oh ya,, follow sukses untuk blog anda,,, follow back yah http://www.inforpadu.com/

    ReplyDelete
    Replies
    1. @ Admin Hendra
      sepertinya blog anda dengan alamat tersebut udah dihapus...

      Delete
  6. wahhh, manteb banget nih sobat, sangat bermanfaat
    Jagan lupa main" di blog aq yakk @neng cici, ditungu kunjungan & Comenx,,

    ReplyDelete
  7. hwadoohh...pusing nih gan, kode2nya kok gk ada ya di blog saya...Media Info(www.mediainfomitra.blogspot.com)

    ReplyDelete

Siapa saja boleh berkomentar, asal jangan spamming dan kalau bisa sesuai dengan tema blog ini Belajar Bersama | Diskusi Bersama | Maju Bersama

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. BLOG KONTROVERSI INDONESIA™ - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger