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.Jadi disini saya ingin berkongsi bagaimana hendak menyusun imej pada sidebar agar saiznya sama lebar dan sama tingginya
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:
nice! http://goo.gl/TOwP
@Chenk Rahmanterima kasih atas komen.dtg lagi ye..
menarik :)
hmm..ok gak macam nie.
nice one..must try.hihi
bagus ini..
baru tahu ternyata ada turotnya
thx kawan
Yeah! Belum puas lagi carik tutorial kat sini.hehe.Thanks bro.Sangat berguna pada blog yang nak nampak kemas dalam penyusunan sesuatu widget.hehehe.;-)
singgah 4llow uuu
jom tukar2 link
wah angah tengok tersusun rapat tue heheh cantik2
terima kasih semua atas komen yang diberi,moga memberi manfaat pada semua
salam bro yahya..mana SB??adess
baru kini ku tahu...
terima kasih kOngsi
kalau nak buat imej tersebut animated macam mana ye?
@geekz36
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><img src="alamat url gambar"></marquee>
slm, camne pulak nk bg isi atau gmbr2 kat sidebar ke tgh ek?
@deqla manjew
<center>kod imej yg nak dimasukkan </center>
tp.. itu kalo kod,, kalo gmbr2 pulak camne nk centerkan?
@deqla manjewsama saja caranya nya cuma letak kod <center>
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
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
@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 ..