cara letak border pada widget

search widget
Meletak border pada widget ini boleh dianggap sebagai penyeri pada sesuatu widget, juga sebagai pemisah diantara suatu widget dengan widget yang lain.

Sebagai contoh saya nak masukkan widget search pada blog ini dan saya hendak letakkan border dan juga background.

Mula mula masuk ke design dan pilih page elements


Kemudian pilih Add a Gadget ..


pada senarai yang terpapar pilih search box.



Seterusnya klik butang save pada widget tersebut:
Untuk mendapat widget id anda perlu membuka semula widget tadi dan paparan seperti dibawah

custom search


widget id bagi  search box  tadi yang bertanda warna hijau seperti rajah diatas.

Widget id berada dibahagian atas dihujung sekali iaitu CustomSearch1  Biasanya berakhir dengan widgetId=CustomSearch1.

Kemudian masuk semula ke design—edit HTML
Cari kod  ]]></b:skin>

Dan letakkan kod seperti dibawah ini diatasnya:

#CustomSearch1{
border: 3px solid ;padding:3px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background:url(letak url imej disini)repeat;
}

Pada background url masukkan url untuk imej jika ingin meletak latarbelakang
Kemudian save template.
Untuk widget lain anda cuma perlu dapatkan widget id dengan membuka semula widget yang nak dimasukkan border dan masukkan widget id tersebut pada ruangan teks hijau pada kod diatas.

Catat Ulasan

Letakkan komen anda disini.Segala komen adalah dihargai.Sila buat backup bila membuat perubahan pada template.Terima Kasih.

24 Comments:

MOH KEMBARA berkata...
terima kasih atas kunjungan

Salam, Mutlu Yilbasi 2011! Semoga tahun baru ni membawa keberkatan dan kebaikan pd kita semua!

NUR AIN AZMAN berkata...
terima kasih atas kunjungan

Keep it up beb

:)

~boy @ Mr. K~ berkata...
terima kasih atas kunjungan

terjah!!!

sila datang sini untuk tgk review pasal kamu

http://writetoboy.blogspot.com/2011/01/jom-terjah-mereka-yang-ajar-tutorial.html

yahaya berkata...
terima kasih atas kunjungan

@~boy @ Mr. K~terima kasih boy

yahaya berkata...
terima kasih atas kunjungan

@MOH KEMBARAwaalaikumsalam moga kita semua dimurahkan rezeki dan kesehatan inshallah

yuyu aziz berkata...
terima kasih atas kunjungan

hai thanks for the tutorial

im yuyu, new here:)

hi there.

geekz36 berkata...
terima kasih atas kunjungan

bro, dah lama cari tutorial ni. baru jumpa, nice. tq. =)

zulkbo berkata...
terima kasih atas kunjungan

salam..
bagaimana nak buat
kotak komen begini ye?
nampak menarik selain
mengurangkan berat loading

yahaya berkata...
terima kasih atas kunjungan

@zulkbokotak komen ni saya letak scroll,kemudian masuk kan kod background color pada template.ada beberapa tempat saya letakkan warna yang berbeza.saya pun dah lupa..dan akan tgk semula kod template. mungkin saya akan buat juga tutorial..inshallah..

Qema berkata...
terima kasih atas kunjungan

tumpang ty, mcm mane nk buat border mcm ni tp xtermasuk skali dgn title?

yahaya berkata...
terima kasih atas kunjungan

@Qema
setiap widget pada template..ada kod mcm ini pada template.biasa lepas widget id

<div class='widget-content'>
lepas kod ini letak kod
<div style='border: 3px ridge;-moz-border-radius: 10px 10px 10px 10px;'>

kemudian lihat bahagian bawah lagi akan jumpa kod ini:

<b:include name='quickedit'/>
kemudian letak kod </div>
selepasnya.

Qema berkata...
terima kasih atas kunjungan

@yahaya
Orite dah jadi.
Thankz a lot!! =)

Ixora Azura berkata...
terima kasih atas kunjungan

salalm lg...hurm sy dh cube tp ada kuar keep or delete widget..mcm mn tu? ptt sy delete or keep?

yahaya berkata...
terima kasih atas kunjungan

@Ixora Azurasepatutnya x keluar delete atau keep widget..ada salah kat mana tu..

Ixora Azura berkata...
terima kasih atas kunjungan

hi..ok..sy dh jd buat tp prob nyer, klu nk besarkan skit size border mcm mn?..nk tmbh height n lebar...sori lh bny tny..

yahaya berkata...
terima kasih atas kunjungan

@Ixora Azuraubah border 3px cth jadi 5px

cth:
width: 100px;
height:200px

wafimamap3 berkata...
terima kasih atas kunjungan

salam yahaya, bagaimanapula caranya jika sekiranya saya nak letak skcroll pada widget tapi taknak border dan backgroundnya pula adalah transparent. plss bantu saya...

kienah starz berkata...
terima kasih atas kunjungan

awk...trime ksh ekk...da dpt da setelah tmbh n buang ckit2...hehehe nnt visit blog sy ekkk...;)

HPW berkata...
terima kasih atas kunjungan

assalamualaikum...

info yang bagus.

yana berkata...
terima kasih atas kunjungan

saya nk wt scroll untuk bloglist.. tp! npe scroll x still ada sedangkan sy da no.. dan scroll untuk y shj.. :(

Dinie Asyraf berkata...
terima kasih atas kunjungan

cmne plak nk wat boarder utk tajuk widget...???

Mrs. Farhan berkata...
terima kasih atas kunjungan

Tenkiu. Berjaya. =D

terataksepi berkata...
terima kasih atas kunjungan

kenapa tx kod tu...jenuh cari tx gok...haizzzzzzzzzz....ade cara laen x???plz tolong kabo sket...hihihi

yahaya berkata...
terima kasih atas kunjungan

@terataksepikod tersebut bergantung pada widget yang dimasukkan.saya dah edit tutorial agar lebih mudah difahami

Related Posts Plugin for WordPress, Blogger...