Cara Membuat sidebar menjadi dua Kolom pada Blog

Yang saya maksud dari  Membuat sidebar menjadi dua Kolom pada Blog disini adalah membagi sidebar yang awalnya adalah satu kolom, menjadi dua kolom dibawahnya. jadi sidebar yang bagian atas tetap  satu kolom, dan kita akan membuat dua kolom sidebar dibagian bawahnya.

 (Lebih jelasnya berikut)

Bagaimana sob? jikan kalian berminat, silahkan simak tahap-tahap proses pembuatanya berikut :

• Login Ke akun Blogger kalian masing-masing
• Pilih menu Template (sebelum melanjutkan, silahkan backup terlebih dahulu agar aman)
• Pilih Edit html, jangan lupa beri tanda centang pada Expand template Widget
• Selanjutnya cari kode berikut (atau setidaknya mirip lah ) :

#sidebar-wrap {
width:300px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}

•  Setelah kalian berhasil menemukanya, silahkan Copy kode tersebut dan Paste dibawahnya.

hasilnya seperti ini

#sidebar-wrap {
width:300px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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-wrap {width:300px;float:$endSide;margin:15px 0 0;font-size:97%;line-height:1.5em;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 */} 

Keterangan : Kode yang saya tandai dengan warna biru adalah kode yang harus kita Copy
                       Kode yang Saya beri warna Merah adalah Kode yang kita Paste dari Kode warna Biru.

•  Selanjutnya kita akan membagi lebar dari Widget tersebut menjadi dua, karena lebar Widger tersebut aslinya adalah 300px, maka sekarang kita ambil setengahnya menjadi 150. namun disini kita membutuhkan space lagi untuk memisahkan antara dua widget tersebut, maka lebar widgetnya masing-masing kita beri 145. jadi total spacenya antara keduanya adalah 10px.
• Selain mengubah ukuran lebar sidebar, definisi sidebar jg harus diubah, yg sebelumnya bernama #sidebar-wrap kita ubah menjadi #kolom1-wrap sehingga hasil kode perubahan menjadi seperti berikut :

#kolom1-wrap {
width:115px;
padding:0;
float:$endSide;
font-size:97%;
line-height:1.5em;
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 */
}

•  Selanjutnya karena masih 1 kolom maka copy kembali kode tersebut dan namakan #kolom2-wrap sehingga kode Lengkapnya seperti berikut :

#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
} 

#kolom1-wrap {

width:115px;
padding:0;
float:$endSide;
font-size:97%;
line-height:1.5em;
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 */
}

#kolom2-wrap {
width:115px;
padding:0;
float:$Left;
font-size:97%;
line-height:1.5em;
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 */
}

•  Selanjutnya Silahkan cari kode berikut :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

NB : Kode yang saya beri warna hijau, berbeda dengan kode diatas.

Copy kode di atas kemudian pastekan di bawah kode di atas sebanyak 2 kali, hal ini dilakukan karena kita akan mengubah menjadi 2 kolom, sehingga kode selengkapnya menjadi seperti berikut :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

Setelah itu, ubah id kode hasil copy-an pertama menjadi kolom1-wrap dan hasil copy-an 2 menjadi kolom2-wrap sehingga hasil akhirnya menjadi seperti kode berikut :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='kolom1-wrap'><div id='kolom1-wrap'><b:section class='sidebar' id='sidebar2klm1' preferred='yes'><b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/></b:section></div></div>
<div id='kolom2-wrap'><div id='kolom2-wrap'><b:section class='sidebar' id='sidebar2klm1' preferred='yes'><b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/></b:section></div></div>

•  Selanjutnya ubah id kode hasil copy-an pertama menjadi kolom1-wrap dan hasil copy-an 2 menjadi kolom2-wrap sehingga hasil akhirnya menjadi seperti kode berikut :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='kolom1-wrap'><div id='kolom1-wrap'>
<b:section class='sidebar' id='sidebar2klm1' preferred='yes'>
<b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/>
</b:section>
</div></div>
<div id='kolom2-wrap'><div id='kolom2-wrap'>
<b:section class='sidebar' id='sidebar2klm1' preferred='yes'>
<b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/>
</b:section>
</div></div>

• Terakhir, Simpan Template dan Lihat Hasilnya....

Demikian tutorial tentang Cara Membuat sidebar menjadi dua Kolom pada Blog, Semoga bermanfaat.
Terimakasih sudah bersedia mampir di blog sederhana ini.

Ditulis Oleh : Anonymous TIPS DAN ARTIKEL BLOGGING TERLENGKAP

Sobat sedang membaca artikel tentang Cara Membuat sidebar menjadi dua Kolom pada Blog. Oleh Admin Lhk-Blogs, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://lhk-blogs.blogspot.com/2013/02/Cara-membuat-sidebar-dua-kolom.html" target="_blank">Cara Membuat sidebar menjadi dua Kolom pada Blog</a>

:: Buat Permalink di Blogmu ::