Cara membuat sidebar di kanan dan kiri blog

 

Sidebar yang berarti kolom yang berada di samping atas bawah posting blog sidebar ini punya fungsi untuk menampung berbagai widget seperti fanspage, label, archives, foloower blog, dan lain sebagainya. namun kali ini bagi kamu yang sedang ingin memasang sidebar ini berada di samping kiri dan kanan blog bisa langsung praktek cara yang saya tuliskan di bawah ini.

Langkah-langkah membuat sidebar di sebelah posting blog. 

sebelum memulai gambar berikut ini bisa memudahkan kamu memahami artikle cara menambah sidebar ini.

 Keterangan gambar : 

1. Outer-wrapper
2. Header
3. Main wrapper
4. Sidebar
5. footer

Pertama-tama Cari kode seperti di bawah ini untuk mempercepat gunakan CTRL + F

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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 */
}

#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 */


Tambahkan kode warna merah di bwah ini di bawah kode di atas :

#sidebarbaru-wrapper {
width: 260px;
float: left;
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 */
padding:5px;}

keterangan :
kode yang berwarna biru adalah kode ukuran yang harus di rubah sesuai keinginan sobat menyesuaikan ukuran sidebar
Jika kamu ingin menambahkan sidebar berarti kamu harus menambah jumlah outerwrapper lebih lebar lagi lihat gambar di atas.
misal outer wrapper + sidebar = 850px + 260 px =  1080 px
maka ukuran outer wrapper semestinya menjadi 1080 px dan jangan lupa sisakan pula untuk padding dan margin agar untuk jarak misal outer wrapper nya 1090

260px adalah ukuran lebar sidebar
float : right; adalah letak sidebar nantinya berada di kanan
float:left ; adalag letak sidebar nantinya berada di kiri

Cari  lagi kode seperti di bawah ini :


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Letakkan kode dibawah ini tepat atasnya:

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

Hasilnya akan tampak sebagai berikut ini :

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

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
Hanya itu saja cara Menambah Sidebar Di Kanan Atau Dikiri Blog nya.. selamat praktek dan semoga berhasil.

Read More