CARA LETAK SCROLL PADA WIDGET

 Penggunaan scroll pada widget  adalah  dengan tujuan supaya senarai yang dipaparkan akan lebih kemas dan tidak menggunakan ruang yang banyak.contohnya widget labels dan archives akan jadi memanjang kebawah bila sudah terdapat banyak posting.bagaimana pun bagi widget Archives pula terdapat pilihan bagi memaparkan secara dropdown menu bagi menjimatkan ruangan.Bagi tutorial ini saya terangkan cara bagaimana untuk meletakkan scroll pada labels.

Untuk meletakkan scroll pada label,terlebih dahulu dapatkan widget id:

Caranya masuk ke dashboard-template--edit html --..gunakan ctrl+f (klik pada mana mana bahagian pada templatedan tekan butang ctrl+f) untuk memudahkan pencarian taipkanLabels (tajuk widget pada sidebar).

kemudian muncul kod seperti dibawah

<b:widget id='Label1' locked='false' title='Labels' type='Label'/> (title disini adalah tajuk widget yg kita letak pada sidebar)

widget id bagi labels ialah Label1

salin kod dibawah

#Label1{
height:180px;
overflow:auto;
}

dan letakkan diatas kod

 ]]></b:template-skin>

Bagi widget lain cuma perlu tukar pada widget id sahaja pada kod diatas.Jika scroll tidak muncul adalah disebabkan senarai tersebut adalah pendek dan kod diatas diletakkan height1 80px jadi akan muncul hanya setelah mencapai ketinggian 180px atau ubah sahaja ketinggian tersebut.

kemudian save template

SUMBER

Read more ...

CARA LETAK BORDER, BACKGROUND DAN SCROOL PADA WIDGET

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='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

kemudian letakkan kod ini dibawahnya:

<div style='width: 190px; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsVWUZ_LQcIK3luRzIi9-bmhwM81-dzw0rSwJ0Es8Lp-iCCr0Ed71TrJl0KTy7yK40HrgE48TaT6gasL6PO-rEjIM5hX5VhlnDmv-6OB_hZWeygHjYcO9aIQPKTxPiCrku3vG-ayNmZSw/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:

klik untuk besarkan gambar

Selamat mencuba


SUMBER

Read more ...