cara menyusun imej pada sidebar

Saya ada menerima pertanyaan dari rakan rakan blogger bagaimana nak buat susunan pada blog agar Nampak kemas dan tersusun. .Misalnya kita membuat tukar link tapi bannernya tidak sama saiz  dan jika diletakkan sampai ada yang terkeluar dari sidebar.Bila keadaan jadi mcm ni tentunya sukar untuk kita menyusunnya. dan sudah tentu nampak tak kemas kerana ada yg ketepi dan ketengah.Jadi bagaimana kita hendak membuatnya supaya sama saiz.

Jadi disini saya ingin berkongsi bagaimana hendak menyusun imej pada sidebar agar saiznya sama lebar dan sama tingginya
Contoh Keadaan  susunan pada sidebar seperti dibawah .bahagian penghujung tidak sama dan sebaris sahaja.



Sebenarnya boleh jimat ruang lagi dengan buat cara berikut;
Contoh ini bila kita nak letak button macam diatas biasa kita akan dapat kod seperti ini:

 <!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" /></a><!-- End Backlink Code -->

Kita Cuma perlu tambah kod untuk tinggi(height) dan  lebar(width) seperti ini:

<!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a><!-- End Backlink Code -->

Border “0” bermakna tiada border ,boleh letak nilai jika hendak letak border disekeliling

Supaya kedudukanya berada ditengah tengah tambahkan kod  seperti ini:

<center>
<!-- Start Backlink Code --><a target="_blank" href="http://weblinkexchange.ownpeg.com/" title="Web Link Exchange"><img alt="Web Link Exchange" src="http://weblinkexchange.ownpeg.com/images/backlink.gif" border="0" height="15" width="60" /></a><!-- End Backlink Code -->
Untuk kod button /imej seterusnya letak disini…
………….
…………
</center>

Untuk letak dua baris kena sesuaikan lebarnya sahaja.Bila ruang dan saiz kena akan jadi baris seterusnya.Bila terlalu panjang akan ia akan turun kebawah.

Supaya nampak tersusun lagi letaklah dalam border:

 <div style="width: 140px; height: 220px; border: 1px solid;  padding: 2px; margin: 5px 0pt 0pt;">

Letak kod untuk imej disini

</div>


atau pun buat table disekelilingnya.Cara membuatnya ada saya terangkan dalam tutorial sebelum ini.

Atau boleh juga guna garisan seperti  dibawah ini untuk memisahkan kandungan pada sidebar
Dengan menggunakan kod ini:

<hr color=”#AC58FA”/>








Kod warna boleh ditukar mengikut kesesuaian.

Catat Ulasan

23 Comments:

suffer8zine berkata...
terima kasih atas kunjungan

nice! http://goo.gl/TOwP

Chenk Rahman berkata...
terima kasih atas kunjungan

Keren sob...
Lam kenal, From: Chenk Rahman

yahaya berkata...
terima kasih atas kunjungan

@Chenk Rahmanterima kasih atas komen.dtg lagi ye..

kiterkitikitu berkata...
terima kasih atas kunjungan

menarik :)

si biskut berkata...
terima kasih atas kunjungan

hmm..ok gak macam nie.

suzie rahman berkata...
terima kasih atas kunjungan

nice one..must try.hihi

Agus_ajah berkata...
terima kasih atas kunjungan

bagus ini..
baru tahu ternyata ada turotnya
thx kawan

Zaer!! berkata...
terima kasih atas kunjungan

Yeah! Belum puas lagi carik tutorial kat sini.hehe.Thanks bro.Sangat berguna pada blog yang nak nampak kemas dalam penyusunan sesuatu widget.hehehe.;-)

AngahSayang2314 berkata...
terima kasih atas kunjungan

singgah 4llow uuu

jom tukar2 link

wah angah tengok tersusun rapat tue heheh cantik2

yahaya berkata...
terima kasih atas kunjungan

terima kasih semua atas komen yang diberi,moga memberi manfaat pada semua

Zaer!! berkata...
terima kasih atas kunjungan

salam bro yahya..mana SB??adess

Avenged7volt berkata...
terima kasih atas kunjungan

baru kini ku tahu...

..:: k i n a k O y u @ m a m a ' a D a m ' ::.. berkata...
terima kasih atas kunjungan

terima kasih kOngsi

Akram Razali berkata...
terima kasih atas kunjungan

best

geekz36 berkata...
terima kasih atas kunjungan

kalau nak buat imej tersebut animated macam mana ye?

yahaya berkata...
terima kasih atas kunjungan

@geekz36
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><img src="alamat url gambar"></marquee>

deqla manjew berkata...
terima kasih atas kunjungan

slm, camne pulak nk bg isi atau gmbr2 kat sidebar ke tgh ek?

yahaya berkata...
terima kasih atas kunjungan

@deqla manjew
<center>kod imej yg nak dimasukkan </center>

deqla manjew berkata...
terima kasih atas kunjungan

tp.. itu kalo kod,, kalo gmbr2 pulak camne nk centerkan?

yahaya berkata...
terima kasih atas kunjungan

@deqla manjewsama saja caranya nya cuma letak kod <center>

hamzah berkata...
terima kasih atas kunjungan

assalam sudara, boleh tak terangkan mcm mna nk tukar templat... n mcm mna nk daptkan kot html setelah download... bleh x trngkan secra datail.. hrap sngt

hamzah berkata...
terima kasih atas kunjungan

asalam sudar bleh x tlong ajrkan mcm mna nk tkar templat mcm saudra...
dan tlong trngkan sdkit mcm mna nk dptkan kot html setlah mndownload template tersbut.... hrap sngat

yahaya berkata...
terima kasih atas kunjungan

@hamzahw/salam...ada tutorial cara tukar template disini.....http://teknikbuatblog.blogspot.com/2011/03/membuat-backup-dan-menukar-template.html.
template blogger boleh didapati cuba google template blogger.kebiasaannya template akan dizip jadi kita perlu unzip dahulu ..