Tips dan Cara memperlebar halaman blog

Mungkin dari sebagian besar template default yang disediakan blogger, tidak semuanya memeliki lebar halaman yang penuh. Rata – rata setiap template masih memiliki ruang untuk dimanfaatkan baik untuk memperlebar sidebar, ataupun halaman posting. Kali ini saya akan coba memberikan sedikit gambaran tentang memperlebar halaman blog. Cuma, cara ini akan lebih pas jika diaplikasikan di template minima, yaitu template default blogger. Tapi…tidak menutup kemungkinan juga dapat diaplikasikan di template default blogger yang lainnya. Oke….berikut penjelasannya. Sebelumnya, saya asumsikan kalo temen2 sudah berada di menu edit html. Dan ingat…tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja. Sebelumnya, silahkan cari kode css #outer-wrapper. Untuk lebih mudah mencarinya, tekan ctrl+f lalu ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti berikut :

#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 410px; 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 */ } #sidebar-wrapper { width: 220px; float: $endSide; 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 */ }

Penjelasan : #outer-wrapper --> kode untuk lebar halaman blog. #main-wrapper --> kode untuk lebar postingan blog #sidebar-wrapper --> kode untuk lebar sidebar blog. Untuk merubah lebar halaman blog, temen2 tinggal mengganti angka – angka yang terdapat pada setiap kode css diatas. Semakin besar angkanya, maka halaman blog pun semakin lebar. Contoh : Misalnya, temen2 ingin mengganti lebar halaman blog menjadi 950 pixel. Maka silahkan ganti jumlah angka pada tag width untuk kode css #outer-wrapper menjadi --> 950px; Sehingga hasilnya seperti dibawah ini :

#outer-wrapper { width: 950px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }

Nah…setelah mengganti kode #outer-wrapper, jangan lupa untuk mengganti kode tag width pada #main-wrapper dan #sidebar-wrapper juga. Karena jika tidak diganti maka jarak antara halaman posting dan sidebar blog akan sangat lebar. Untuk mengantisipasinya, rubah juga angka pada tag width #main-wrapper dan #sidebar-wrapper menjadi 500px untuk #main-wrapperdan 400px untuk #sidebar-wrapper. Sehingga menjadi :

#main-wrapper { width: 500px; 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 */ } #sidebar-wrapper { width: 400px; float: $endSide; 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 */ }

Untuk merubah lebar kolom pada #main-wrapper dan #sidebar-wrapper, harus sesuai dengan lebar kolom pada #outer-wrapper. Misalnya, lebar halaman blog 950px maka jumlah dari lebar postingan dan sidebar blog harus kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya. Jarak antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.

Nah…setelah merubah lebar bagian blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog. Temen2 tinggal mencari kode #footer-wrapper dan rubah angka pada tag width-nya menjadi sama dengan lebar halaman blog (#outer-wrapper). Jika semua bagian telah mengalami perubahan, maka sebelum nge-save template lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau / preview. Jika memang sudah sesuai baru di save. Jika belum temen2 tinggal klik bersihkan edit / clear edit untuk mengembalikan perubahan2 yang telah terjadi pada template. Ok….selamat mencoba.

