cara letak border,background dan scroll pada widget

widget borderDalam artikel cara letak border pada widget sebelum ini terdapat masaalah dimana border ini juga mengelilingi  pada tajuk widget.Ia  hanya sesuai digunakan pada widget widget tertentu sahaja(yang tidak memerlukan tajuk widget).Bila terjadi begini nampak janggal terutamanya pada yang telah menghias tajuk widget dengan begitu cantik,tapi border pula berada disampingnya. Selain dari border,background dan scroll juga dimasukkan sekali pada kod ini.Jadi untuk artikel kali ini saya akan tunjukkan cara bagi mengatasinya:

Sebagai contoh untuk tutorial ini saya pilih widget Archives:


Masuk ke dashboard--template--pilih edit html--

kemudian gunakan fungsi carian Ctrl+F (klik didalam template dan tekan butang ctrl+f) dan taipkan perkataan archive


tekan butang enter sehingga jumpa kod seperti ini:


<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

letakkan setelah kod: <div class='widget-content'>
dan sesetengah widget seperti ini

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
kemudian letakkan kod ini dibawahnya:

<div style='width: 190px; background: url(&quot;http://1.bp.blogspot.com/_yqzcBmyK-mo/TRhyUKzsdgI/AAAAAAAABPM/nP0Nyko2M8Q/s1600/black.png&quot;) repeat scroll 0% 0% transparent; overflow: auto; height: 100px; border: 1px solid rgb(206, 206, 246); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 20px; margin: 3px 0pt 0pt;'> 

kemudian scroll perlahan lahan lagi kebawah hingga jumpa kod

<b:include name='quickedit'/>
 
dan letakkan kod dibawah ini  selepasnya:

</div>
 

kalau nak letak background gantikan url imej pada teks berwarna merah.Ubahkan lebar dan tinggi yang bersesuaian pada teks berwarna hijau.
kemudian preview dan save template .

Saya juga telah cuba untuk widget bloglist ,categories dan berhasil.Untuk widget yang lain rasanya tiada masaalah.Untuk widget lain cuma kenal pasti tajuk widget dan cari kod pada template seperti contoh yang diatas

Contoh kod yang dibuat untuk widget bloglist:

widget
klik untuk besarkan gambar


Selamat mencuba

update 14/5/2013

Catat Ulasan

22 Comments:

ghost writer berkata...
Teknik Buat Blog

dah banyak kali buat tapi tak pernah berhasil..aiilar.

Kay-E berkata...
Teknik Buat Blog

saya pown sama dengan ghost...dah bnyak kali try tetap xboleh....

yahaya berkata...
Teknik Buat Blog

ghost writer & Kay-e,sebenar nya kod tu ada salah semasa saya tukar/encode ke posting dan saya dah betulkan.Saya minta maaf kerana menyusahkan korang.

Kay-E berkata...
Teknik Buat Blog

owh macam itu... terima kasih kerana memberitahu.... tetapi saya masih tidak boleh....

yahaya berkata...
Teknik Buat Blog

@wafimamap3cuba lihat pada imej yg telah saya masukkan.saya cuba berulang kali dan kod diatas tiada masaalah.cuma bila copy kod pastikan tiada yang tertinggal dan letakkan pada tempat yang betul.kod akhir tu pun letakkan ditempatnya walaupun disitu ada kod serupa tapi itu untuk kod yg lain.

wafimamap3 berkata...
Teknik Buat Blog

salam yahya kite dah buat, kenapa my bloglist kite tak bergerak ye...plsss

wafimamap3 berkata...
Teknik Buat Blog

satu lagi yahya macmmana kite nak tahu ukurannya ye...

yahaya berkata...
Teknik Buat Blog

@wafimamap3text warna hijau pada kod width dan height.ubah saiz kat situ...

Kay-E berkata...
Teknik Buat Blog

owh macam 2... bru saya tau.... terima kasih... so selama ni saya salah letak...

Kay-E berkata...
Teknik Buat Blog

dah wat tp dya ada kat bwah lepas 2 isi widget ada kat atas.???

redzuan berkata...
Teknik Buat Blog

nice sharig. tp saya nk tnya mcm mne
eh nak wat kotak utuk title widget kat sidebar. boleh ke buat?

yahaya berkata...
Teknik Buat Blog

@redzuan
cari kod kat template
dan tambah kod border seperti dibawah

h2 {
background-color:#AEB404;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

redzuan berkata...
Teknik Buat Blog

so, kod yang ni sy nk pastekan kat blah mna eh ? sorry coz byk tnya.

yahaya berkata...
Teknik Buat Blog

@redzuankena letak kat template,masuk ke design,edit html,expand widget template.cari kod h2..atau yg hampir sama cuma tambahkan kod border dibawahnya.

redzuan berkata...
Teknik Buat Blog

bila sy expand wigdet n taip kod h2, keluar
35 matchs. n then kod border ni nk letak dibawah yg mna satu ye.

yahaya berkata...
Teknik Buat Blog

@redzuan
h2 post title
letak kat situ

redzuan berkata...
Teknik Buat Blog

salam sy da cari kod h2 post title dlm edit htl tp xjumpa n xde kod tu, mcm mne eh

NURUL NAZIRA berkata...
Teknik Buat Blog

macam susa nak paham..

syaza kelyza berkata...
Teknik Buat Blog

terima kasih :D

syira_88 berkata...
Teknik Buat Blog

terbaik banyak tips kat sini!mekasehhhh ;))

Tanpa Nama berkata...
Teknik Buat Blog

saya baru nak belajar buat blog menarik .. dah pun jumpa cara nak buat blog, TQ

azifah yazid berkata...
Teknik Buat Blog

xfaham