Cara Membagi Sidebar Menjadi 2 kolom

Posted by Herman on Friday, February 27, 2009 32 comments

Postingan ini saya buat untuk menjawab pertanyaan dari mas panji. Beliau pernah menanya saya melalui shoutbox, "Kang Herman ajari buat side bar dua kolom kayak blog sampeyan ya.. tolong kirim ke email saya : (mail). thx". Karena saya merasa teman-teman yang lain juga mungkin membutuhkan maka saya mempostingnya disini.

Terus terang sudah lama saya tidak pernah utak-atik template jadi dah rada-rada lupa. Tapi karena ada permintaan dari mas panji maka terpaksa buka buku lagi deh. sengihnampakgigi Semoga tutorial ini bermanfaat terutama untuk mas panji.

Ok mari kita mulai..

1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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 */
}
Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.

Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.

Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing-masing kolom akan kita beri margin sebesar 10px agar terdapat ruang jarak. Sehingga sekarang lebar masing2 sidebar menjadi 117px.

Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css.

5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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-wrapper2 {
background-color: #f6f6f6;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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 */
}
6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini

#sidebar-wrapper {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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-wrapper2 {
background-color: #f6f6f6;
width:117px;
float:$endSide;
padding:0;
margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
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 */
}
7. Setelah itu, cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>
8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.

9. Copy kode yang berwarna biru diatas lalu letakkan dibawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Herman Blog' type='Feed'/>
</b:section>
</div>

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
10. Jika sudah klik Save Template.
11. Selesai. Klik Page Element untuk melihat hasilnya.


Selamat mencoba..


Recent Posts:

32 comments

panji said... 27 February, 2009
Wuih mantab urainnya.. Makasih buanget mas Herman .. akan aku coba semoga ndak ada kesulitan.. salam hormat dan sukses selalu.
Herman said... 27 February, 2009
ok mas. Semoga berhasil. Jika mengalami kesulitan silahkan tinggalkan komentar anda disini. nanti akan saya bantu. thanks
Nina said... 02 March, 2009
mas herman,,tq juga nih...aku juga lagi nyari2..pengen tau membuat 2 kolom widget ..
herman said... 02 March, 2009
Nina: sama2. semoga membantu :)
nusa ardi said... 17 August, 2009
makasih yaaa,,,,tips anda membuat blog saya menjadi cantik,,,,nusaardi.blogspot.com
Bang Limbad said... 20 November, 2009
Akhirnya aku bisa juga....terima kasih mas herman.
Sharetotheworld said... 07 January, 2010
kok ndak bisa mas..yg ada malah tulisan gini

Kami tidak dapat menyimpan template Anda.
Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Lebih dari satu bagian ditemukan dengan id: sidebar. ID Bagian haruslah unik
Rossi Agung Putra said... 05 April, 2010
:))
khalimuntoha said... 15 May, 2010
wah lengkap yah tutorial-y, mas herman blog hermanblogtips.blogspot.com mungkin akan awak jadiken bahan pembelajaran bwt awak yg masih newbie.
makasih buanged
kdrama said... 20 May, 2010
desain blognya keren,
tutorialnya mantap.thanks

kdrama
laptop computers reviews
healthy tips
cellular mobile phones
japanese music chord
free comic download
korean movies ost said... 20 May, 2010
kdrama
laptop computers reviews
healthy tips
cellular mobile phones
japanese music chord
free comic download
soge said... 30 May, 2010
wah mas kok blog ku di edit sama tutorial mas kok tulisansanya kode XML ga bisa ditutup kesalahan pada tag div 8-}
Tembang Lawas said... 24 July, 2010
wah makasih tutorialnya bang herman, ini yang lagi saya cari, langsung saya praktekan di blog Tembang Lawas saya :-)
Tips Kecantikan said... 28 August, 2010
yes berhasil.. kalo dibawahnya mau ditambah lagi selebar sebelumnya gimana gan?? tolong bls k blog sy
Anonymous said... 15 October, 2010
ka herman kalo menambah sidebar yang 2 itu jadi lebi bisa ga?
dan gunanya sidebar2 kolom apa ya?
Agus Rahmad Pratama said... 25 January, 2011
Nambah ilmu nih, Thanks. berguna untuk blogku.
Bener ternyata, klu tiap template punya code sendiri.
admin@Anti Spam said... 19 February, 2011
maksih banget mas tutorialnya. Jadi semangat lagi nih :D
Cayun said... 23 June, 2011
thanks infonya gan.. akhirnya saya nemu disni
^_^
Naughtyric said... 03 August, 2011
Makasih tip nya om,
sukses di blog ane :))
Andi Darmawijaya said... 21 October, 2011
makasih y om herman, langsung ke TKP http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif
Ndunk said... 10 November, 2011
Terima kasih banyak Gan . . . Materi yg Agan sampaikan sangat mendetail . . . Ane udah praktek di blogg Ane sndiri dan hasilnya sangat memuaskan.

http://anakbrb.blogspot.com
Toro_arts gallery said... 12 November, 2011
Thanks bang nyari2 Tutor dicoba gag bisa semua..tapi tutor yg ini bisa
Toro-Arts Gallery
Xin Xin said... 25 December, 2011
uda di coba..mantap ya

http://kowandy.blogspot.com
Rudy Hartono said... 13 March, 2012
nice info untuk personalisasi tampilan blok kita
AbduGreen said... 20 April, 2012
mantab bang.. makasih infonya... udah berhasil... emmmhh. mampir ke blog saya bang....
BLOG ISWANDI said... 22 September, 2012
Thank's infonya mas.
juanx criex said... 17 October, 2012
wah perlu di coba gan makasih ya ilmunya
dhino prima said... 12 November, 2012
gan,, kenapa di blog saya gak ada kode yang mau di cari itu ya?
http://www.informasiunik.com
Artikel Muslim said... 16 November, 2012
Salam kenal sob.. ditunggu kunbalnx
Inspirasi Menulis
Arminaven Gayo said... 21 November, 2012
demonya ada gak mas
Hriza muh said... 01 December, 2012
thanks infonya mas
saya terapkan diblog saya
thx
arifz kocak said... 06 January, 2013
thanks sob kunjungan pertama nih

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment