Cara Membelah Sidebar Menjadi 2 Di Blog

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.com
2. 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 Blog
Harap kalau mau copas tulis sumber ya
Semoga Bermanfaat

Related Post:


Facebook Comments
12 Blogger Comments


12 comments

November 30, 2012 at 8:30 AM delete

nice..:)

November 30, 2012 at 8:49 AM delete

@supercoolzz : thanks

November 30, 2012 at 6:04 PM delete

punya saya udah dari sananya mas hehehe :D

November 30, 2012 at 6:10 PM delete

Wih keren banget infonya nih sob (y)...

November 30, 2012 at 6:11 PM delete

mampir kemari sambil meramaikan suasana :)

November 30, 2012 at 7:02 PM delete

@limit post : hahha
@museum : makasih
@yousake : rame?

December 1, 2012 at 10:07 PM delete

udh di coment ni gan.
oia templatenya unik, keren.
dpt darimana gan?

ZayCoel

December 2, 2012 at 7:23 AM delete

@azis sofyan : edit ndiri gan

December 7, 2012 at 9:23 AM delete

nice tutorialnya vid

December 7, 2012 at 9:35 AM delete

@asgard : wah kawan gua datang, makasih

December 8, 2012 at 7:11 PM delete

Hari ini cuma mau mampir dan melihat lihat blog sobat . blog nya bagus :)

SHARE4RT

December 8, 2012 at 9:05 PM delete

@share4art : makasih

Post a Comment - Back to Content

Poskan Komentar
Blog Ini Doffolow
Tolong Berkomentar Yang sopan
Rank Alexa : 180rb +
[+] D-G RULE[+]
- Jangan Spam
- Berbicara Sopan
- Kalau bisa jangan Out Of Topic
- Promosi Jangan Berlebihan
Silakan Berkomentar


Like Fanspage D-G Blog

 
Selamat Datang Di D-G Blog, Kini Hadir Dengan Tampilan Baru. Silakan Dibaca Dan Sedot Ilmunya Serta Silakan Tinggal Comment Di Blog Ini.Terima Kasih.FOLLOW THIS BLOGVALID HTML5