Salam Blogger, Kali ini saya mau share sedikit tentang "Cara Membuat dan Membagi Sidebar Menjadi Dua Di Blogspot".
Langsung aja ke TKP ya gan..
1. Login ke
Blogger. Klik
Design ->
Edit HTML
2. Backup template anda dengan cara klik "
Download Full Template".
3. Cari kode
#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 */
}
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.
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 masing-masing sidebar menjadi 117px.
Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.
4. 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 */
}
5. 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 */
}
6. Setelah itu, cari kode
7. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.
8. Copy kode yang berwarna biru diatas lalu letakkan dibawah
. Ganti
sidebar-wrapper pada kode ke-2 menjadi
sidebar-wrapper2 dan
id='sidebar' menjadi
id='sidebar2'. Jadi hasilnya menjadi seperti ini.
preferred='yes'>
preferred='yes'>
9. Jika sudah klik
Save Template.
10. Selesai. Klik
Page Element untuk melihat hasilnya.
Source: maskolis.com