Sabtu, 09 Juli 2011

Membuat Label Dengan Efek Marquee

Bagaimana jika label blogspot kita bergerak dengan efek marquee? kira-kira menyenangkan gak... Pada potingan sebelumbya tentang Membuat Label Dengan Thumbnail dan Membuat Label Cloud Dengan Animasi, kali ini akan dibahas tentang membuat label dengan efek marquee atau dibilang efekyang berjalan.

  • Login Blogger anda;

  • Pilih Rancangan dan Edit HTML

  • Centang Expand Template Widget

  • Cari Kode seperti dibawah ini

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<marquee align='left' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</marquee>
</div>
</b:includable>
</b:widget>

Pada kode biru diatas adalah efek marquee yang harus anda tambahkan sesuai denagn contoh diatas. Dan anda bisa memodifikasi kode tersebutdengan petunjuk
  1. direction='up' adalah text marque yang berjalan keatas;

  2. height='300' adalah tinggi;

  3. scrollamount='2' merupakan angka untuk kecepatan gerakan, semakin tinggi angkanya maka akan semakin cepat gerakannya.


Selamat berkarya dan semoga sukses.........

Tidak ada komentar:

Posting Komentar