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 dashboard dan pilih Layout



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 dashboard—Layout--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

24 Comments:

MOH KEMBARA berkata...
Teknik Buat Blog

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

NUR AIN AZMAN berkata...
Teknik Buat Blog

Keep it up beb

:)

~boy @ Mr. K~ berkata...
Teknik Buat Blog

terjah!!!

sila datang sini untuk tgk review pasal kamu

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

yahaya berkata...
Teknik Buat Blog

@~boy @ Mr. K~terima kasih boy

yahaya berkata...
Teknik Buat Blog

@MOH KEMBARAwaalaikumsalam moga kita semua dimurahkan rezeki dan kesehatan inshallah

yuyu aziz berkata...
Teknik Buat Blog

hai thanks for the tutorial

im yuyu, new here:)

hi there.

geekz36 berkata...
Teknik Buat Blog

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

zulkbo berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

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

yahaya berkata...
Teknik Buat Blog

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

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

Ixora Azura berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

Ixora Azura berkata...
Teknik Buat Blog

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

@Ixora Azuraubah border 3px cth jadi 5px

cth:
width: 100px;
height:200px

wafimamap3 berkata...
Teknik Buat Blog

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

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

HPW berkata...
Teknik Buat Blog

assalamualaikum...

info yang bagus.

yana berkata...
Teknik Buat Blog

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

Dinie Asyraf berkata...
Teknik Buat Blog

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

Mrs. Farhan berkata...
Teknik Buat Blog

Tenkiu. Berjaya. =D

terataksepi berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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