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

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

22 Comments:

ghost writer berkata...
terima kasih atas kunjungan

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

Kay-E berkata...
terima kasih atas kunjungan

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

yahaya berkata...
terima kasih atas kunjungan

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...
terima kasih atas kunjungan

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

yahaya berkata...
terima kasih atas kunjungan

@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...
terima kasih atas kunjungan

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

wafimamap3 berkata...
terima kasih atas kunjungan

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

yahaya berkata...
terima kasih atas kunjungan

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

Kay-E berkata...
terima kasih atas kunjungan

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

Kay-E berkata...
terima kasih atas kunjungan

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

redzuan berkata...
terima kasih atas kunjungan

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

yahaya berkata...
terima kasih atas kunjungan

@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...
terima kasih atas kunjungan

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

yahaya berkata...
terima kasih atas kunjungan

@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...
terima kasih atas kunjungan

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...
terima kasih atas kunjungan

@redzuan
h2 post title
letak kat situ

redzuan berkata...
terima kasih atas kunjungan

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

NURUL NAZIRA berkata...
terima kasih atas kunjungan

macam susa nak paham..

syaza kelyza berkata...
terima kasih atas kunjungan

terima kasih :D

syira_88 berkata...
terima kasih atas kunjungan

terbaik banyak tips kat sini!mekasehhhh ;))

Tanpa Nama berkata...
terima kasih atas kunjungan

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

azifah yazid berkata...
terima kasih atas kunjungan

xfaham

Related Posts Plugin for WordPress, Blogger...