TIPS MEMBAGI SIDE BAR MENJADI 2 KOLOM

Di posting kali ini saya membagi tips kepada anda untuk membagi side bar menjdi 2 kolom,  jika anda semua penasaran langsung saja :

1.pertama silahkan anda login ke blog anda

2.klik tata letak(design) lalu edit HTML dan centang pada expand widget

3.selanjutnya cari kode berikut ini :

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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

*/
}

Sialahkan anda tekan ctrl F, agar mudah menemukannya

4.contohnya width diatas adalah 254px, karena anda ingin membagi kolom menjadi 2 bagian maka silahkan anda bagi nilai width dengan 2. Sehingga mesing-masing kolom mempuayai lebar 127px. Agar tidak berdempetan maka masing-masing komlom anda beri margin sebesar 10px. Sehingga menjadi 117px

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya akan seperti ini :

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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-wrapper2 {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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 anda ganti width menjadi 117px dan tambahkan  margin:0px 20px 0px 0px;, maka hasilnya seperti ini :

#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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-wrapper2 {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
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

*/
}

8.jika sudah cari kode dibawah ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

Silahkan anda copy code berwarna biru diatas dan letakkan dibawah </div>. selanjutnya Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Maka hasilnya akan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

9.klik save dan lahat hasilnya

Artikel Terkait Lainnya :