Membuat kolom baru di blogspot

Bagaimana cara membuat atau menambahkan kolom baru di blogspot? Pada tutorial ringan ini saya akan coba sedikit memberikan konsep yang sangat sederhana bagaimana cara membuat atau menambahkan kolom baru di blogspot, baik itu membuat 2 kolom menjadi 3 kolom maupun 4 kolom atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan konsep dasar membuat kolom baru di blogspot. Saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Seperti biasa saya menggunakan contoh dengan template minima.Konsep dasar untuk membuat kolom baru :
  1. Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
  2. Membuat definisi kolom baru pada section 2 (CSS)
  3. Peletakan tag div baru pada section 3 (HTML)  yang sudah dideklarasikan di bagian section 2 (CSS)
  4. Simpan dan lihat hasilnya
Saya akan memberikan penjelasan pada masing-masing poin di atas, saya harapkan sobat blogger dapat mengikuti dengan seksama, baca perlahan-lahan dan pahami setiap petunjuknya.


Mengubah  template 2 kolom menjadi 3 kolom
Poin pertama dilakukan adalah mengubah nilai outer-wrapper, main-wrapper dan sidebar-wrapper, pada contoh ini saya menggunakan template minima standart dengan kode CSS defaultnya :


#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 */
}


Perhatikan nilai yang di cetak tebal yang nantinya nilai tersebut akan kita rubah. Dapat dilihat pada kode tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.

Poin kedua adalah menambahkan elemen kolom baru dengan membuat nilai CSSnya, dan ubah juga nilai width outer-wrapper, main-wrapper dan sidebar-wrappernya sehingga akan seperti ini kode yang baru :

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

