Menambah Sidebar Baru

Ternyata masih ada beberapa teman yang bertanya bagaimana menambah sidebar di blog mereka... Dan biasanya template gratis yang disediakan oleh blogger umumnya hanya terdiri dari satu posting area dan satu sidebar area. Trus bagaimana caranya agar blog teman-teman mempunyai dua sidebar? Ikuti langkah mudahnya disini yaaa...

Pertama, login ke blogger masukkan email dan password.
Langsung pilih tab Tata Letak dan Pilih Edit HTML.

Untuk menjaga bila terjadi kesalahan, download terlebih dahulu HTML teman-teman dan simpan di notepad.

Oke kita lanjutkan, yang harus diperhatikan pertama kali adalah Outer-Wrapper.
Dan cari kode seperti ini :

#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; /* tambahkan ini sebelum sidebar baru dibuat */
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 */
}

Bila sudah ketemu, copy kode dibawah ini dan paste tepat dibawah kode #sidebar-wrapper seperti diatas.

#sidebarbaru-wrapper {

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

Untuk mengatur lebar main-wrapper, sidebar-wrapper dan sidebarbaru-wrapper cukup mengganti besarnya angka width (tulisan bercetak biru).
 
Dan langkah terakhirnya adalah cari kode seperti dibawah ini :

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

Dan copy kode dibawah ini tepat dibawah kode seperti diatas.

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

Sehingga hasilnya menjadi seperti ini :

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

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

Klik simpan perubahan dan lihat tampilan sidebar baru-nya.

*Perhatikan bila sidebar yang kita buat tidak muat di template/terlalu sempit, maka bisa diperbesar dengan menambah angka width pada template-nya. Sama dengan untuk menambah lebar sidebar diatas. Yang diperhatikan adalah :  

1. /* Header        
#header-wrapper {      
width:660px; /* tambahkan angka yang sesuai, utk full template 1200px, tapi biasanya hanya 900px */
margin:0 auto 10px;      
border:1px solid $bordercolor;      
}

2. /* Outer-Wrapper
 #outer-wrapper {       width: 660px; /* samakan dengan angka diatas */      
margin:0 auto;      
padding:10px;      
text-align:left;      
font: $bodyfont;    
}

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

Selesai! Silahkan kreasikan sendiri blog teman-teman...