Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog

Akhir-akhir ini saya jarang sekali Blogging khususnya dalam update posting, dikarenakan padatnya kegiatan dirumah. Namun saya akan terus membuat posting saat waktu luang agar Blog ini tidak semakin terabaikan.
Saya mempunyai satu hal yang sudah lama ingin saya bahas.Yaitu tentang Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog. Bagi sobat yang membutuhkan keberadaan 2 Kolom Widget di Bawah Sidebar Blog, silakan simak terus posting kali ini. Tak perlu berbasa-basi lagi, langsung saja kita ke pembahasan.

Namun Sebelumnya Perlu Diperhatikan!!! tulisan bercetak tebal hitam yang sobat jumpai nanti dalam pembahasan adalah kode elemen yang ditemukan hasil dari Tahap 1. Kode tersebut mungkin akan berbeda dengan elemen pada Blog sobat.

• Login ke akun Blogger sobat.

1. Mengetahui Elemen Sidebar.

• Masuk ke bagian Tata Letak.
• Sentuhkan kursor di tulisan "Edit" pada salah satu Widget di bagian sidebar. Maka widget ID telah diketahui. Berdasarkan contoh di bawah, widget id = "HTML2"

• Masuk ke bagian Template dan klik Edit HTML.
• Dengan tombol ctrl+F, cari HTML2. Perhatikan screenshot berikut. Widget id HTML2, berada pada elemen sidebar-wrapper. Maka elemen dari sidebar adalah sidebar-wrapper.

2. Memasang CSS.

• Dengan tombol ctrl + F, cari CSS "#sidebar-wrapper". Kode CSS itu seperti demikian.

/* -- Sidebar -- */
#sidebar-kiri {float:left;width:150px;display:inline;margin:0;}
#sidebar-wrapper a:link,#sidebar-wrapper a:visited{}
#sidebar-wrapper{float:right;width:320px;display:inline;margin:0;}
.sidebar h2, .sidebar-kiri h2 {font-size: 12px;font-family: Arial, Tahoma, Verdana;font-weight: bold;text-transform: uppercase;margin: 0 0 10px;padding: 3px 0 3px 7px;border-bottom:1px dotted #ccc;}
#sidebar p, .sidebar-kiri p {margin: 0;padding: 0 0 0 45px;}
#sidebar ` img , .sidebar-kiri img {border: none;margin: 0;    padding: 0;}
.sidebar ul, .sidebar-kiri ul {list-style-type: none;    margin: 0;padding: 0;}
.sidebar ul li , .sidebar-kiri ul li {list-style-type: circle;margin: 0 0 5px;margin-left: 20px;}
.sidebar .widget {background: #FFF top no-repeat;float: left;width: 300px;margin: 0 0 10px;padding: 10px;border: 1px solid #DDD;} .main .widget {margin: 0 0 1.5em;}
.main .Blog {border-bottom-width: 0;}
.sidebar-kiri .widget {
background: white top no-repeat;
float: left;
width: 120px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
/* -- End Sidebar -- */

• Letakan Kode berikut tepat di bawah kode #sidebar-wrapper{float:right;width:320px;display:inline;margin:0;}.

#double-sidebar {width320px;float:left;}
#sidebar-left{border:1px solid #000000;padding:10px;width: 150px;float:left;}
#sidebar-right{border:1px solid #000000;padding:10px;width: 150px;float:right;}

Ket:
Pada kode berwarna biru, lebarnya samakan dengan lebar widget sidebar-wrapper.
Pada kode berwarna merah, tentukan lebar widget maksimal setengah dari lebar widget pada double-sidebar.
Untuk kode-kode tampilan lainya, silakan customize. Sepantasnya tampilan 2 kolom widget yang akan dibuat ini, samakan dengan tampilan widget sidebar yang telah ada (sidebar-wrapper). Sobat bisa mengambil kode dari sidebar-wrapper.

3. Memasang HTML.

• Cari kode <div id='sidebar-wrapper'>.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Iklan Baris' type='HTML'>
<b:widget id='PlusFollowers2' locked='false' title='Google+ Followers' type='PlusFollowers'>
</b:section>
</div>

• Tambahkan kode berwarna biru berikut pada kode di atas tadi sehingga hasilnya menjadi seperti berikut.

<div id='sidebar-wrapper'>
<div id='double-sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Iklan Baris' type='HTML'>
<b:widget id='PlusFollowers2' locked='false' title='Google+ Followers' type='PlusFollowers'>
</b:section>
<b:section class='sidebar-left' id='sidebar-left' style='width: 150px; float: left;'/>
<b:section class='sidebar-right' id='sidebar-right' style='width: 150px; float: right;'/>
</div>
</div>

Ubah ukuran width sesuai dengan lebar kolom widget kanan/kiri yang sebelumnya telah sobat tentukan.

• Klik Simpan Template, dan silakan lihat hasilnya.

Jika berhasil, maka akan muncul 2 Kolom Widget di Bawah Sidebar Blog.