#main-wrapper {
  width: 400px;
  margin-left: 20px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper {
  width: 150px;
 float: $endSide;  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper2 {
  width: 150px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}  


Perhatikan juga nilai width yang di cetak tebal , yang pada umumnya penjumlahan main-wrapper dan sidebar-wrapper tidak melebihi nilai outer-wrapper ( Width Outer > Main + Sidebar), sisa kekurangan nilai widthnya umumnya di gunakan untuk margin dan padding agar nantinya tidak berdempetan masing-masing container. Sedangkan untuk container baru di tandai dengan warna biru. Nilai 750px tidak harus mutlak, sobat bisa mengubah nilai tersebut dan sesuaikan dengan kebutuhan sobat dan jangan lupa juga mengubah nilai width main dan sidebarnya.
NB : Biasanya saya mencopy kode  #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left

Poin yang ketiga membuat tag div sidebar baru di bagian section 3 (HTML), sebelumnya saya akan kasih lihat default kode template  minima 2 kolom (no expand widget templates) :

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Kemudian kita akan memasukkan tag div sidebar baru ke dalam structur templatenya  :

<div id='sidebar-wrapper2'>
      <b:section class='sidebar' id='sidebar2'>
</b:section>
</div>
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Perhatikan text yang berwarna biru yang merupakan tag div sidebar barunya, sedangkan untuk yang di highlight hijau adalah nilai section class yang mempunyai arti  tampillan maupun widget yang di dalam container baru tersebut mengikuti aturan class sidebar seperti nilai background, h2, text dan lain-lain yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .sidebar2 {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='sidebar2' id='sidebar2'>, sedangkan untuk text yang di highlight merah merupakan id yang harus unik atau berbeda dengan id lainnya.
Pada poin ini sebenarnya sobat blogger bisa merubah layout template yang nantinya akan saya bahas lebih dalam lagi pada tutorial berikutnya.

Poin yang keempat adalah simpan hasil pekerjaan sobat dan lihat hasilnya jika terdapat kesalahan pada layoutnya seperti misalnya sidebar baru posisinya jatuh ke bawah, yang perlu di lakukan adalah mengatur nilai width ataupun nilai margin dan paddingnya. Gunakan prinsip trial and error! Semoga berhasil mengubah layout 2 kolom template sobat blogger menjadi 3 kolom atau lebih dengan konsep dasar di atas.
NB : Jangan lupa mengubah nilai width header dan footernya umumnya mengikuti nilai width outer

65 comments:

  1. Menjenguk Mochal dulu ..

    Setiap menjenguk disini pasti ada hal-hal baru yang bisa dipelajari, sekali-sekali bikinin abang template napa chal ..hue he

    ReplyDelete
  2. barengan abang kesini

    ReplyDelete
  3. ngerti2....tp yang zoom,bloom aq acak-acak lagi....

    ReplyDelete
  4. setelah menyimak dan membaca dengan sabar, penjelasan mochal sangat jelas gampang masuk diotak dodol ku...huehue

    seperti yang mochal bilang trial and error.....anna coba deh .....good posting bro!

    ReplyDelete
  5. Sip...lansung praktek

    SOBAT TAHU APA YANG SAYA MAU....

    ReplyDelete
  6. Jangan lupa posting cara membuat kolom Recent post..seperti di simple minima

    ReplyDelete
  7. Di copy dulu buat praktek ...
    Ditunggu posting2 berikutnya

    ReplyDelete
  8. wah hebat kang.....ini yang aku cari, ijin untuk pembelajaran yah kang, sukses yah kang dengan hal barunya......

    ReplyDelete
  9. kang kalo misalnya, sudah jadi 3, terus di postnya yang atas itu post terbaru terus dibawahnya kayak nyang sekarang saya pake bagaimana caranya kang

    ReplyDelete
  10. hehehe... mirip templateku hayooo.... mana nih.. dah jadi blm???

    ReplyDelete
  11. aku blm bisa edit2 wp terlalu jauh nih... kalo blogspot agak bisa dikit2 lah...

    ReplyDelete
  12. waduh, makasih manget nih, ngasih penyegaran,
    betul-betul segar nih...
    boleh dicontek to mas. boleh, boleh...
    dah kujawab sendiri...
    kekekeke....

    ReplyDelete
  13. iye kayaknya artikel ini selalu menarik untuk di baca2...

    ReplyDelete
  14. Huehuehuehue...... mas Subagya keren euy. Langsung kasih pengertian. Ga cuman tutorial tanpa pengertian.... hueuehueheuheu....

    Jadi makin pede nih tuk bikin template sendiri... :D

    ReplyDelete
  15. saya mau CSS, Contek Sana Sini ekkekekeke keren juga istilahnya kang jaloee

    ReplyDelete
  16. iya nih trik jitu buat para publisher adsense...

    biar bisa nambah banyak2 kolom....

    btw, feed mochal kok telat ya nongol di bloglist..

    ReplyDelete
  17. Lo emang ga ada matinya bro,..
    *ga nyambung.....*

    ReplyDelete
  18. Ok infonya! makasih pak!

    ReplyDelete
  19. mantap tutorial... saya jadikan studi banding nantinya...

    ReplyDelete
  20. nice tutorial... thank's my friend

    ReplyDelete
  21. wah, bermanfaat banget. jadi mo ubah nih. tks ya

    ReplyDelete
  22. You mentioned the word responsibility. Your government is directly responsible for the many deaths in Iraq, Afghanistan, Palestine, Lebanon and in many other parts of the world. Obama cannot change the world but we will try to change US policy. If you keep on supporting Israel, do not leave Iraq and Afghanistan we will do the followings: we will kill your ambassadors and their families, ceos of your companies and their families and other prominent personalities and then we will tell their families to sue the US government. No suicide bombers but we will employ snipers to kill those targets. Like in Iraq we will have our own ace, king, queen, jack etc. It will like candid camera, it can happen anytime and in any part of the world. Just wait for the surprises.

    ReplyDelete
  23. wah ini saya tunggu2...saya pengen juga membuat templete keren kayak mas...thank's y

    ReplyDelete
  24. mantaBB nie tutornya
    oia bang kalo kolomnya sama-sama ada di sebelah kanan seperti template di blog sayah udah pernah di bahas belom?

    ReplyDelete
  25. @ Ar_eros > akan saya bahas nanti bro :p tunggu aja

    ReplyDelete
  26. pelan2 tp pasti, dikit demi sedikit, ternyata semakin banyak ilmu yg saya dapatkan dari blog ini, makasih banyak ya kang, tutornya byk membantu saya memahami struktur blog.

    ReplyDelete
  27. Mas Mochal, mau saya kasih job, nggak. Saya lagi pusing utak-atik template buat blog baru saya. Saya mau order aja dah.

    ReplyDelete
  28. tutornya bagus nih bro, cocok bagi yang pengen belajar merubah layout blog mereka.

    sukses bro :)

    ReplyDelete
  29. Siip Boos huebat
    http://saterlat.blogspot.com

    ReplyDelete
  30. weh bisa neh panduannya wat nti kalo bikin blog yg baru, kalo yg sekarang tu hasil karya teman wis gak mau tak ganggu gugat, hehehe tingkyu

    ReplyDelete
  31. haa....haa...haaaa! pasti si Boss ini lagi bingung nulis apa lagi....!

    Tutorialnya yang berat-berat dulu baru yang ringan.
    Klo boleh minta 1 permintaan tolong donk tutorialnya mengenai pemakaian file javascript untuk edit HTML. Bingung saya mau beli buku ehhh duitnya buat keperluan yang lain he... hee...heee...!(harap maklum masih warga negara indonesia yang penuh dengan ..........)

    ReplyDelete
  32. udah ketinggalan jauh nih pelajarannya,tapi gpp yang penting bisa menyerap informasi yang berharga ini.makasih boss

    ReplyDelete
  33. Bos numpang naya nich , tadi saya udah ngetes speed...kira2 maknya gimana nich Bos

    kayaknya blog saya udah mulai berat , widget apa yang harus saya buang...?

    Domain name Size Load Time Average Speed per KB

    1 aneukagamaceh.blogspot.com/ 274.87 KB 1.43 seconds 0.01 seconds

    2 subagya.blogspot.com/ 185.36 KB 12.45 seconds 0.07 seconds

    3 www.yusaindera.com/ 141.46 KB 0.22 seconds 0 seconds

    4 bangbaka6000.blogspot.com/ 63.65 KB 0.13 seconds 0 seconds

    Bos penjelasannya ini gimana...?

    ReplyDelete
  34. @ baka > sebenarnya sih yang bagus itu di bawah 100kb, karena biasa pengguna dial up bisa mengaksesnya, tapi kalau pengguna speedy misalnya tidak begitu masalah, tapi kan ga da salahnya kita antipasi.
    salah satu caranya bisa compress CSSnya memakai tool webs atau mengurangi widget yang kira-kira bang baka tidak perlu, atau juga minimal di halaman depan postingannya 2 post, kurangin juga pemakain javascript mudah-mudahan bisa membantu mempercepat loading blog

    ReplyDelete
  35. Huh...pantas blog gw berat banget...
    tadi sich gw udah buang 3 macam widget cuma turun dari 274 menjadi 266.

    Thanks banget pembelajarannya Suhu

    ReplyDelete
  36. Bos...Template yang ini kapan diluncurkan ke pasaran ( yang Bos gunakan sekarang )...
    kayaknya nantang banget dan unik ...belum ada yang model gini di belantara blogspot.

    pasti udach pada nunggu di luncurkan

    Oh ya untuk Simple magazine minima banyak yang makek di belantara blogspot dan banyak juga yang promosiin....saya seing jumpa waktu blogwalking.

    sukses ya

    ReplyDelete
  37. @ baka > huehuehuehue kayanya yang ini ga free dah bang ... maklum dah mulai matre nigh :p

    ReplyDelete
  38. Wah ternyata bisa ya seperti itu? Makasih bang atas infonya.

    ReplyDelete
  39. keren bgt tutorialnya boz :)

    ReplyDelete
  40. aduh ruwet........... kog sulit sih...

    ku puyeng ne....

    but thanks...

    ReplyDelete
  41. aduh bisa lang sung di tampilin kode blog 3 kolom yang langsung jadi aja ya.... ku gak mudeng-mudeng neh....

    tampilin kode lengkapnya tapi lom ada apa-apanya gitu lohh.. kan lebih enak

    ReplyDelete
  42. posting ini yang ana cari2 boss... akhirnya ketemu juga.... thanks banget yach... langsung praktek nih...
    Oh yach.. kalo untuk buat kolom login buat member kita di blog gimana ya mas... thanks banget yach tutorialnya.......

    ReplyDelete
  43. wah jadi tambah bingung nich, tp Ok bos infonya

    ReplyDelete
  44. tutorialnya gampang banget dan cepet, kenapa nggak dari kemarin aku nyasar kesini ya, bang...

    ReplyDelete
  45. Salam.Ok nih tipsnya. lgs ai cobain ya. Sukses

    ReplyDelete
  46. info yang mantab bos.. pengin juga belajar cara membuat template..biar template di blog menjadi aku banget.. thanks ifonya

    ReplyDelete
  47. Sayang saya pengguna WP, tapi bagaimanapun postingannya menarik Pak, bermanfaat bagi blogspot mania. salam

    ReplyDelete
  48. salam kenal
    sangat bermanfaat bang, sukses ya.
    terima kasih

    ReplyDelete
  49. wah mantab... infonya... blog saya jadi tiga kolom sekarang

    ReplyDelete
  50. wah luar biasa infonya bagus tapi aku mash bingung... ntar berkunjung lagi dh

    ReplyDelete
  51. Mantap gan, ini saya juga mau nyoba nambah kolom dibawah header

    ReplyDelete
  52. wah mantap ni sob.. patut dcoba!!

    ReplyDelete
  53. Pren..., q mo nanya-nanya ne ! kode outer-wrapper,main-wrapper, n side-wrapper tu di blogq g ada. Theme blogq Lazy Day designed by Padd IT Solutions. Sedikit masukannya aja pren..! Maklum masih pemula. Thank's..

    ReplyDelete
  54. @arusbudi : setiap template memang berbeda-beda penamaan untuk outer, main dan side wrapper. Tergantung si pembuat template kang.

    ReplyDelete
  55. Saya juga menggunakan WP untuk blog utama saya. Tapi saya masih memanage beberapa blogspot untuk materi postingan yang ga kecakup dengan blog utama. Jadi, posting ini sangat menarik dan bermanfaat bagi saya.. Terima kasih..

    ReplyDelete
  56. Thanks buat tutorialnya... Thanks buat tutorialnya...

    ReplyDelete
  57. Meskipun susah dan masih belum menemukan celah tapi saya akan terus mencobanya.

    ReplyDelete