Cara Membagi Sidebar Jadi 2 Kolom
Terus terang sudah lama saya tidak pernah utak-atik template jadi dah rada-rada lupa. Tapi karena ada permintaan maka terpaksa buka buku lagi deh.
Semoga tutorial ini bermanfaat terutama untuk para blogger Newbee Seperti Saya Ini
Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.
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 masing2 sidebar menjadi 117px.
Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.
5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini
6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini
9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id=sidebar menjadi id=sidebar2. Jadi hasilnya menjadi seperti ini.
10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.
Selamat mencoba..
Terus terang sudah lama saya tidak pernah utak-atik template jadi dah rada-rada lupa. Tapi karena ada permintaan maka terpaksa buka buku lagi deh.
Semoga tutorial ini bermanfaat terutama untuk para blogger Newbee Seperti Saya Ini Ok mari kita mulai..
1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode
1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.#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 */
}
Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.
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 masing2 sidebar menjadi 117px.
Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.
5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya 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 */
}
6. 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 {7. Setelah itu, cari kode
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 */
}
<div id=sidebar-wrapper>8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.
<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>
9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id=sidebar menjadi id=sidebar2. Jadi hasilnya menjadi 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>
10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.
Selamat mencoba..
