Blog Tutorial

Buat sidebar kiri dan kanan

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 :

sumber rujukan : kolom tutorial

Pemilik tidak akan bertanggungjawab terhadap sebarang kerosakkan atau kehilangan yang dialami disebabkan oleh penggunaan maklumat di dalam laman ini. Jika anda memerlukan perkhidmatan nasihat yang khusus, sila dapatkan pakar bertauliah dan berpengetahuan di dalam bidang berkenaan. Untuk biodata penuh boleh lihat di Biodata Kujie

11 thoughts on “Buat sidebar kiri dan kanan”

  1. ini tutorial zaman kak jie guna blogspot kena edit sendiri2 tu…rasanya sekarang dah ada dalam default blogspot boleh edit nak sidebar macam mana, lebar semua.

    Pergi kat Design > Template Designer > Adjust Widths > scrol je nak lebar mcm mana.

  5. hmmm.. bz betol che gu hari nie…:) anyway good tips kakjie :))

    semoga berbahagia selalu …

  7. Jie,
    kasi jadi haa…jgn tak jadi..org lain yg mintak ..orang lain yg jadi nih..! password tu masuh tak tukar..k..cuba lagi..k..mintak2 jadi la kali ni…T.Q

  8. Satu toturial yang amat berguna utk para blogger ni. Cuma perlu copy & paste je dari sini.. Hehehe

  10. Hye Jie..salam…
    Terima kasih diatas kesudian Jie..memberi tunjuk ajar tentang sidebar tu….

Comments are closed.