Buat sidebar kiri dan kanan

Tweet

Dalam minggu ini saya menerima beberapa pertanyaan mengenai menambah sidebar dari satu menjadi 2 . Kesian Abgputra yang sanggup menelefon saya dari Sri Aman, Sarawak. Saya tak pasti kenapa ramai yang gagal walaupun mengikut segala langkah yang telah diberikan kerana saya telah 'mengetes'nya dengan berjaya. Segala penerangan ini adalah untuk template minima ( original ) blogspot.

Jika anda menggunakan template lain , anda perlu faham beberapa asas penting template standard blogger yang mempunyai Header, Outer dan Footer.

Untuk Outer kita mempunyai:
Main - tempat kita menyimpan posting / entri
Sidebar - tempat kita menyimpan berbagai tools dan aksesori untuk mencantikkan blog.

Sekarang kita akan menambah sidebar original template minima blogger menjadi dua. Jangan tick pada kotak Expand widget Template

1. Mula² Dashboard > Layout > Edit HTML > cari code Outer-Wrapper seperti di bawah :

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
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 */
}

Outer-Wrapper menyimpan nilai dalam pixel main-wrapper serta sidebar-wrapper. Jika ingin menambah satu lagi sidebar di belah kiri dengan nilai seperti ini :

#sidebarkiri-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Kita perlu ubah Outer- Wrapper = 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel, biar ada sedikit ruang, kita tambah 10 pixel = 840 pixel.

Gantikan code Outer Wrapper dengan code seperti di bawah:

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan supaya ada jarak */
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 */

#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

2. Langkah kedua adalah memasang code id pada body. Letak code ini

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

</div>

di bawah code id sidebar-wrapper :

code lengkap akan jadi seperti ini :

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

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

3. Ganti juga nilai pixel bagi header

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:840px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

4. Ganti juga nilai pixel dalam footer

/* Footer
----------------------------------------------- */
#footer {
width:840px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Code berwarna merah adalah code yang di edit /tambah. Sekarang kita mempunyai 2 sidebar di sebelah kiri seperti berikut .


Langkah seterusnya adalah memindahkan satu sidebar ke sebelah kanan supaya kita mempunyai sidebar kiri dan kanan dan main wrapper kita di tengah².

Code sidebar baru yang kita tambah tadi, tukar code yang berwarna biru

#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Letak code ini di atas id main-wrapper

<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='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

Hasilnya adalah seperti berikut :