Cara Membagi Sidebar Blog Menjadi Dua

Salam blogger, pada kesempatan kali ini saya akan sedikit membahas mengenai Tutorial blogger, soalnya udah lama nih nggak mosting tentang tips dan trik blogger, kemaren-kemaren posting saya penuh dengan info news mulu. Nah di postingan ini saya akan sedikit membeberkan gimana caranya untuk membagi sidebar yang asalnya hanya satu kolom menjadi dua kolom. Untuk yang template blognya hanya memiliki satu sidebar seperti saya, gak usah bingung untuk ganti template, pakai aja tutorial ini.

Langkah-langkah untuk membagi sidebar menjadi dua:

1. Log in ke account blogger sobat

2. klik menu Template

3. kemudian pilih Edit Html

4. pilih lanjutkan untuk masuk ke Setup Html

5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 

    bertuliskan "expand template widget"

6. cari kode di bawah 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 */
}

                *Gunakan ctrl+f untuk mempermudah pencarian*

"Sebagai contoh; nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing-masing sidebar menjadi 117px".

7. Copy kode css dibawah ini lalu simpan dibawah kode tadi

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

8. Ganti nilai width masing-masing kolom menjadi 117px. 

    Lalu tambahkan margin:0px 20px 0px 0px;pada bagian sidebar-

    wrapper2. Sehingga hasilnya menjadi 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 */
}

9. Etzz belum selesai, Sobat cari lagi kode berikut

<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=’Creating Website’ type=’Feed’/>
</b:section>
</div>

10. Yang harus anda perhatikan adalah kode yang di bold karena setiap  
      template itu berbeda-beda

11. Tambahkan kode berikut ini dan letakan dibawah </div>

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

12. Simpan Template

Related Post: