Kamis, 27 Desember 2012

Membuat Widget Bergerak Otomatis

Setelah mondar mandir akhirnya dapat juga cara membuat widget blog saya bergerak sendiri, sebenarnya simple aja caranya cuma mikirnya yang rada puyeng... he he he, makanya jangan dipikirin, langsung aja ya cara ini dah saya coba dan berhasil seperti di halaman saya ini.
  • Pertama Masuk ke dasbor Sobat
  • Clik Rancangan 
  • Edit HTML jangan lupa centang Expand Widget Template sobat ya.
  • Template sobat   (disini admin pake widget Populer Post buat contoh.)
  • Cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> biar mudah tekan ( CTRL dan F ) tingal search, contohnya seperti di bawah ini.


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>

............
............
............
............

<div style='clear: both;'/>
</b:if></b:if>
</li> </b:loop>

</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>


  • kalau sudah dapat copy code di bawah taruh di bawah kode <ul>, seperti gambar diatas 


<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

  • Selanjutnya sisipkan kode penutupnya di </marquee> sebelum kode </ul>
  • kalau sudah Simpan Template sobat dan lihat hasilnya

Keterangan :
  1. pada contoh diatas karena panjang kodenya maka admin hanya menuliskan degan ( ....... )
  2. kode diatas untuk widget yang akan bergerak keatas lihat tulisan direction='up', kalau sobat ingin merubah pergerakannya dari atas ke bawah rubah tulisan 'up' menjadi 'Down'
  3. untuk tinggi kolom dapat diubah pada height '140' ganti sesuai dengan keinginan sobat.
  4. semoga bermanfaat buat sobat.