Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Sidebar berada di Kiri dan Kanan

Beberapa waktu yang lampau saya telah memposting bagaimana
cara membuat sidebar baru pada template minima sehingga template tersebut
yang asalnya dua kolom berubah bentuk menjadi tiga kolom. Dari hasil pengamatan
dilihat dari komentar-komentar yang muncul pada postingan tersebut ataupun
ada juga yang melalui shoutbox, mengambarkan kegembiraan para sobat yang telah
berhasil menyulap blognya menjaditiga kolom, selamat dech buat yang sudah sukses.
Namun diantara yang telah puas, ada juga yang masih merasa penasaran dan juga
berkeinginan lebih. Beberapa komentar yang muncul, di antaranya adalah sebagai
berikut :

makasih bro…

aku dah berhasil tapi alangkah bagusnya jika post berada di antara side bar itu
aku pengen yg kayak gitu gimana caranya bro?????

mas gimana klo mo naruh colom posting di tengah diantara sidebar kiri n kanan ????
tolong ya mas…
thx

nambah kolom da bisa, tapi gimana cara nya meletakan side bar di kiri dan kanan sedangkan tempat posting nya berada di tengah-tengan side bar pada templete minima, tolong ya mas..

Rohman (anu kasep) : Hmmmmmmm… gimana ya… ada deeeech… rahasia pokoknya

Pembaca : dasar pelit

Rohman (anu kasep) : Bercanda dhenk




Pembaca : awas kalo ga di kasih tau

Untuk membuat kolom sidebar yang baru dibuat tidaklah terlalu sulit, sobat hanya perlu
menempatkan kode float menjadi di kiri (left) serta penambahan kode padding-right
agar kolom kiri tidak bertabrakan dengan kolom posting. Bingung? sengaja saya buat bingung

Bagi sobat yang berminat untuk menempatkan kolom sidebar di sebelah kiri, sebelum membaca artikel ini
ada baiknya membaca artikel yang di sini terlebih dahulu karena artikel ini merupakan lanjutan dari artikel tersebut,
jika sobat langsung membaca artikel ini, saya khawatir sobat menjadi tambah bingung.

Sebelum memasuki kepada topik bahasan utama, saya sarankan kepada sobat yang mempraktekan
teori yang akan saya tulis sebaiknya bukan pada blog utama, akan tetapi pada blog untuk
percobaan. Ini untuk menghindarkan kejadian yang tidak di inginkan, sayang apabila blog
yang telah di tata rapih menjadi amburadul akibat percobaan.

Baiklah, ayo kita mulai sobat, dalam hal ini saya anggap sobat sudah berhasil membuat kolom baru. Langkah pertama yang harus di ingat adalah jangan sekali-kali memberi tanda conteng pada kotak kecil di samping tulisan
Expand widget Template karena apabila sobat mencontengnya akan keluar kode widget yang sangat ngejelimet.
Jika pada postingan yang lalu saya menuliskan kode seperti ini :


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */


#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Agar hasilnya berbeda dengan yang dulu yaitu kolom yang di buat bukan berada pada sebelah kanan, maka
sobat perlu sedikit mengubah kode yang saya cetak merah menjadi seperti ini :



#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;

word-wrap: break-word;
overflow: hidden;
}


Terlihat pada hurup yang saya cetak biru bahwa yang di ubah hanyalah dua baris kode saja, yang lainnya tidak perlu di ubah.
Jika sudah selesai mengubahnya, jangan lupa untuk menutupnya dengan menekan tombol simpan template.

Langkah selanjutnya adalah menuju ke bagian bawah template, yaitu pada bagian body,
jika dulu saya menyarankan agar kode sidebaru di tempatkan seperti ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>



Maka apabila sidebar baru ingin di tempatkan di sebelah kiri, maka kode sidebar baru harus di pindahkan
di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini :


<div id='sidebarbaru-wrapper'> <!-- perhatikan yang ini -->
<b:section class='sidebar' id='sidebarbaru' preferred='ye'/'>
</div>

<div id='main-wrapper'> <!-- perhatikan yang ini -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai.
Silahkan lihat hasilnya !

Tidak sulitkan sobat? semoga mudah untuk di mengerti. Untuk melihat contoh blog yang mempunyai sidebar di samping kiri dan kanan,
sobat bisa membuktikannya di sini!

7 November 2007 - Posted by | blog tutorial, modifikasi blog, tambah kolom

