Cara Membagi 2 Kolom Sidebar blog

Cara membagi 2 kolom sidebar blog atau cara membagi kolom sidebar blog menjadi 2...?! bingung juga sih kasih judul postingan ini. Tapi saya yakin anda pun sudah tahu dengan maksud judul postingan diatas. Postingan kali ini seputar otak atik template blog. Jika pada postingan terdahulu saya tulis tentang bagaimana cara memperlebar halaman blog, maka kali ini saya akan coba berbagi tentang cara membagi 2 kolom sidebar blog atau menambahkan kolom di sidebar blog. Cara ini sudah sering saya aplikasikan di template default blog minima. Tapi walaupun demikian, masih tetap bisa diaplikasikan di template blog lain karena intinya sama saja. Sebelum mulai membahas mengenai cara membagi 2 kolom sidebar blog, ada baiknya jika anda memperlebar dulu kolom sidebar blog anda. Karena jika kolom sidebar blog anda kecil, maka kalo di bagi 2 akan menjadi tambah kecil. Oleh karena itu, anda harus memperlebar dulu sidebar blog anda. Untuk cara memperlebarnya, anda bisa baca di postingan saya tentang bagaimana cara memperlebar halaman blog. Nah..kalo sekiranya lebar kolom sidebar blog anda sudah cukup, maka saatnya untuk membagi 2 kolom sidebar tersebut. Silahkan simak langkah - langkahnya : 1. Proses editing kode css Setelah login di blogger, langsung masuk ke menu edit html dan tidak usah kasih tanda centang pada kolom expand template widget. Selanjutnya, cari kode css seperti ini :
#sidebar-wrapper { width: 190px; float: $endSide; word-wrap: break-word; overflow: hidden; }
tidak harus sama sih, intinya cari kode css untuk membuat sidebar. Jika pada kode diatas yaitu #sidebar-wrapper. Kemudian liat berapa jumlah width-nya, jika pada kode diatas width-nya adalah 190px. Nah..logikanya jika ingin di bagi 2, maka jumlah width sidebar yang pertama harus dibagi 2. Misal..pada kode di atas width-nya 190px. Maka untuk membaginya tinggal 190px : 2 sehingga lebar masing - masing kolom sidebar adalah 95px. Memang betul, tapi ingat kita harus ngasih jarak antara sidebar yang ke-1 dengan yang ke-2 supaya tidak berdempetan. Bagaimana caranya..?! sebelum membagi 2, kurangi dulu sesuai dengan jarak yang di inginkan. Misal...saya mau kasih jaraknya 20px, maka lebar sidebar yang ke-1 menjadi 190px - 20px dan hasilnya 170px. Nah..baru setelah itu dibagi 2, sehingga lebar masing - masing sidebar menjadi 85px. Setelah kita menentukan lebar masing - masing sidebar, selanjutnya tinggal mendeklarasikannya di kode css. caranya....copy paste kode sidebar yang pertama menjadi 2 dan ubah namanya menjadi #sidebar2-wrapper. Misal..untuk kode diatas menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal width: 190px; float: $endSide; word-wrap: break-word; overflow: hidden; } #sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste) width: 190px; float: $endSide; word-wrap: break-word; overflow: hidden; }
Selanjutnya, ubah width (lebar) masing - masing sidebar seperti yang telah dibahas tadi menjadi 75px. Sehingga hasilnya menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal width: 75px; float: $endSide; word-wrap: break-word; overflow: hidden; } #sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste) width: 75px; float: $endSide; word-wrap: break-word; overflow: hidden; }
Langkah yang terakhir untuk proses editting kode css yaitu menambahkan jarak antara 2 kolom sidebar tersebut. Caranya, tambahkan di kode css #sidebar2-wrapper berupa perintah untuk pendeklarasian jarak, yaitu margin. Sehingga hasilnya seperti ini :
#sidebar-wrapper { --> kode sidebar awal width: 75px; float: $endSide; word-wrap: break-word; overflow: hidden; } #sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste) width: 75px; float: $endSide; word-wrap: break-word; overflow: hidden; margin-right: 20px; }
2. Aplikasi di kode html Nah..untuk proses editting kode css sudah selesai. Kemudian saatnya untuk mengaplikasikan kode css tersebut di kode html blog. caranya..cari kode html seperti ini dan fokuskan pad text yang berwarna hijau saja. Karena untuk yang berwarna merah tiap template pasti berbeda:
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/> <b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/> </b:section> </div>
Jika sudah ketemu, copy paste text yang berwarna hijau di bawah kode html tersebut. Kemudian rubah type id-nya menjadi sidebar2. Maka hasilnya :
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/> <b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/> </b:section> </div> <div id='sidebar2-wrapper'> <b:section class='sidebar' id='sidebar2' preferred='yes'> </b:section> </div>
Awas..jangan sampe salah. Jika sudah selesai silahkan klik dulu pratinjau / preview. Apabila hasilnya sudah bagus baru di save. Tapi...apabila masih ada error atau kesalahan, klik bersihkan edit / clear edit, kemudian ulangi langkahnya dari awal. Waduh..cape juga ya ngetik banyak gini. Yaa..mudah2an bisa dimengerti dan tidak ada kesalahan dalam aplikasinya. Jika ada pertanyaan, silahkan bertanya di kolom komentar ya... Dah ngantuk nih...tidur dulu ah........

45 komentar:

  1. siap om.udah saya save dulu.makasih om

    BalasHapus
  2. mas, saya koq ga bisa yha..???? hasilnya malah sidebar nya jadi kliatan stengah aj??
    tlong djelasin lagi yha mas....:-)

    BalasHapus
  3. mas blog aq kan wordpress gmn caranya spy bs kayak blogger nambah kolom sidebar ???

    mohon pencerahannya yah...

    BalasHapus
  4. mau coba ach...biar tambah keren blog gw

    BalasHapus
  5. mau baca lagi ah... biar hafall...
    thanks bro..

    BalasHapus
  6. gaada nih layoutnya gimana dong?

    BalasHapus
  7. bagus..baguss..
    info yg sangat bermanfaat nih.
    hebat mizwar.saya mudah2an saya bisa seperti anda.

    BalasHapus
  8. kepinginnya sih saya bisa ngacak-ngacak template,..biar seperti sih boss,..tapi saya tidak punya ilmunya begitu,...kejadiannya pernah template jadi error,..

    BalasHapus
  9. pengen cb tapi takut, w pernah ngalamin otak atik ampe error

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. Kang , kok jadinya dibawah main header bukan dibawah sidebar,??

    kaya di tempat saya... http://www.catatangis.blogspot.com/

    BalasHapus
  12. Trims atas informasinya. Sangat membantu. Trims ya.

    BalasHapus
  13. bingung pas bagian nge bagi2 kolom itu , blog ak jadi dudul gt wkwk , berantakan . .

    BalasHapus
  14. kalo caranya membagi label menjad i 2 kolom gmana??

    NS:
    U comment I follow

    BalasHapus
  15. Gile tutorialnya mantabs Bro, ntar gw cb aplikasi di blog gw lah, trus lu check ya dah bagus blom hasilnya

    BalasHapus
  16. Makasih tutorialnya sangat membantu sekali bagi yang awam seperti saya ini..^_^..

    BalasHapus
  17. makasih om............
    ntar dicoba ni
    sekali lagi makasih ni om

    BalasHapus
  18. teng yu tutornya ya, om, salam kenal nih!

    BalasHapus
  19. thanks bos postingan ini yang saya cari.....salam kenal aja deh...

    BalasHapus
  20. Hebat euy !
    Info yg sangat berguna.
    Berbagi kan gak ada ruginya,ya kan?
    Thanks atas infonya

    BalasHapus
  21. thanks buanget yua massss............

    BalasHapus
  22. Menarik sekali dan berguna... makasih banget infonya...

    BalasHapus
  23. thx infonya....sederhana dan tepat guna alis gak pusing nerapinnya...

    BalasHapus
  24. Halloo...
    Terimakasih Mas atas infonya dan salam buat semua teman-teman Blogger, hahahaha, Jangan lupa, kalau ada waktu jalan-jalan sebentar ke blog Bujang Riau http://www.darma-saputra.co.cc. terimakasih ...

    BalasHapus
  25. tanks mas...dah ku coba bisa..alhamdulillah..

    BalasHapus
  26. bolak balik dibaca tetap aja masih kebingungan, masih tetap trial error method..

    BalasHapus
  27. Boss kalo menampilkan Menu blogger asli di template baru gimana caranya, coz W coba nyari2 di artikel2 blogspot tmn2 ga pernah dapat ni....Thx Infonya ya...bocah2ndeso@gmail.com

    BalasHapus
  28. Wah akhirnya nemu juga tutorialnya, mkasih Bang langsung dipraktekin di blog Tembang Lawas saya :-)

    BalasHapus
  29. di wordpress mau jg donk caranya!!!

    BalasHapus
  30. kok gak bisa ya malah tetap kleuarnya satu

    BalasHapus
  31. mas ko di template saya ga ada yang sesuai css nya??
    sperti ini :

    #sidebar-ads {
    width:1000px;
    margin-bottom:5px;
    float:right;
    background:transparent;
    padding:10px;
    }
    .ads-sidebar{float:left; margin:0pt; padding:0pt}

    #sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}
    #sidebar-ads ul li ul li{border:0}
    #sidebar-ads .ads-sidebar ul{background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt; padding:10px 0pt 10px 2px; width:800px}
    #sidebar-ads .ads-sidebar ul li{display:inline; list-style-type:none; margin:0pt; padding:0pt}
    #sidebar-ads .ads-sidebar ul li a:hover{border-bottom:none; list-style-type:none}

    .ads-sidebar ul{margin:0px; padding:0px}
    .ads-sidebar ul li a{float:left}
    .ads-sidebar img{margin:0px 0px 5px 5px; border:1px solid #CCC; padding:2px}
    .ads-sidebar img:hover{border:1px solid #999}

    apa karena saya make tenplate yg disediakan?
    mohon bantuannya

    http://manssizz.blogspot.com

    BalasHapus
  32. sangat berguna info nya... makasih sudah berbagi..
    saya coba ya..

    http://article-compilation.blogspot.com

    BalasHapus

blogger