Home » , » MEMBUAT DUA SIDEBAR DI BAWAH SIDEBAR UTAMA

MEMBUAT DUA SIDEBAR DI BAWAH SIDEBAR UTAMA

Sidebar berguna untuk memasang berbagai atribut agar blog kelihatan dinamis.Bagi blogger profesionol ataupun master sangat membutuhkan banyak ruang untuk menempatkan macam-macam atribut.
Kalau kita lihat blog atau web para master,disitu banyak terpampang iklan yang bisa menarik perhatian pengunjung.

Sebagai newbie ( sebutan bagi pandatang baru ) kita tentu belum terlalu memerlukan banyak ruang,namun demikian tidak ada salahnya jika sudah memiliki stok ruang.Siapa tahu suatu saat nanti kita juga membutuhkan lebih banyak kolom untuk menempatkan berbagai atribut termasuk script iklan tentunya.
Dua sidebar ini tidak akan kelihatan jika belum diisi,jadi tidak akan mengganggu tampilan blog.












Bagi anda yang pingin menambah dua kolom di bawah sidebar utama,ikuti langkah-langkah berikut :

     1.Masuk Blogger.
     2.Klik Tata Letak.
     3.Klik submenu Edit HTML.
     4.Jangan lupa Download Lengkap Template untuk menjaga jika kita gagal.
     5.Cari kode :


#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Ganti angka 220 dengan lebar yang lebih besar,sebab untuk dua kolom akan terlalu kecil.Misalkan saja kita ganti dengan 300,jadi masing-masing kolom mempunyai lebar 145 dan sisanya untuk jarak antar kolom.
Untuk float kita ganti dengan right,maksudnya kolom akan menempel di sebelah kiri body.Sehingga kode menjadi :


#sidebar-wrapper {
width: 300px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
     6.Tambahkan kode berikut setelah kode di atas.


#left-col {
width:145px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:145px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
Sehingga kode menjadi :

 #sidebar-wrapper {
width: 300px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
 #left-col {
width:145px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:145px;
float:right;
word-wrap:break-word;
overflow:hidden;
}
     7.Pasang kode HTML,cari kode :


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
</div>
     8.Sisipkan kode berikut di bawah <b:widget id= dan seterusnya...


<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
Sehingga menjadi :


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
 
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>

 </div>
     9.Simpan Perubahan.
Sampai disini dulu...semoga bisa langsung jadi.
Kalau sudah berhasil menambah dua kolom di bawah sidebar utama,jangan lupa berikan komentarnya.
Bagikan artikel via :

5 komentar:

  1. Nice post kawan. Boleh nich nti kucoba bila aku mau rubah sidebar ku dengan penambahan dua sidebar.

    BalasHapus
  2. thank...berhasil di blog saya, hanya perlu penyempurnaan

    BalasHapus
  3. Thanks ya, ok bangget dech tutornya

    BalasHapus
  4. thanx\s info ya keren banget

    BalasHapus
  5. Terima kasih banyak ya kawan .. ?? semoga elmunya bertambah ..

    BalasHapus

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. PRAPATAN KERTEK - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger