Menambah Dua Elemen di Bawah Sidebar

Trik Menambah Dua Elemen di Bawah Sidebar ini saya dapatkan dari Bang Del (tapi blog bang Del ga diapdet-apdet sih??) dan ternyata berhasil dengan mulus tanpa masalah. Dibanding dengan tutorial blog di blog-blog yang lain, Bang Del lah yang lebih mudah diterapkan. Dan trik ini sangat membantu bagi para blogger pemula seperti saya untuk menambah Elemen di sidebar seperti widget Label, Arsip, recent comment dll. Triknya sebagai berikut:
Dua kolom sidebar tersebut masih merupakan bagian dari sidebar-wrapper.

• Login ke blogger dengan id anda
• Masuk ke menu Design
• Pada tab menu, klik Edit HTML 
• klik Download Template Lengkap
• Sekarang cari kode ini :

#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 nilai width 220px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya width: 350px dan properti menjadi float: right; sehingga secara keseluruhan menjadi seperti ini :

#sidebar-wrapper {

width: 350px;

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

• Sekarang tambahkan kode berikut di bawah kode tadi

#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

• Secara keseluruhan kodenya menjadi seperti ini :

#sidebar-wrapper {
width: 350px;
float: right;
$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 */
}

#left-col {

width:170px;

float:left;

word-wrap:break-word;

overflow:hidden;

}

#right-col {

width:170px;

float:right;

word-wrap:break-word;

overflow:hidden;

}

• Sekarang kita akan membuat id untuk sidebar left-col dan right-col tersebut. Cari kode ini:

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

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 secara keseluruhan menjadi seperti ini:

<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>

• Sekarang klik tombol SIMPAN TEMPLATE 
• Selesai

Anda bisa melihat hasilnya di blog saya yang satu ini.

.::Related Posts: