Dalam 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='"widget-content " + data:display + "-label-widget-content"'>
kemudian letakkan kod ini dibawahnya:
<div style='width: 190px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-cfYf7DkBJzNdKrTICCIxDenSrs963zKQwpdNpLls8Jum6dlGUqCyYFv5Kia-qzYEjpKBlDoN7-IQIaoCG63N8JhrA25jsr46JA-DRSe8ww4o0UUXWt5bKjlDzQijv3eH6JIuRgA_wiw/s1600/black.png") 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:
klik untuk besarkan gambar |
Selamat mencuba
update 14/5/2013
Post a Comment
22 Comments:
dah banyak kali buat tapi tak pernah berhasil..aiilar.
saya pown sama dengan ghost...dah bnyak kali try tetap xboleh....
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.
owh macam itu... terima kasih kerana memberitahu.... tetapi saya masih tidak boleh....
@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.
salam yahya kite dah buat, kenapa my bloglist kite tak bergerak ye...plsss
satu lagi yahya macmmana kite nak tahu ukurannya ye...
@wafimamap3text warna hijau pada kod width dan height.ubah saiz kat situ...
owh macam 2... bru saya tau.... terima kasih... so selama ni saya salah letak...
dah wat tp dya ada kat bwah lepas 2 isi widget ada kat atas.???
nice sharig. tp saya nk tnya mcm mne
eh nak wat kotak utuk title widget kat sidebar. boleh ke buat?
@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;
}
so, kod yang ni sy nk pastekan kat blah mna eh ? sorry coz byk tnya.
@redzuankena letak kat template,masuk ke design,edit html,expand widget template.cari kod h2..atau yg hampir sama cuma tambahkan kod border dibawahnya.
bila sy expand wigdet n taip kod h2, keluar
35 matchs. n then kod border ni nk letak dibawah yg mna satu ye.
@redzuan
h2 post title
letak kat situ
salam sy da cari kod h2 post title dlm edit htl tp xjumpa n xde kod tu, mcm mne eh
macam susa nak paham..
terima kasih :D
terbaik banyak tips kat sini!mekasehhhh ;))
saya baru nak belajar buat blog menarik .. dah pun jumpa cara nak buat blog, TQ
xfaham