Search This Blog

Monday, 21 March 2011

Tutorial (6) : Cara letak border,background dan scroll pada widget.

cara letak border,background dan scroll pada widget

widget borderDalam artikel cara letak border pada widgetsebelum 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 dariborder,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 design-pilih edit html--klik pada expand template widget
kemudian gunakan fungsi carian Ctrl+F dan taipkan perkataan archive

cari

tekan butang next 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 berwarnamerah.Ubahkan lebar dan tinggi yang bersesuaian pada teks berwarnahijau.
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

0 comments:

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...