Sidebar dan Kolom Posting Sama Tinggi

Setelah Ayas perhatiin.....lama.......teruuuuuuuus........terussss..........

Ky nya ada yang aneh diblog Ayas. Apa y?

Setelah bertapa selama beberapa hari, g makan g minum, paling juga cuma makan nasi putih, tahu tempe, kadang2 ayam, mie, lalapan ato sesekali soto..(sama jua boong!!)..akhirnya ketemu juga apa yang aneh!!

Dengan template 3 kolom, blog Ayas terlihat aneh dan agak g teratur, cz.....

Antara sidebar1, sidebar2 dan klom posting g sama tingginya...jadi kelihatan g teratur.

Klo blog sodara juga kaya gni, dengan template 3 kolom, sidebar kiri kanan, biasanya mengalami masalah kaya gini juga. Tinggi kolom g sama, jadi agak mengganggu.

Lha..gimana supaya tinggi kolom2 tsb bisa kompakan alias sama tinggi??

Yuuuuuuuuukkkzzzzzzzzz..................

========UPDATE==========

Untuk contoh penggunaan trick ini, silahkan menuju kesini.

========================

Cari informasi, cari trik..gimana caranya supaya sidebar n kolom posting bisa sama tinggi. Akhirnya nemu juga caranya di blog sang master. Tapi...........

Setelah dicoba, ternyata ada sedikit ganjalan. Kenapa? Bisa c tu sidebar jadi kompakan. Tapi, trick itu digunakan untuk sidebar yang berada dalam 1 wrapper. Jadi g yang kiri kanan kaya punya ayas ni..

Na, gimana supaya blog ayas ini bisa sama tingginya satu sama laen? Setelah utak atik sedikit, Alhamdulillah, berhasil deh....

Ni Ayas tunjukin buat temen2...

Caranya simple banget kok. Easy juga. Namanya juga easyblogtrick.

Sodara cuma perlu copy kode dibawah ini.......


<script type='text/javascript'>
function Sama_Tinggi(){
var mainwrapper = document.getElementById("main-wrapper");
var sidebarwrapper = document.getElementById("sidebar-wrapper");
var sidebar2wrapper = document.getElementById("sidebar2-wrapper");
var content = document.getElementById("content-wrapper");


Tinggimainwrapper = mainwrapper.offsetHeight;
Tinggisidebarwrapper = sidebarwrapper.offsetHeight;
Tinggisidebar2wrapper = sidebar2wrapper.offsetHeight;
Tinggicontent = content.offsetHeight;

TinggiSisa = Tinggicontent - Tinggimainwrapper;
TinggiSisa2 = Tinggicontent - Tinggisidebarwrapper;
TinggiSisa3 = Tinggicontent - Tinggisidebar2wrapper;

mainwrapper.style.paddingBottom = TinggiSisa + "px";
sidebarwrapper.style.paddingBottom = TinggiSisa2 + "px";
sidebar2wrapper.style.paddingBottom = TinggiSisa3 + "px";
}
</script>

Ada beberapa kode yang harus diperhatikan dan DISESUAIKAN dengan template sodara:
  • main-wrapper, adalah id mainwrapper kamu. biasanya tertulis #main-wrapper, tempat dimana kamu posting artikel.
  • sidebar-wrapper, adalah id sidebar pertama kamu. Bisa yang kiri ato kanan. Biasanya tertulis #sidebar-wrapper.
  • sidebar-wrapper, id sidebar kedua sodara. klo ditempat ayas, tertulis #sidebar2-wrapper. Sesuaikan dengan template sodara.
  • content-wrapper, adalah tempat dimana ketiga elemen tersebut (main-wrapper, sidebar1 n sidebar2) berada. Biasanya tertulis #content-wrapper.
Ingat, elemen2 diatas harus sesuai dengan template sodara.

Selanjutnya, paste kode tersebut diatas kode </head>

Lalu ganti kode <body> menjadi <body onload='Sama_Tinggi()'>

Trus disimpen, n preview. Jadi deh..........Keren khan???

Klo ada yang belum berhsil, coba terus n jangan sungkan2 untuk bertanya ke Ayas, barangkali Ayas bisa bantu....

Yang penting berani mencoba..Ups, hampir lupa, download dulu template sodara y....

GAMPANG KOK!!!

13 comments:

  1. wah boleh juga neh infonya, kebetulan gw jg pake temp 3 kolom. thx

    ReplyDelete
  2. WaH boleh dicobah neh... tapi aku wordpress.com

    nggap apa dech siapa tahu nanti bisa diaplikasikan lain kali.

    mau nanya juga ni mas. gimana biar link di alexa bisa ada datanya ya, yang saya rangkingnya ada tapi linknya NO DATA. mohon bimbingannya..
    trims

    ReplyDelete
  3. Seep nich... klo' budhe sekarang kant pake temp 4 kolom trus supaya postingnya ada ditengah gimana dhonk..makasih yach...

    ReplyDelete
  4. Aku udah coba2 tp kok ngak bisa ya.......
    mohon bantuan

    ReplyDelete
  5. tenkyu bos atas share ilmunya, semoga membawa manfaat bagi kita semua, amiiiinnn, halah kaya ustadz aja :D

    ReplyDelete
  6. gila...kamu jenius sekali...saya cari-cari kode supaya 3 kolom bisa sama tinggi. Kode kamu yang paling simpel dan tokcer. di blog lain rumit-rumit dan aneh-aneh (termasuk blogger buster). he..he...very..very good.

    ReplyDelete
  7. mas setelah tak coba kok kolom sebelah kanan malah melorot yach....?
    tp makasih tipsnya

    ReplyDelete
  8. sekalian.........
    mo tanya mas...
    kok postinganq meski udah di buat read more tp tinggi kolomnya menyesuaikan tulisan. mksdnya kl isi tulisannya banyak tinggi kolomnya jg bertambah sehingga ada jarak yg lumayan jauh gt?!
    makasih

    ReplyDelete
  9. @minoriAyah

    1 Kalo dilihat template Anda, kemungkinan sidebar Anda bukan terdiri dari 2, tetapi 4 sidebar. masing2 sidebar (ki & ka) terdapat 2.nah, penggunaan kode diatas hanya berpengaruh pada 2 sidebar saja, sehingga sidebar yang tidak masuk dalam 'rumus', memberikan jarak, sehingga sidebar kanan menjadi melorot.
    2 Coba di cek lagi, mungkin Anda memberikan 2 kode untuk readmore nya pada saat posting (kode 'spanclass=fullpost' nya, sehingga terjadi jarak, dan pada jarak sisa itu tidak ada tulisan terlihat (ter-hidden)

    ReplyDelete
  10. yupz mas aq ngerti sekarang.
    mkasih bgt utk perhatian n jawabannya.
    moga jadi ibadahnya.........
    makasih!!!

    ReplyDelete
  11. Duh,kok gak berhasil ya...Apa kode diatas diganti dengan angka?

    ReplyDelete
  12. super sekali bung..
    Luar Biasa!!
    akhirnya dapet juga disini setelah seharian nyari2, ampek harus trnslate dari bahasa inggris.. :D
    scriptnya berjalan normal di template saya,
    thanks a lot and keep post brade!!

    best regards,
    khairul
    http://tunasweb.com

    ReplyDelete

Klo ada pertanyaan, masukan ato tips yang lebih mudah, koment aja y..Insya Allah Ayas bales.. Thanks all..moga2 bermanfaat

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz