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.

Post a Comment

21 Comments:

suffer8zine said...
Teknik Buat Blog

nice! http://goo.gl/TOwP

sibersensasi said...
Teknik Buat Blog

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

Anonymous said...
Teknik Buat Blog

menarik :)

ghost said...
Teknik Buat Blog

hmm..ok gak macam nie.

suzie rahman said...
Teknik Buat Blog

nice one..must try.hihi

la tahzan said...
Teknik Buat Blog

bagus ini..
baru tahu ternyata ada turotnya
thx kawan

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

singgah 4llow uuu

jom tukar2 link

wah angah tengok tersusun rapat tue heheh cantik2

sibersensasi said...
Teknik Buat Blog

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

Zaer!! said...
Teknik Buat Blog

salam bro yahya..mana SB??adess

Avenged7volt said...
Teknik Buat Blog

baru kini ku tahu...

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

terima kasih kOngsi

geekz36 said...
Teknik Buat Blog

kalau nak buat imej tersebut animated macam mana ye?

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

hamzah said...
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 said...
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

sibersensasi said...
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 ..