64 komentar:

  1. tquu.bunda mau coba ntar ah..

    BalasHapus
  2. ooo gitu, aq emang susah mbedain outter wrapper sama main wrapper. ternyata itu tho artinya?

    Thanks ya!!

    BalasHapus
  3. kalo nambah kolom caranya gimana yaw??thanks U :)

    BalasHapus
  4. wah keren nih infonya, ntar di coba ah

    BalasHapus
  5. keren tipsnya bro..salam kenal

    BalasHapus
  6. trim's bro....tulisanya pas buat gue yang lagi belajar.

    BalasHapus
  7. Tutorial yang mantabs....
    Maju terus..........

    lam kenal

    BalasHapus
  8. thanks ya... tipsnya mantabh abisss! ntar aku coba aaaaaaaah...

    BalasHapus
  9. ini nih baru mantap ne tutorialnya
    I LOve It
    Muach2
    cari2 semuanya kesini ajha ah
    Hohohoho

    BalasHapus
  10. cobain ahhhh,thanks banget ilmunya

    BalasHapus
  11. saya tunggu diblog saya lho kang

    BalasHapus
  12. wah terima kasih infonya ya

    BalasHapus
  13. thank's ya atas infonya..............

    BalasHapus
  14. Terima kasih mas ..... akhirnya blog ku jadi
    http://digitalbaca.blogspot.com
    Salam Kenal

    BalasHapus
  15. saya dah coba bro,tp sidebar jaraknya jauh tuh.ada yang blm saya ganti soalnya scripnya ga ketemu

    BalasHapus
  16. di templas saia ko ga ada kode tersebut ya?... jadi binun nih.....

    BalasHapus
  17. duh tutorialnya bagus sekali. terima kasih

    BalasHapus
  18. Sip mas,.. aku dah cobain dan bisa tuch. sekarang lebarnya sudah proporsional, jadi postingan tidak terlalu scroll ke bawah.
    makasih atas ilmunya.
    salam

    BalasHapus
  19. #sidebar-wrapper : kebetulan ditemplatku g ada ya??
    trs ada solusi lain g mas?
    thx be4

    BalasHapus
  20. kalau template yang udah dibredel bisa gak ya???
    saya mau memperlebar sidebar dan halaman posting nehhhh
    mohon bantuannya sangat2 yaaaaa

    makasih
    saya tunggu ya jawabannya
    :)

    BalasHapus
  21. kalo mau tamplate yg sesuai dengan blog saia dan yg baik d mana ya ?

    BalasHapus
  22. Bos, mo nanya nh, cara manggil data link dari www.000webhost.com g'mn ya, plz PM me {mulkhoir@gmail.com}, salm kenal, o ya mampir2 ye ke serambi w "http://pandora-universalbox.blogspot.com" (maklum newbie nh) trims

    BalasHapus
  23. thanks

    software full serial number gratis
    http://andik-eternal.blogspot.com

    BalasHapus
  24. smua artikel disini sangat membantu banget dalam pengembangan blogku. terima kasih .... salam kenal....

    BalasHapus
  25. Sdr. Mizwar.

    Terimakasih atas blognya akujadi tambah ilmu deh.
    Buat blogger yang lain. Salam kenal dari saya
    Totok Ciledug-Tangerang.
    http://smartagencyjobs.blogspot.com/
    hrdsmartagency@yahoo.com
    Cell: 0858-1482-0555
    Esia: 021-9483-0761

    BalasHapus
  26. ini yang saya cari2 ... baru selesai saya baca, besok langsung dipraktekin .. tararengkyu u/ infonya yg sangat membantu para new blogger.

    BalasHapus
  27. Saya sudah berhasil melebarkan halaman postingan tetapi ada garis vertikal yang mengganggu..seolah-olah halaman posting terpotong dua.. bagaimana cara menghilangkannya. Tq

    BalasHapus
  28. wah thanks bro gw dah bisa bikin lebar tuh halaman blog gw
    berhasil...berhasil...berhasil...

    BalasHapus
  29. bagus infonya mas tp kok punyaku outer wrapernya dah aku lebrin tp hasile g lebar cm geser kekiri aj y?wah masi bingung ni..

    BalasHapus
  30. kalau. cara mengiilangkan navbar blog gmana.?

    blog gw www.sangpemujacinta.co.cc

    BalasHapus
  31. mas mizwar
    saya ucapkan terima kasih, semoga mas tambah sukses... sudah berbagi ilmu dengan kami...

    salam kenal : wahyu email: wazhah@yahoo.com

    BalasHapus
  32. infonya ngebantu banget ! sdh di coba dan d aplikasikan... very thx !!

    BalasHapus
  33. halo mas,

    makasih ya infonya, sudah saya coba. dan berhasil total.

    sekali lg terima kasih mas.

    kunjungi blg saya ya!!

    BalasHapus
  34. makasih mas sangat bermanfaat sekali postinganya khusunya untuk saya pemula

    BalasHapus
  35. terimakasih mas udah banyak membantu saya....

    BalasHapus
  36. infonya sangat membantu,.....thank's y

    BalasHapus
  37. Kok jadi berantakan ya mas??
    Mohon penjelasn lebih lanjut

    BalasHapus
  38. salam kenal..
    Sya pemula membuat blog, coba nerapin artikel ini, tp ko gada perubahan ya. Padahal nilai2nya udah saya rubah...Mohon petunjuknya

    BalasHapus
  39. ko bagian footernya ga ada ya ??

    BalasHapus
  40. thanks bos ilmunya...........aku simpan d blogku

    BalasHapus
  41. keren tutorialnya, tukeran link ya mas
    http://bagamesap.blogspot.com/

    BalasHapus
  42. wah bagus infonya ... maksh ya maklum pemula bangt

    BalasHapus
  43. Wah, helpfull banget. makasih yaaaa

    BalasHapus
  44. keren bngd tapi di blog aku nda bsa..
    tukeran link ia boz
    http://java-banget.blogspot.com

    BalasHapus
  45. salam kenal ,,, numpang tanya mas ?? sy make tamplate yg sdh disediakan di blogspot (bukan yg Klasik) sdh berkali-kali sy cb mencari dan m'edit kode seperti pny mas diatas tp ga ketemu. dan jg sdh sy coba untuk cari persamaan'nya tp wktu dilihat hasilnya ttp ga ada perubahan. mohon pencerahan'nya (maklum msh newbie) sebelumnya diucapkan terima kasih.

    http://perindagkopukmtapin.blogspot.com

    BalasHapus
  46. Mantap cuy infonya...

    Visit me Back...

    BalasHapus
  47. kog kodenya saya cari gak ada ya? saya pake templat bawaan blogger, trimakasih.

    BalasHapus
  48. Mkasih gan Template dava_line09 Dah Menjadi Lebar gan,mksh Dah Share titornya,..
    Klo Da Kesempatan Silahkan berkunjung gan,...
    di
    www.davasiappatahhati.co.cc

    BalasHapus
  49. Trim's tutorialnya...sangat bermanfaat..

    BalasHapus
  50. mohon maff sudh mampir .trimkasih atas tips yg bermanfaat

    BalasHapus
  51. mangtaaab mas infonya,mau dicoba dulu nih...thanks anyway

    http://gitarchordshack.blogspot.com

    BalasHapus
  52. tips dan cara yang masuk akal. thanks

    BalasHapus
  53. thx artikelnya om, sangat membantu,
    yangasik.com

    BalasHapus
  54. kaluu template yang didownload bisa gak ya......??

    BalasHapus
  55. maksih bro infoya,

    store-22.blogspot.com

    BalasHapus
  56. makasih yah gan walau keseluruhan yang di atas tidak dapat di aplikasikan tapi ada beberapa yang membuat pekerjaan saya hampir terselesaikan ,, izin repost gan

    BalasHapus

blogger