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:

Blogger Tips

• SEO Blogger Kini Lebih Mudah dan Praktis
• Cara Agar Memperoleh Banyak Backlink | SEO Blog Banyak Pengunjung
• Cara Mudah Membuat Random Post Sederhana
• Cara Mudah Membuat Related Post dengan Linkwithin
• Membuat banner animasi via picasion
• List Tool SEO penunjang SEO
• Cara Memasang File Flash Di Blog Post
• Cara Pasang Recent Posts Thumbnails Dengan Mudah
• Mengenal Fungsi Navbar di Blogger
• Cara Mentransfer Akun Blog ke Akun Blog yang Lain
• Trik Menampilkan Total Post, Comment, dan Online User
• Blogger Belajar Dari Harry Potter
• Blogger Perkenalkan Pendeteksi Otomatis Komentar Spam
• Cara Memodifikasi Bullet List dan Numbered List di Blogger Post
• 5 Alasan Mengapa Anda Harus Menjawab Setiap Komentar
• Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
• 6 Situs Foto Gratis untuk Blog Anda
• Posting Blog Menggunakan Word 2010
• Batas/Limit Kapasitas Akun Blogger
• Cara Mengatasi Blog Post dari Copy Paste
• Gambaran Frekuensi Posting Blog kita
• Integrasi Antara Blogger dan Zemanta Gadget
• Share Buttons Milik Blogger
• Bagaimana Cara Kerja Google?
• Mengapa Page Rank Blog/Web Jatuh?