Find What You Need

14 Feb 2010

Cara Membuat Dan Membagi Dua Kolom Sidebar

Dalam Template blogger default , biasanya kolom sidebar yang disediakan cuma satu. Fungsi dari kolom sidebar ini, tentu kita semua sudah pada tahu yaitu untuk menyimpan berbagai gadget atau pun widget, baik berupa gambar, aplikasi tambahan, file html, javascript dan masih banyak lagi, Sehingga tampilan web atau blog kita lebih rame.


Sekarang bagaimana membuat tambahan kolom sidebar dan membaginya menjadi dua ?.
Secara default kolom sidebar yang disediakan adalah seperti ini :


Bila ditambahkan dua kolom sidebar baru, nantinya seperti ini :


Contoh diatas menggunakan template minima yang telah diubah lebarnya. Untuk mengetahui cara menambah lebar template bisa dibaca disini. Sekarang kita langsung saja menuju cara  membuat dan membagi dua kolom sidebar.

Sigin di draft blogger
Dalam dasbor masuk Tata Letak --> Edit HTML

   1. Penambahan Kode CSS

Untuk menambah kolom di template, kita perlu membuat tambahan kode css. Karena yang akan kita buat adalah kolom untuk sidebar , kode yang perlu ditambahkan adalah kode dibawah ,Copy kode ini :

.singlesidebar {float:$endSide;  word-wrap:break-word;  overflow:hidden}

Letakkan atau paste dibawah kode ini

#sidebar-wrapper{ width:320px;  float:$endSide;  word-wrap:break-word;  overflow:hidden}
 Kemudian Save atau simpan dulu.

   2. Kode ID untuk Pemanggilan

Setelah kode css kita buat, untuk memanggilnya , kita harus mendefenisikannya, yaitu dengan membuat ID pemanggilnya. Untuk itu Copy kode dibawah ini :

<div id='sidebar-wrapper'>
<div class='singlesidebar' style='width:100%'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

<div style='width:100%'><div class='singlesidebar' style='width:50%; float:left;'>
          <b:section class='sidebar' id='sidebar1' preferred='yes'/>
        </div>
   
<div class='singlesidebar' style='width:50%;float:right;'>
          <b:section class='sidebar' id='sidebar2' preferred='yes'/>
        </div>
        </div><div style='clear:both'/>
      </div>

Sekarang kita cari kode berikut , jika sudah ketemu hapus kode ini ganti dengan kode yang telah kita copy, kemudian paste kan disini .

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Setelah itu anda simpan. Sekarang coba lihat hasilnya.



**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

5 komentar:

Tefan Day Pada 8 April 2010 08.26 mengatakan...
Komentar ini telah dihapus oleh pengarang.
PERGERAKAN MAHASISWA ISLAM INDONESIA PANGKEP Pada 21 Juni 2010 19.30 mengatakan...

:))

Sang Pada 3 April 2011 17.26 mengatakan...

mantaf....makasih atas tutorialnya bos

dindin Pada 23 September 2011 22.38 mengatakan...

numpang mampir gan

azka fathur Pada 27 September 2011 18.29 mengatakan...

:-/

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template