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...
Teknik Buat Blog

nice! http://goo.gl/TOwP

Chenk Rahman berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

kiterkitikitu berkata...
Teknik Buat Blog

menarik :)

si biskut berkata...
Teknik Buat Blog

hmm..ok gak macam nie.

suzie rahman berkata...
Teknik Buat Blog

nice one..must try.hihi

Agus_ajah berkata...
Teknik Buat Blog

bagus ini..
baru tahu ternyata ada turotnya
thx kawan

Zaer!! berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

singgah 4llow uuu

jom tukar2 link

wah angah tengok tersusun rapat tue heheh cantik2

yahaya berkata...
Teknik Buat Blog

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

Zaer!! berkata...
Teknik Buat Blog

salam bro yahya..mana SB??adess

Avenged7volt berkata...
Teknik Buat Blog

baru kini ku tahu...

..:: k i n a k O y u @ m a m a ' a D a m ' ::.. berkata...
Teknik Buat Blog

terima kasih kOngsi

Akram Razali berkata...
Teknik Buat Blog

best

geekz36 berkata...
Teknik Buat Blog

kalau nak buat imej tersebut animated macam mana ye?

yahaya berkata...
Teknik Buat Blog

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

deqla manjew berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

deqla manjew berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

hamzah berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

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...
Teknik Buat Blog

@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 ..