Monday, July 27, 2009

Memodifikasi template dua kolom
Menjadi tiga kolom

Beberapa waktu yang lalu saat Blog Sekedar Komentar ini baru saja dibuka (kayak toko aja, dibuka), blog ini memilih template yang sederhana ini, dengan back ground warna putih dan header berwarna orange, bukan tanpa alasan tapi memang beralasan juga alias gak bisa buat template yang macem-macem yang pebuh warna-warni disana sini, sudah mencoba untuk mencari template yang keren di beberapa penyedia template gratis tapi tetap saja tidak menemukan jodoh yang memikat hati ini. Akhirnya karena desperate, Tukang komen mengambil salah satu template yang disediakan blogger ini.

Namun pada sebuah komentar pada postingan yang Tom Hanks ada sebuah pertanyaan dari salah seorang teman kita:

Quinie: "................................... btw, templatenya simple, template bawaan blogger, tapi kok 3 kolom?!......
gimana caranya bisa dijadiin 3 kolom gini? ajarin dong

Sebenarnya saya bukan ahli yang kayak gini-ginian (buat dan modif template) sebenernya ada yang lebih ahli seperti Cak Rio misalnya, tapi tak apalah, akan saya coba untuk sedikit membagi pengetahuan saya yang masih minim tentang template ini.

OK, seperti template yang saya pakai, saya akan menjadikan template sand dollar ini sebagai bahan percobaan untuk dimodifikasi menjadi tiga kolom. Pertama-tama masuk ke Customize, trus pilih edit HTML, maka akan keluar kode HTML dari template yang anda pakai.

Langkah selanjutnya cari kode seperti ini:


@media all {
div#main {
float:$startSide;
width:60%;
padding-top:30px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:1em;
border-$startSide:dotted 1px $bordercolor;
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 */
}
div#sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 20%;
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 */
}
}

Jika ingin letak postingan disebelah kiri, ganti float pada div#main (berwarna biru) menjadi $endside.



Lalu copy dan paste dibawahnya bagian div#sidebar, dan ganti namanya menjadi div#new_sidebar sehingga menjadi seperti dibawah ini:



div#new_sidebar {
margin-top:20px;
margin-$endSide:0px;
margin-bottom:0px;
margin-$startSide:0;
padding:0px;
text-align:$startSide;
float: $startSide;
width: 20%;
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 */
}
}

* Width(berwarna merah) adalah lebar kolom yang dikehendaki, dan hasil penjumlahan ketiganya seharusnya 100%.

Setelah itu scroll jauh kebawah pada kode HTML template, dan temukan kode sebagai berikut:


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

Setelah itu sekali lagi copy dan pastekan dibawahnya, dan ganti div id='sidebar-wrapper' menjadi div id='new_sidebar-wrapper' sehingga menjadi seperti dibawah:




<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

<div id='new_sidebar-wrapper'>
<b:section class='sidebar' id='new_sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

Lalu untuk pembagian letak widgetnya, harus dibagi dari ketiga kode yang saya beri warna biru, ungu dan orange itu, ada yang diletakkan di "sidebar-wrapper atau di new_sidebar-wrapper. Jangan sampai di kedua bagian (sidebar-wrapper dan new_sidebar-wrapper) ada widget yang sama, karena akan ditolak.
Demikian modifikasi yang Tukang komen lakukan dengan template blogger 2 kolom menjadi 3 kolom, semoga mudah dipahami dan bermanfaat.

27 comments:

  1. wah,,keren nih tipsnya bang
    semngatttt untuk hari senin

    ReplyDelete
  2. Tutorialnya keren nih bang,...
    Mohon pencerahan di template baru saya.

    ReplyDelete
  3. Info yang mantap. Terimakasih sudah membaginya disini sobat.

    ReplyDelete
  4. Informasi di seni selalu bermanfaat buat kita semua
    ayo praktekkan....

    ReplyDelete
  5. Hahahaha... koq ada namaku, kita ini sama Kang, sama-sama belajar.

    Sekedar saran, ngasih tutornya agak susah diPahami, kalo yg baca ini bener2 nyubie, pasti dianya akan kebingungan dan tambah pusing.
    Tapi salut, bagus juga bagi2 pengalamannya.

    ReplyDelete
  6. infonya beguna banget kang...thank ya

    ReplyDelete
  7. waaaahhh makasih mas trie........bisa di coba neh, khan aku 2 kolom.....heheeh

    ReplyDelete
  8. Berhubung mw ganti template, jadi biarin aja dulu deh template yg sekarang...
    Lagian emg udah 3 kolom sih :D

    ReplyDelete
  9. Wah ..info yang bermanfaat nih ... perlu dicoba.
    Thanks

    ReplyDelete
  10. we..lha makasih infonya kang , biasanya aq cuman pake2 aja gak tahu modifnya .

    ReplyDelete
  11. . busyet dah......ribet amat....

    . klo dpake buat tmplate gratisan bsa gk y?

    ReplyDelete
  12. Wah dapat ilmu baru disini... Makasih ya..
    Sebagai hadiahnya, ambil award dari tempatku ya ?? Ditunggu...

    ReplyDelete
  13. Sudah pernah nyoba, tapi gagal. N skarang gak ada waktu. kapan2 kalau senggang pingin nyoba lagi

    ReplyDelete
  14. wow keren buanget,......triknya...mantab kang, aku menunggu yang 3 kolomnya yah

    ReplyDelete
  15. perlu di terapkan nih ilmunya makasih bos, tak gendong kemana mana pokonya nih ilmunya

    ReplyDelete
  16. Enakan 2 kolom. Karna template ku gak co2k yg 3 kolom!!

    ReplyDelete
  17. hehehe... langsung di ulas. Makasih ya... nanti akan segera di coba kan.
    Btw, berarti ini balik dulu ke template klasik ya?
    *nanya lagih*

    ReplyDelete
  18. @qinie: pada dasarnya semua template punya sidebar kan? jadi bisa juga diterapkan di semua template, asal tahu peletakannya saja.

    ReplyDelete
  19. Salam kenal ya mas..salam silaturrahmi.

    ReplyDelete
  20. Yeah..., PRof jauh tertinggal neh..., saat semua blogger dah mulai otak dan atk template, PRof masih bersembunyi di bawah ketiak mbak Amanda bloggerbuster......

    ReplyDelete
  21. makasih sharingnya bro..mau di coba ah.Dulu saya pernah nyoba,tapi terus loadingnya berat, jadi kembali lagi ke klasik

    ReplyDelete
  22. pusing nih. mending ambil aja contoh yg ada di btemplate. udah kesana? bagus2 lho.

    ReplyDelete

Monggo... silahkan mengkomentari si Tukang Komen disini, mau banyolan, kritikan, saran atau apapun juga.
Matur Nuwun...