Cara menambah 2 kolom di bawah sidebar

Selasa, 01 September 2009

Trik Blogger - Wuuihh, akhirnya sempat buat tulisan baru soal trik blogger. Yang pasti, setiap postingan saya mengenai trik blogger ini adalah hasil dari pengalaman pribadi dalam mengutak-atik HTML template sampe ancur. Mungkin banyak dari Anda yang ingin memperkaya ruang penempatan widget dalam blog Anda. Salah satunya adalah dengan menambah sidebar (kolom samping). Banyak sudah tutorial mengenai ini, namun ada hal yang menarik bagi saya untuk berbagi (bagi yang belum tahu tentunya…he..3x). Oke, langsung saja. Seperti biasa, login ke account blogger anda, dan masuk ke halaman Edit HTML (untuk yang satu ini ngk perlu di expand, ntar malah pusing lihat kode2 HTML yang njelimet!he..3x). Setelah itu, cari kode #sidebar-wrapper, atau lengkapnya seperti kode di bawah ini :

#sidebar-wrapper {width: 300px;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 */}
Kode di atas adalah kode dasar dari template minima bawaan blogger. Kode tersebut kita anggap sebagai kode utama sidebar anda dimana kita akan menambahkan 2 kolom dibawahnya nanti. Setelah meneukan kode di atas, masukkan kode di bawah ini setelah akhir kode di atas atau biasanya diakhiri dengan tanda }:

#sidebar1-wrapper {width: 145px;float:right;
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 */}
#sidebar2-wrapper {width: 145px;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 */}

Oke, penambahan kode css sudah selesai, sekarang tinggal memasukkan kode di badian bodynya. Catatan penting yang harus diingat adalah, sidebar yang ditambahkan oleh seseorang mungkin saya tidak beraturan jika postingan kita buka, dimana jika postingan kita pendek atau sendikit, terkadang sidebar baru yang kita buat justru berada di bawah kolom posting. Perhatikan ilustrasi berikut ini :



Cari terlebih dahulu kode sidebar utama anda dibawah ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>

Setelah ketemu, letakkan kode sidebar1 dan sidebar2 dibawah ini tepat di bawah kode di atas :

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

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

Maka susunannya lengkapnya akan terlihat seperti ini :

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

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

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

Selesai, silahkan lihat hasilnya.

Catatan : Sesuaikan ukuran sidebar 1 dan 2 anda dengan sidebar utama. Umpamakan sidebar utama anda adalah 300, maka ukuran sidebar 1 dan 2 masing2 145. Kenapa bukan 150, karena 10 sisanya adalah jarak antara kedua sidebar. Setelah itu, perhatikan kode </div> yang merupakan kode terakhir di atas atau kode penutup sidebar utama. Kode tersebut harus ditempatkan dibagian paling akhir kode sidebar setelah sidebar1 dan sidebar2.

38 komentar:

ernest mengatakan...

mapir nih maas,salam kenal ..web bulukku menantimu

Herdiansyah Hamzah mengatakan...

Ernest : Trims dah mampir. Salam kenal balik buat mas. Sy udh berkunjung ke web mas, nice....

JALOE mengatakan...

upss.. dah ganti lagi boss.. menurut sy dah cool neh..

tapi bagi kita yg suka ngedit blog.. pingin na nambah-nambah dan akhir na bosan..

hehehhe.. mungkin penyakit kita sama mas..

Herdiansyah Hamzah mengatakan...

Jaloee : Iya kang, pokoke tangan ngk mau diam buat ngutak2ik template. Maklum, blogger pemula yang pengen belajar!he..3x.

nana^site mengatakan...

lam kenal ya mas..
perdana berkunjung kesini..
nice posting n blognya..
^_^

Herdiansyah Hamzah mengatakan...

Nana : thanks dah mampir ya. Senang berkenalan dengan anda. Best Regards,-

Zipeans mengatakan...

wah... mantep nih tutorialnya... salam kenal juga.. nie dari blog sebelah... hhe...^_^

nana^site mengatakan...

ass...mas herdi..
ada award buat mas,, dicek ya diblog aku.
makasiyyyy^_^

Herdiansyah Hamzah mengatakan...

Wss. wah, trims ya award-ya. Semoga bisa memotivasi diriku yang belakangan ini kurang produktif menulis. warm regards buat nana...

beehonz mengatakan...

waaw..
bagus..bagus..
q suka ini..

kunjungan balik ia..
:)

gdenarayana mengatakan...

wah mantap nie tricknya :)

ow ada kang jaloe juga yah :D