39 Komentar »

  1. jadi mas, tapi colom t4 posting nya jadinya di left.. gimana klo mo naruh colom posting di tengah diantara sidebar kiri n kanan ????
    tolong ya mas…
    (komentarku kmrn gak dijawab tuh)

    Komentar oleh redblack | 7 November 2007 | Balas

  2. halah..masa sih… justru tutorial ini agar kolom postingnya di tengah

    Komentar oleh rohman | 7 November 2007 | Balas

  3. oOo..
    OK deh, ntar ak coba lagi deh.
    thx ya mas..

    Komentar oleh redblack | 7 November 2007 | Balas

  4. oke aq bisa, thx yach…

    Komentar oleh anyie_ku | 13 November 2007 | Balas

  5. Ciamik tenan, saya sudah berhasil membuat 2 sidebar, Matur nuwun sanget

    Komentar oleh MasakaN JowO | 3 Desember 2007 | Balas

  6. aduh mass!!!! kemaren ak cari seharian pengen bikin yg kayak ginian !!!!!!! makasih mas ! berhasil nih!!,.seneng bgt

    Komentar oleh lamunanku | 10 Desember 2007 | Balas

  7. mas ak baru pertama bikin blog!! sekitar dua hari, truss sambil bikin blog ak liat teruss ni blog,!!! alhasil ….jadi dech!
    wah seneng dech pokoknya.!!!
    makasih yah!!!,

    Komentar oleh lamunanku | 10 Desember 2007 | Balas

  8. oh iyah mas!
    boleh nanya gak mas???
    boleh yah!!
    gini nih dah bisa bikin sidebar kanan kiri
    tp…..heheh, anu mas kurang lebar,
    gimana sih mas biar semuanya bisa kepake,..hehehe gak ada ruangan kosong sebelah kiri ma kanan,…
    heheheh,maklum mas baru pertama bikin, blog2an
    jadi nanyanya agak
    bego,..makasih.

    Komentar oleh lamunanku | 10 Desember 2007 | Balas

  9. hahahah…!!!ak punya pengalaman lucu, asal2an td eh gak taunya
    hahah….gak mau crita ah malu!!!

    Komentar oleh lamunanku | 10 Desember 2007 | Balas

  10. thanks buat ilmunya mas

    Komentar oleh melindarizkiku | 3 Januari 2008 | Balas

  11. Udah bisa mas tapi malah kolom postingnya tabrakan ma kolom yang kiri sementara kolom ke 3 di sebelah kanan kolom posting ga keliatan di view.
    Gimana tu mas…

    Komentar oleh Anonymous | 28 Januari 2008 | Balas

  12. Terimakasih mas Rohman.Setelah “berdarah-darah”.Akhirnya tercapai juga si 3 kolom. Buat yang lain, lebih cermat,lebih teliti dan jangan menyerah!

    Komentar oleh Anonymous | 29 Januari 2008 | Balas

  13. …saya termasuk penggemar anda mas Rohman…It very good lah artikel2nya..kalo ada yang baru2 tolong kirim ya ek amilku…

    wrtikel apik

    Komentar oleh RIZKALINDO | 31 Januari 2008 | Balas

  14. mas, terima kasih, aku berhasil memodifikasi blog aku setelah mempelajari tutorial dari mas. terima kasih banyak. ini blog aku hasil modifikasi:

    http://www.jumpueng.blogspot.com

    Komentar oleh Taufik Al Mubarak | 1 Februari 2008 | Balas

  15. mas, makasih banged! saya sukses! hihihi…

    Komentar oleh anggangelina | 3 Februari 2008 | Balas

  16. kang, q nyoba ganti sidebar jd kiri kanan tp kok jadinya malah kebawah gtu..waduh gmn nich????
    meza86.blogspot.com

    Komentar oleh Must_Zae | 14 Februari 2008 | Balas

  17. Kang, bagaimana caranya menengahkan kolom side dari template yang memang dari sononya sudah tiga. Alias saya sudah dari dulu template saya tiga kolom. Tapi kolom postingnya di pinggir. Agar supaya bisa nengah bagaimana y?

    Komentar oleh FERA LOVE HECTOR | 1 Maret 2008 | Balas

  18. terima kasih mas sukses sih nggak tapi dah nyobain ….. cuman akunya apa yang salah ya jadinya kacau balau
    thank tak coba lagi nanti
    ada contoh yang sukses gak kang

    Komentar oleh TUAN MUDA REDI | 7 Maret 2008 | Balas

  19. ini niihhhhh g cari” baru dapet juga,,, thanks kang,,, walaupunblom saya coba sehh,,,

    BTW: say mau buat TAB download(apasehh istilahnya,,maklum orang baru nihh di blog),, Gimana sehh caranya atau ada di artikel yg mana yaaa?yg saya udah liat download yg nglink gitu mas?

    itulohh mas saya pengenbuat kaya punya mas,, ada HOME, ada pripacy,,dll nahh saya pengen buat kaya gitu gimana yaaa? saya templete yg baru mas

    klo bisa balesnya japri yaaa?dany_kunye@yahoo.com

    http://apayaaaa.blogspot.com

    thanks
    dany kunye

    Komentar oleh PENTING GAK PENTING | 10 April 2008 | Balas

  20. Mas thank you bgt ya. Aku juga dah mencoba dan ternyata berhasil.
    Silahkan jln2 ke blog saya ya. n tolong saran nya. Thx

    Komentar oleh vivi | 23 April 2008 | Balas

  21. WOW, hundred percent helpful

    Komentar oleh Groho | 11 Mei 2008 | Balas

  22. Wah, mau tanya. tu kan untuk template minima. apa klo u/ template laen bisa gak ya?

    Komentar oleh Hanif -Gin- | 13 Mei 2008 | Balas

  23. Wah.. tips yang sangat bagus!
    thx y, n salam kenal.

    Komentar oleh Ot.Ghufron | 5 Juni 2008 | Balas

  24. Salam kenal, tolong bantuin bikin template 3 kolom rounders. Sudah coba berkali-kali tp gagal. Sbg ahlinya sy harap Kang Rohman bisa bantu. Makasih sebelumnya.

    Komentar oleh jajang | 7 Juni 2008 | Balas

  25. Your Blog is so nice!
    I want to do like that..
    Please Back Link.
    ourkrant.blogspot.com team

    Komentar oleh Ochank | 17 Juni 2008 | Balas

  26. Kang Rohman, aku tambah sidebar baru kok gak bisa disimpan ya?&Q$

    Berikut komentarnya;

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type “b:section” must be followed by either attribute specifications, “>” or “/>”.

    TOLONG BANTUANNYA DONG

    Komentar oleh KARMAN | 29 Juni 2008 | Balas

  27. MAKASIHH KANG RAHMAN DAH LAMA AKU BERKELILING MENCARI TRIK SEPERTI INI TUK MEMBAGI MENJADI 3 KOLOM BLOG TAPI NGGA BS DARI SINI SAYA BISA BELAJAR… SEMOGA AMAL KEBAIKANNYA DAPAT DIBALAS ALLAH SWT

    Komentar oleh Gado-Gado | 2 Juli 2008 | Balas

  28. Ass. slm knl Kang Rahman q blogger betul-betul baru n g tau apa2, q mo mnta tlong bagaimana cara nbah kolom baru di kiri di blog q, blog q pakai templeate Tic-tac blue (kayak bola aja zzz hee..)yang harus dirubah yang mana zzzzzzzzz.. tolong za kang. tau bsa lhat blog q n ngasin komentar n bantuan. thx bgt b4 zz Kang.

    Komentar oleh Arif Luaman N | 11 Juli 2008 | Balas

  29. Hatur Thank U Pzn KangRohman q jadi punya tiga kolomnih,ma’lumlah q masih merangkak dlm dunia blogniee,, http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif
    http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

    Komentar oleh Assalamu'alaikum,, | 14 Juli 2008 | Balas

  30. kang rohman saya mau tanya, sayakan membuat sidebar baru, tapi sidebar baru itu munculnya diatas buakan disamping kiri, padahal saya ingin membuat di kiri, mohon diblz yaa kang

    Komentar oleh aldy | 27 Juli 2008 | Balas

  31. mas cra bkin 3 kolom selain minima gimana???????

    Komentar oleh SEBELASipaTIGA | 28 Juli 2008 | Balas

  32. mas mas ni penting!!! q bikin tapi jadinya kacau!!! yang kiri dah sukses tapi yang kanan jadi dibawah postingan, kira2 kenapa yaaa tolooooonnngggg ddbbaallleesss ppliissss!!

    Komentar oleh luminaire | 28 Juli 2008 | Balas

  33. Masssssss, gimana buat background postingan dan kolom pada sidebar…..?pleeeeeeez thx

    Komentar oleh Profil Saya | 31 Juli 2008 | Balas

  34. Aku biasanya cuma kopas aja skript htmlnya mas… Tapi mau coba ah.. n sekalian buat blog baru.. Tapi kapan2. wehehe..🙂

    Komentar oleh EbleH 182 | 7 Agustus 2008 | Balas

  35. mau tanya nih mas
    punya ku dah berhasil tapi kenapa lom ada jaraknya yah (kolom yang disebelah kiri)
    terang kan donk mas

    Komentar oleh xander | 8 Agustus 2008 | Balas

  36. Alhamduliilah dah jadi……. suwun kang! Jan makin tamabh Mak yosssss ae ilmune…. suwun kang!

    Komentar oleh santringenet | 14 Agustus 2008 | Balas

  37. kang maksutnya komentar di CSS ini gimana sihh

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

    Komentar oleh Anasku | 20 Agustus 2008 | Balas

  38. aduh,aku bingung… :((

    Komentar oleh andidanimada | 25 Agustus 2008 | Balas

  39. kang please help, bagaimana menambah sidebar sperti dibawah, ada 3 sidebar (Recent Comments,Blog Tutorial Untuk Pemula,My Twitter, soalnya diblog saya tdk ada #outer-wrapper {

    Komentar oleh Mulyadi | 8 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: