Kali ini
D-G Blog akan mengeshare tutorial lagi, yaitu cara membelah sidebar menjadi 2 tetapi sebelum dimulai kalian sudah membaca cara mengubah posisi sidebar dan main, belum kalau belum klik
disini. Nah kalian pasti bertanya tanya apa sih maksudnya membelah sidebar dan jadi 2 lagi, pasti kalian bingung kan daripada bingung kalian lebih baik lihat aja dulu screenshootnya dibawah ini
- Screenshoot luar
- Screenshoot Tata Letak
Nah sudah jelas kan, modelnya dibelah 2 gitu. Pengen buatnya? Tapi siapin waktu dulu ya karena pastinya tidak sebentar. Eh ngomong ngomong blum ya saya jelasin apa fungsinya, kalau fungsinya ya pastinya buat taruh blogroll dan affilates, tetapi kalau tidak mau tidak masalah karena itu terserah kamu , tapi biasanya orang taruh buat blogroll dan affilates.
Kalau begitu langsung saja caranya
1. Masuk
www.blogger.com2. Template (Dibackup dulu jika perlu)
3. Edit HTML,Expand template widget
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 dari D-G Blog 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
1. Masuk ke bagian Edit HTML
2. Kalian cari kode
#header-wrapper {3. 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
1. Masuk ke bagian Edit HTML
2. Kalian cari kode
#outer-wrapper {3. kemudian kalian baca lagi baik baik dan cari juga width:...px dan tambahkan juga 130
- Untuk footer
1. Masuk ke bagian Edit HTML
2. Kalian cari kode
#footer {3. Kemudian sama baca dan cari widhtL....px dan tambahkan juga 130
Nah bagi yang kode tersebut kgk bisa diketemukan harap cari yang hampir sama.
10. Jikalau sudah selesai , Simpan template (DIsarankan pratinjau dulu)
Wah artikel yang cukup panjang dan melelahkan dari
D-G BlogHarap kalau mau copas tulis sumber ya
Semoga Bermanfaat
.png)
