Membuat Sidebar dalam Kotak yang Terpisah-pisah

Kadang kita ingin memodifikasi template blog menjadi lebih trendy dan tidak ketinggalan zaman. Dengan catatan tanpa membebani loading blog tentunya. Banyak cara dan trik optimasi agar blog tampil lebih oke, salah satunya adalah membuat tampilan sidebar dalam kotak yang terpisah-pisah. Rekomendasinya trik blogger ini lebih bagus jika diterapkan pada template yang memiliki 2 (dua) kolom, karena akan kelihatan lebih hidup tanpa harus memikirkan perataan terhadap kolom-kolom elemen halaman sidebar. Tapi tidak menutup kemungkinan pula, apabila template yang mempunyai lebih dari 2 (dua) kolom untuk ikut serta menerapkan trik blogger ini.

Adapun langkah-langkahnya adalah sebagai berikut :
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML.
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari kode CSS sidebar antara <head> ... </head>
.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :
Kode template tiap blog mungkin berbeda tapi cari yang memiliki kemiripan (.sidebar .widget). Atau jika belum ada maka tambahkan kode tersebut.
  • Modifikasi kode .sidebar .widget, seperti dibawah ini.
.sidebar .widget {
background:#fff;
border:1px solid #6E6E6E;
margin:0 0 1.5em;
padding:0.5em;
}


Artinya setiap widget yang kamu tambahkan dalam elemen sidebar akan dipisahkan (margin:0 0 1.5em;) sebesar 1,5em ke bawah. Kotak sidebar tersebut berlatar putih (#fff) dan memiliki garis tepi berwarna abu-abu (#6E6E6E), sedangkan jarak teks dengan tepi kotak (padding:0.5em;) sebesar 0.5em.
  • Kamu bisa membuat kotak sidebar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.
  • Jangan lupa di simpan


Selamat membuat kotak sidebar terpisah-pisah...

31 komentar untuk “Membuat Sidebar dalam Kotak yang Terpisah-pisah”

  1. Artikelnya bagus semua, tapi mang belum sy baca sih. sy baca di rmh biar ga lebih seksama. ma kasih ya...

    BalasHapus
  2. maksudnya biar lebih seksama...maaf atas kekeliruannya di atas

    BalasHapus
  3. mas mw tanya buat ngilangin garis tepi pada header gimana y??? helppppppp udah dicoba liat diCSSnya malah ikut yang buat sidebar widget huhuhuh

    BalasHapus
  4. to Ad4m San: Kelihatannya letak title dan description blog di template blog Adam ada di sidebar. Sebab elemen headernya di CSS beratribut "none"=tidak ditampilkan, kodenya seperti ini :
    #header-wrapper {
    Display:none;
    }
    Jadi waktu utak-atik sidebar title ama description blog juga ikut berubah.

    BalasHapus
  5. trus punya solisu gak mas gmn?? pusing dr tadi ngutak-ngatik gak bisa2 huheuhue :((

    BalasHapus
  6. entar OB lihat dulu blognya, agar ngga salah...

    BalasHapus
  7. okeh mas ditunggu y heheheh~~~

    BalasHapus
  8. to Ad4m San: Coba cari kode berikut.

    <div id='sidebar-wrapper'>
    <div class='sidebar section' id='header'><div class='widget Header' id='Header1'>

    Kemudian ganti kode di bawah <div id='sidebar-wrapper'> dengan kode <div class='header' id='header'><div class='widget Header' id='Header1'>
    Agar ngga merubah struktur blog Adam.

    BalasHapus
  9. Ingat di bawahnya kode <div id='sidebar-wrapper'>

    BalasHapus
  10. mas udah dicoba kok ga bisa y malah keluar pesan eror
    gini mas

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "div" must be terminated by the matching end-tag "

    padahal yang udah sesuai petunjuk mas hhuhu
    apanya yang salah y?? hhuhuhuhu pusinggggggg

    BalasHapus
  11. to Ad4m San: yang diganti hanya kode
    'sidebar section' dengan kode 'header' dalam kode :
    <div class='sidebar section' id='header'><div class='widget Header' id='Header1'>
    Kode lainnya tetap.

    Sebab pesan error tersebut menyatakan bahwa : Adam tidak menutup tag <div> dengan </div>.

    BalasHapus
  12. keren abis..thanks,bagus banget artikelnya n bermnfaat bangte buat aq. Klo mas di blog ini ada iklan adsense,atau sejenisnya, pasti aku klik...hitung-hitung komisi buat infonya..") thanks ya..good luck

    opi

    BalasHapus
  13. horeeeeeeee berhasil mas thanks beratttttt :x

    BalasHapus
  14. to bantu (opi): thanks, opi.

    to Ad4m San: sama-sama, Adam.

    BalasHapus
  15. g'bsa ni mas.gak mgerti tuch da cpk utk atk ni kmptr

    BalasHapus
  16. to Yumaza: kelihatannya template yumaza pakai url (http://.....) jadi ngga in dengan trik blogger ini

    BalasHapus
  17. terimakasih infonya sobat OB...semoga yang lain juga bisa memanfaatkan ini ya...

    salam
    bunda
    computers learning Blog

    BalasHapus
  18. kalo pengen tampilan sidebar kek punya bos OB gimana? khan fleksibel tuh bisa 2 2 kesamping,bisa juga 1.
    thanx:D

    BalasHapus
  19. dan masing2 elemen di sidebar mempunyai kotak sendiri2,thanx

    BalasHapus
  20. aduh binguuuung koq kode2 yg mas OB ksih tw gx da ya d template sya??heeeelp me,,,

    BalasHapus
  21. tambah kode .sidebar .widget {
    background:#fff;
    border:1px solid #6E6E6E;
    margin:0 0 1.5em;
    padding:0.5em;
    }
    tpatnya dmna y om?? :((

    BalasHapus
  22. Siip..terimakasih tutorialnya.

    BalasHapus
  23. ih gmana donk, gg bisa.. cba lihat fantasyofhardy.blogspot.com

    BalasHapus
  24. thanks bro.. ditungu tautan balik ya x(

    BalasHapus