Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Trik Bikin Sidebar Sama Tinggi

Rupanya salah satu sobat kita ini sangat gigih untuk memperjuangkan keingintahuannya, betapa tidak?
sebut saja namanya adalah stevanus pemilik dari blog yang beralamat di http://yamaha-sumatera-barat.blogspot.com/,
tidak cukup hanya menggunakan Shout box yang ada di sidebar, kotak komentar pun beliau manfaatkan untuk menyampaikan keinginannya.
Apa gerangan yang beliau inginkan? beliau ini mempunyai keinginan agar di buatkan tutorial mengenai bagaimana cara membuat kedua sidebarnya
sama tinggi (tidak tinggi sebelah) karena menurut beliau sidebar pada blog miliknya kurang sedap untuk di pandang mata
akibat tinggi sidebarnya tidak rata.

Tadinya saya masih tidak ingin memposting tentang trik ini, cuma karena pertanyaan tersebut sudah di ajukan beberapa kali maka
akhirnya saya posting juga deh, sedikit jaga gengsi… takut di bilang ga mampu membuat tutorial tentang masalah ini

Dulu… saya pernah memposting bagaimana cara membuat kolom tambahan pada template minima agar template tersebut bisa
menjadi 3 kolom, bagi yang mau iseng-iseng bisa membacanya di sini !
dan saya pun pernah menulis tips tentang bagaimana cara memberi warna pada sidebar minima agar tidak sama
dengan kolom posting, tips ini saya posting di sini !
masalah apa yang timbul akibat sobat membaca kedua tutorial tersebut, mari kita telusuri. Silahkan sobat perhatikan
gambar layout dari tutorial menambah kolom baru pada template minima :

layout tiga kolom

Jika seandainya template tersebut dibuat dengan satu warna, katakanlah warna putih semua, atau biru semua, maka tentunya
tidak akan ada masalah yang timbul. Masalah yang timbul adalah apabila sobat memberikan warna yang berbeda pada kolom sidebar,
kolom tersebut tidak akan pernah sama tingginya. Jika kita perhatikan gambar layout di atas, maka dapat diketahui bahwa
kolom yang tercipta ada 3 buah kolom (yang kolom header tidak saya hitung) yaitu kolom posting, sidebar kiri, dan sidebar kanan.
Formasi kolom yang seperti itu, apabila kolom sidebar di beri warna yang berbeda dengan warna kolom posting, maka sudah pasti antara kolom
posting, sedebar kiri dan kanan akan selalu berbeda tingginya. Trus… bagaimana cara mengatasinya? untuk mengatasi masalah ini,
sobat harus mengubah formasi kolom-kolom tersebut, solusi yang saya tawarkan adalah buatlah dua buah kolom utama yaitu kolom
posting dan kolom sidebar. kemudian didalam kolom sidebar kita sisipkan dua buah kolom baru. Makin bingung?….. silahkan perhatikan ilustrasi gambar berikut :

layout dua kolom dengan sub kolom

Dari gambar di atas terlihat bahwa ada dua buah kolom utama yaitu kolom posting yang saya beri warna biru, dan satu lagi adalah
kolom sidebar yang saya beri warna kuning. Didalam kolom sidebar (yang warna kuning) saya buatkan dua buah sub kolom diberi nama sidebar kiri
dan sidebar kanan dengan ilustrasi warna hijau. Nah itu tadi merupakan ilustrasi awal saja agar mudah di pahami, teknik selanjutnya
yang harus di lakukan adalah kita harus men-setting antara warna sidebar (kolom utama sidebar), dengan sub kolom sidebar yaitu sidebar kiri, serta sidebar kanan menjadi satu warna yang sama
persis sehingga mata pengunjung akan tertipu seolah-olah ada dua sidebar yang bisa sama tinggi, coba perhatikan ilustrasi yang saya
berikan ini :

layout dua kolom dengan sub kolom dengan warna yang sama

