Membuat 2 Kolom sidebar (2)

Pada postingan sebelumnya saya menjelaskan tentang membuat 2 kolom sidebar dengan cara membaginya namun kalau sekarang saya akan menjelaskan cara Membuat 2 kolom sidebar (2). Apa maksudnya? jadi kita akan menambahkan 2 kolom lagi tepatnya di bawah sidebar utama yang satu kolom begitu maksud saya , gimana sudah mengerti belum? apa...!!! belum? oke deh saya kasih srceenshoutnya y lihat ke bawah :


nah sekarang sudah mengertikan? sekarang kita lihat yuk cara pemasangannya, oiya sebaiknya sobat perhatikan caranya dengan seksama dan teliti ok biar tidak terjadi kesalahan

1. Login ke blogger
2. masuk ke Tata Letak => Edit HTML
3. setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   
   .lsidebar {
   line-height: 1.5em;
   }
   .lsidebar .widget {
   background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */
   float:left;
   width: 125px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */
   margin: 0 0 10px 0;
   
   }
   #lsidebar h2 {
   height: 20px;
   text-align: center;
   padding:4px 0px 0px 0px;
   font: verdana;
   background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */
   font-size:12px;
   line-height: 1.4em;
   text-transform:uppercase;
   letter-spacing:.2em;
   color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */
   -moz-border-radius: 10px;
   }
   
   .rsidebar {
   line-height: 1.5em;
   }
   .rsidebar .widget {
   background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */
   float:right;
   width: 245px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */
   margin: 0 0 10px 0;
   }
   
   #rsidebar h2 {
   height: 20px;
   text-align: center;
   padding:4px 0px 0px 0px;
   font: verdana;
   background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */
   font-size:12px;
   line-height: 1.4em;
   text-transform:uppercase;
   letter-spacing:.2em;
   color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */
   -moz-border-radius: 10px;
   }
   
   
   
4. setelah itu cari kode <div id='sidebar-wrapper'> dan taruh kode di bawah ini ke dalamnya
   
   
   
   <div id='lsidebar-wrapper'>
   <b:section class='lsidebar' id='lsidebar' preferred='yes'>
   </b:section>
   </div>
   <div id='rsidebar-wrapper'>
   <b:section class='rsidebar' id='rsidebar' preferred='yes'>
   </b:section>
   </div>
   
   
   Bingung y ? oke saya kasih contohnya, kode Sidebar yang bersih seperti
   
   <div id='sidebar-wrapper'>
   <b:section class='lsidebar' id='lsidebar' preferred='yes'>
   </b:section>
   </div>
   
   dan kalau ada widgetnya kurang lebih seperti
   
   <div id='sidebar-wrapper'>
   <b:section class='lsidebar' id='lsidebar' preferred='yes'>
   <b:widget id='HTML4' locked='false' title='' type='HTML'/>
   </b:section>
   </div>
   
   nah sekarang maksud dari menaruh ke dalamnya adalah sobat taruh kode yang tadi saya kasih tepat di atasnya </div> penutup sidebar-wrapper begitu loh sob
   
   
   
5. Setelah itu simpan deh dan lihat hasilnya
6. Selesai

Mudah bukan Membuat Sidebar 2 kolom (2) ( padahal opo iki), jadi saya mempunyai 2 trik tentang membuat 2 kolom sidebar sekarang tinggal sobat pilih saja mana yang lebih baik oke, sekarang saya mau pamit dulu. Terima kasih dan Happy Blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg