Hallo sobat AHS,..
kali ini saya akan membagikan tutorial mengenai
Cara Membagi Sidebar Menjadi 2 Bagian..
tutorial ini sebenarnya sudah lama,, tetapi tidak mengapa,, karena masih banyak blogger yang mencari-cari tutorial ini,,
saya juga memakai tutorial ini tetapi hanya berbeda kode saja,, kenapa? ya kan width sidebarku bisa di bagi 2 ._.
udah pada penasaran??
sabar dulu,, nih aku kasih screenshotnya :
Nah maksudku yang itu loh,, disana aku memakai kode :
#sidebar-kiri{.........}
dan
#sidebar-kanan{.............}
Konsepnya?? sama saja kok sobat,,..
Oke langsung saja ya sobat..
Cara Membagi Sidebar Menjadi 2 Bagian
1. Masuk www.blogger.com
2. Template (Dibackup dulu jika perlu)
3. Edit HTML,Expand template widget(jika versi baru : masuk template > edit html > kemudian tinggal cari)
4. Sekarang gunakan
Ctrl+
F dan cari kode seperti dibawah ini
#sidebar-wrapper { width: 220px; float: $startSide; 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 */ }
Nah tidak usah takut kalo pas kalian cari kgk ada, karena pastinya tiap template beda. Nah jikalau tidak ada cukup kalian cari yang #sidebar-wrapper nya aja
5. Kalau sudah ketemu, ubah kode yang saya beri warna merah dengan angka yang sesuai dengan blog kamu , misalkan kalau 220 kalian bagi dua jadinya 110 dan pastinya kecil sekali. Coba kalian ubah jadi 350 atau lebih besar jika dibagi 2 tidak akan terlalu kecil, jikalau ingin mengubahnya menjadi 350 kodenya akan menjadi seperti ini (Dan jangan lupa floatnya jadi right)
#sidebar-wrapper { width: 350px; float: right; 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 */ }
NB : jika sudah mirip dengan kode itu tidak usah diganti apa apa ya.
6. Jikalau sudah ketemu dan sudah diganti tambahkan kode dibawah ini diatas kode yang sudah anda ubah tadi
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right; word-wrap:break-word;
overflow:hidden;
}
Nah tips untuk kalian,kode yang 170px itu (yg saya beri warna merah) itu terserah kalian ukurannya yg #left-col itu yg widget terbelah bagian kiri dan satu lagi yg kanan , jadi kalau itu ukurannya terserah kalian yang pasti jumlah maksimalnya jika dijumlah tidak melewati ukuran maksimal sidebar kalian.
7. Selanjutnya kita akan mengaktifkan kode tersebut dengan cara cari kode seperti dibawah ini
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
</div>
Dan lagi lagi jangan kaget jika tidak ada kodenya , jika tidak ada kodenya anda tinggal mencari kode yang saya beri warna merah saja sudah cukup. Jika kalian sudah ketemu coba kalian perhatikan kodenya dan cari </div> alias ujungnya ya
8. Jika sudah ketemu ujungnya yang
</div> kalian tinggal menambahkan kode ini tepat diatas
</div> atau sebelum kode
</div>
<b:section class='sidebar' id='left-col' preferred='yes'/> <b:section class='sidebar' id='right-col' preferred='yes'/>
9. Nah ini dia yang paling repotnya, tadi kita kan sudah memperlebar sidebar blog kita , maka agar tampilan blog kalian tidak hancur maka header, wrapper, dan footernya kita harus lebarkan juga agar tampilannya tetap bagus.(NB : cara ini tidak usah dilakukan kalau kalian meletakan angka di bagian point ke 4 itu sesuai dengan lebar asli blog kalian, dan bagi yang melebarkannya tidak sesuai dengan aslinya harus mengikuti cara ini)
Nah sekarang begini dulu rumusnya begini "Lebar yang anda taruh di point ke 4(yang anda tambah agar hasilnya bagus)-dengan yang aslinya" jadi kalau disesuaikan dengan yang ada dipost ini jadinya 350-220=130, jadi setiap kode yang ada di bagian footer,header dan wrapper kalian tambahin 130. Eiiit tidak usah takut jika tidak bisa di post ini juga akan ada tutorialnya
Untuk header
- Masih tetap di edit HTML
- Kalian cari kode #header-wrapper {
- kemudian kalian baca baik baik setelah kode tersebut dan lihat yang width:....px ,nah pastinya kode ...... tadi adalah kode asli milik anda yang harus anda tambah 130, jadi jika disana 300 tinggal ditambah 130 dan jadi 430.
Untuk Wrapper
- Masih tetap di edit HTML
- Kalian cari kode #outer-wrapper {
- kemudian kalian baca lagi baik baik dan cari juga width:...px dan tambahkan juga 130
Untuk footer
- Masih tetap di edit HTML
- Kalian cari kode #footer {
- Kemudian sama baca dan cari width:..px dan tambahkan juga 130
Nah bagi yang kode tersebut kgk bisa diketemukan harap cari yang hampir sama.
10. Jikalau sudah selesai , Simpan template.
Oke,,sekian tutorial hari ini,,semoga bermanfaat.