Herdiansyah Hamzah mengatakan...

Trims dah mampir mas gde....

IMABA SUrabaya mengatakan...

Salam kenal MAz...

mau tanya, kalo mo buat menu di bagian footer kayak blog ini gimana ya?
Mohon bantuannnya. Kalo bisa diposting di blog anda juga....

Made Gelgel mengatakan...

saya pelajarin dulu mas!

salam kenal

Herdiansyah Hamzah mengatakan...

Imaba Surabaya : Trims dah mampir ya. Untuk footer blog ini, sebenarnya widget versi beta (percobaan) kepunyaan wibiya. Sudah saya posting mengenai cara registrasinya kok. Semoga bermanfaat ya!

Made gelgel : Senang berkenalan dengan Anda. sering-sering mampir ya!he...3x. salam bloggerholic...

pakar bisnis online mengatakan...

makasih postingannya

Herdiansyah Hamzah mengatakan...

@ Pakar bisnis online : sama2 mas...

cewek cantik mengatakan...

makasih banget tutorialnnya...sana sini cari tutorial ini eeh dapet nya malah ga sengaja...sekali tanx

blog max mengatakan...
Komentar ini telah dihapus oleh pengarang.
asep canda mengatakan...

keren triknya sob makasih ya
Salam kenal

positive thinker mengatakan...

sy cari kok gak ada y kodex....?

Herdiansyah Hamzah mengatakan...

@Cewek cantik : sama2, semoga bermanfaat...
@Blog max : kok comment-nya dihapus ya???
@Asep canda : sama2, salam kenal balik mas.....
Positive thinker : kodex yg mana ya??? Mungkin sy bisa bantu.....

mas iwan mengatakan...

ikutan nimbrung bos...

ROOSTER mengatakan...

Salam kenal mas.saya sedikit mawu tanya nih,template saya dibuat di artisteer dan sudah 2 kolom,tapi saya ingin menambah 2 kolom lagi di bawah side dengan ukuran yang lebih kecil.apakah bisa.. ini blog saya http://rooster-1.blogspot.com

Ratasoe mengatakan...

thanks bgt infox mas..ta cb dl..

Digital Think mengatakan...

Thanks infonya

Darma Saputra mengatakan...

terimakasih, sangat bermanfaat.. balas kunjungan ya.... http://www.darma-saputra.co.cc/ ----> bujang riau

edi on hobby mengatakan...

Thanks infonya, sy jg mau nambah kolom sprti itu tp sy ga nemuin kode2 'sidebar-wrapper' di blog sy, gimana ya?

dedi isnaini dot com mengatakan...

thanks sob...lgsg bisa....

Herdiansyah Hamzah mengatakan...

@Mas Iwan : monggo mas.....
@Rooster : bisa aja mas. Umumnya, ukuran kolom paling kecil adalah 120px. Jika ditambahkan jarak sekitar 10px, maka minimal ukuran kolom yg kita butuhkan adalah 130px.
@Ratasoe + Digital think : Sama2 sob....
@Darma : oke sob, akan sy kunjungi....
@Edi on hobby : setiap template memiliki penamaan sidebar yg berbeda2. klo kode itu ngk ada, coba cari kode sidebar aja sob.
@Dedi isnaini : mantap sob. Selamat bereksperimen....

Full Software Collextions mengatakan...

salam kenal...keep posting!

asep rustandi mengatakan...

makasih atas ilmunya, semoga sukses selalu dan senantiasa berbagi ilmu.....

karkoen mengatakan...

jos tenan mas.saluuuth!!

valiant mengatakan...

asyik kalo dicoba neeh.. copy template dulu ah, besok2 mo coba juga. mampir mas ka blog parahyangan saya :)

ofikz mengatakan...

thankz you bnget mas,akhirnya bisa jg stelah ksana kmari nyoba trik ini,emang jodohnya ama mas nih...he e

ofikz mengatakan...

ralat..
maksudnya kesana kemari bkin multi kolom kyak gini ga` berhasil2..

mixed.uni.cc >> free blog directory , Blog Directory , free submit web blog , Blog Submit , Blog Links , free submit article , blog article , Blog Marketing , blog search , blog referace , blog walk mengatakan...

thankz you bnget mas,akhirnya bisa jg stelah ksana kmari nyoba trik ini

sf_arya mengatakan...

cipppp trims

Posting Komentar

Terima kasih telah menyempatkan waktu untuk berkunjung di BLOG saya yang katro ini. Biasakanlah berkomentar setelah Anda membaca artikel. But No Spam, No Porn....OK Bro!!!