Kelemahan dari teknik di atas adalah warna background sidebar akan berbeda tingginya dengan warna background kolom posting. Untuk mengatasi
masalah ini, kita bisa menggunakan teknik memberi gambar background pada kolom outer wrapper (jika ada kesempatan akan saya posting
tentang teknik ini), atau bisa juga menggunakan Javascript. javascript yang saya gunakan ini adalah hasil karya dari mas Didats Triadi,
thanks mas didats atas scriptnya nih, lumayan akhirnya bisa juga untuk bahan postingan saya.

Untuk ilustrasi sepertinya sudah cukup, semoga dapat lebih mempermudah untuk di fahami.
Sekarang tiba saatnya untuk melakukan sebuah aksi, yaitu mempraktekan apa yang saya ilustrasikan tadi.
Pada project kali ini saya akan memodifikasi template minima menjadi multi kolom, layout yang saya buat
seperti ini :

layout multi kolom

Layout yang seperti gambar di atas banyak diminati oleh para blogger karena mempunyai sidebar yang unik
yaitu sidebar atas mempunyai nilai lebar yang lebih besar dari nilai lebar kedua kolom sidebar lainnya.
Kelamaan… di mulai donk praktek bikin templatenyaaaaaaaaaaaaaaa…….

Baiklah.. kita mulai sekarang. Pertama silahkan sobat buat dulu satu buah blog baru dan pilihlah template minima
untuk bahan percobaan kita sekarang, kemudian posting beberapa artikel agar postingan tidak kosong, terserah isinya
apa saja yang penting ada isinya. Sudah belum? ayo cepetan keburu kebelet pipis nih … yupsssss… dimulai…

Langkah pertama :

  1. Silahkan login dulu di blogger
  2. Klik Layout.
  3. Klik menu Edit HTML.
  4. Silahkan cari kode yang mirip dengan kode berikut :

  5. /* Variable definitions
    ====================
    <Variable name="bgcolor" description="Page Background Color"
    type="color" default="#fff" value="#ffffff">
    <Variable name="textcolor" description="Text Color"
    type="color" default="#333" value="#333333">

  6. Sisipkan kode berikut diantara deretan kode di atas (kode ini sebagai variable warna untuk sidebar).

  7. <Variable name="sidebarbgcolor" description="Sidebar background Color"
    type="color" default="#e6e6e6" value="#e6e6e6">

  8. Geser sedikit ke bagian bawah, cari kode berrikut :

  9. #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

  10. Hapus kode di atas, lalu ganti dengan yang di bawah ini :
  11. #header-wrapper {
    width:890px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

  12. Agak geser lagi ke bawah, cari kode barikut :

  13. /* Outer-Wrapper
    ------------------------------------------ */
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    float: left;
    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: 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 */
    }

  14. Gantilah kode yang di atas dengan kode di bawah ini :

  15. /* Outer-Wrapper
    --------------------------------------- */
    #outer-wrapper {
    width: 890px;
    margin:0 auto;
    padding:10px;
    text-align:left;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 467px;
    float: left;
    margin:0px 7px 0px 0px;
    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: right;
    margin:0;
    padding: 7px;
    background:$sidebarbgcolor;
    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 */
    }

    #upsidebar {

    width: 380px;
    float: left;
    margin:0;
    padding: 0;
    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 */
    }

    #leftsidebar{
    width: 190px;
    float: left;
    margin:0px 10px 0px 0px;
    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 */
    }

     

    #rightsidebar {
    width: 200px;
    float: left;
    margin:0px 5px 0px 0px;
    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 */
    }

  16. Ayo geser lagi sedikit ke arah bawah, cari kode berikut :
  17. /* Footer
    ---------------------------------------- */
    #footer {
    width:660px;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    letter-spacing:.1em;
    text-align: left;
    }

  18. Gantilah kode di atas tadi dengan kode berikut :
  19. /* Footer
    ---------------------------------------- */
    #footer {
    width:890px;
    clear:both;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    letter-spacing:.1em;
    text-align: left;
    }

  20. Copy paste Javascript di bawah ini tepat di atas kode </head>

  21. <script type='text/javascript'>
    //<![CDATA[
    //Visit http://didats.net/ for original code
    function Sama_Tinggi(){
    var mainwrapper = document.getElementById("main-wrapper");
    var sidebarwrapper = document.getElementById("sidebar-wrapper");

    Tinggimainwrapper = mainwrapper.offsetHeight;
    Tinggisidebarwrapper = sidebarwrapper.offsetHeight;

    TinggiSisa = Tinggimainwrapper - Tinggisidebarwrapper;

    sidebarwrapper.style.paddingBottom = TinggiSisa + "px";
    }
    //]]>
    </script>

  22. Cari kode berikut :

  23. <body>

  24. Ganti kode di atas dengan kode di bawah ini :

  25. <body onload='Sama_Tinggi()'>

  26. Tuju bagian bawah, cari kode berikut :
  27. <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
    </b:section>
    </div>

  28. Gantilah kode di atas dengan kode berikut ini :
  29. <div id='sidebar-wrapper'>

    <b:section class='sidebar' id='upsidebar' preferred='yes'>

    <b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
    </b:section>

    <b:section class='sidebar' id='leftsidebar' preferred='yes'>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    </b:section>

    <b:section class='sidebar' id='rightsidebar' preferred='yes'/>

    </div>

  30. Klik tombol Simpan Template
  31. Selesai.

Langkah pertama akhirnya sudah bisa dilewati dengan sangat berat. Sobat sudah merasa lelah? minum kopi dulu deh biar
agak rileks ( eh kopi buat aku nya mana nih )

Sudah agak rileks sekarang? siap untuk melanjutkan kembali perjuangannya? silahkan untuk mengikuti kembali langkah berikut :

Langkah kedua :

  1. Klik menu Elemen Halaman
  2. Pada Elemen Halaman, panel yang terwujud akan jadi seperti ini.
  3. Silahkan buat beeberapa lemen baru agar sidebar menjadi ada isi nya.
  4. Silahkan lihat hasilnya, semoga memuaskan
  5. Selesai.

Bagaimana pak stevanus? akhirnya tulisan ini saya buat juga nih.

Semoga berhasil.

Iklan

21 November 2007 - Posted by | blog tutorial, modifikasi blog, tambah kolom

16 Komentar »

  1. Kalo blog yg sudah ada di modif kayak gitu..content2 nya bakal ilang yah bang?? OIA moga2 cepet2 dapet kerja yah bang :0 sayah juga pingin ke bandung ..tp lom dapet job/order disana …ekekekeke :))

    Komentar oleh Architectaria -feat- A M A | 22 November 2007 | Balas

  2. Hebat banget Mas Rahman, Belajar dari mana and udah berapa tahun maen kaya ginian?? Btw mau nanya neh Internet Gratis ada apa gak seh?? Kok banyak banget yang gemborin Internet gratis…. Tips dan Sarannya DONK

    Komentar oleh Faizal Amri | 22 November 2007 | Balas

  3. Maaf Mas Rohman, saya sudah coba tapi kayaknya ngak berhasil tu. Yang penting thank atas postingan nya.

    Komentar oleh Stevanus Sucipto | 23 November 2007 | Balas

  4. sip banget nech mas…!:):)
    akan saya coba praktekin………

    Komentar oleh ihsan | 24 November 2007 | Balas

  5. Assalamu’alaikum, bang.. Saya juga sudah coba, seperti pak stevanus, tapi kok malah jadinya susun kebawah yah? apanya yang salah yah? mohon hub. saya di jihadfiisabilillah@gmail.com , terimakasih sblmnya..

    Komentar oleh lifeandtrueluv | 29 November 2007 | Balas

  6. Salam …great to see again!

    Masalah saya pun seperti lifeandtrueluv, jadinya kebawah..masih spt 2 kolom…bagaimana ye

    http://jie-test.blogspot.com

    Komentar oleh Jie | 30 November 2007 | Balas

  7. Setelah saya lihat di kompi saya, blog percobaan sobat tidak melorot, apa masalah resolusi monitornya kali ye, padahal sudah saya coba pake resolusi 800px tetep tidak melorot. he..he..he.. ikutan bingung juga nih..

    Komentar oleh rohman | 4 Desember 2007 | Balas

  8. susah jugak ya bila kod tidak dijumpai

    Komentar oleh taiko | 4 Desember 2007 | Balas

  9. terima kasih mas, sudah saya praktekkan di adakahyangmau.blogspot.com

    Komentar oleh JAWIR | 8 Desember 2007 | Balas

  10. Mas, beberapa kali saya coba ikut panduan, untuk menambah kolom agar blog saya, sama rata…..akhirnya gagal terus…tolong…? terima kasih

    Komentar oleh JB2FISHINGCLUB | 23 Desember 2007 | Balas

  11. halo saya saya mau komentar nie saya da coba bikin sidebar sama tinggi tapi malah hancur brantakan gi mana ceritanya toong dong?

    Komentar oleh "oya " | 4 Januari 2008 | Balas

  12. mas udah saya coba berhasil, tp bisa ga kalo sidebar sama tinggi ratanya di kanan kiri diantara main bar. jadi side barnya ada di antara postingan tp sama tinggi. gimana ya mas.

    plese help me
    gent-xeost.blogspot.com

    Komentar oleh Gent Xeost 4 Ever | 5 Januari 2008 | Balas

  13. Kang Makasih nih… ini yang saya cari, tapi mohon maaf kasus saya kok saya seperti pak stevanus dan lifeandtrueluv. side kanan nggak muncul-muncul. mohon ya KAng follow upnya.. tks.

    Komentar oleh MUCHAMMAD HERU | 30 Januari 2008 | Balas

  14. assalamu’alaykum…saya masih beginner neh dalam hal nge-blog…tapi untuk kasus yang ada di postingan ini, saya udah teliti dan praktekkan…
    1. sidebarnya molor ke bawah (postingan agak ke atas)..diakibatkan karena ukuran main wrappernya kegedean…coba diperkecil 10px aja…margin rightnya juga diperkecil. alhamdulillah…aku begadang untuk beginian…dan berhasil!!!!!
    2. sidebar kiri dan kanan tidak sejajar (yang kanan molor ke bawa), karena ukuran marginnya kegedean, ato ukuran sidebar kiri/kanan yang kegedean..coba dikecilkan salah satu sidebarnya…

    demikian pengalaman saya…seneng banget rasanya bisa nyoba utak atik templete…yihaa…a..
    ops…nih postingan kang rohman udah lama banget ya…baru sekarang aku kasih koment…
    ah…aku ndak peduli..aku belajar nge-blog juga baru-baru ini…makasih kang rohman…

    syahuri
    YM: syahur_alghifari

    Komentar oleh Syahuri | 16 Maret 2008 | Balas

  15. kang, saya udah coba utak-atik templatenya, koq tetep ga berhasil juga ya biar side bar-nya sama tinggi? apa yang salah ya? mohon bantuannya.

    Komentar oleh Eka Prasetya | 26 Mei 2008 | Balas

  16. Kang Rohman 380 di bagi dua berapa? he..he.. kalau hasilnya 190 berarti

    #leftsidebar{
    width: 190px;
    }

    #rightsidebar {
    width: 190px;

    gitu ya..?

    Mudah-mudahan ini juga bisa membantu ya kang kabuuuurrrr….

    Komentar oleh Eko Priyanto | 31 Mei 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: