Membuat Label Dengan Marquee

Jika sobat pernah membaca postingan saya tentang membuat label dengan fungsi scroll, tentunya sobat tidak akan kesulitan membuat label dengan marquee (text berjalan). Agak sedikit aneh memang postingan saya kali ini, label (kategori) dibuat berjalan, tapi tidak ada salahnya kita coba bahas. Buat yang ingin mencoba sekedar ingin tau, berikut tutorial singkatnya. Untuk demo-nya bisa dilihat disini.

 

Seperti biasa, login dulu ke blogger.

• Jika sobat belum menampilkan label, silahkan sobat pasang dulu labelnya, tentunya label dengan model yang biasa (bukan label cloud).
• Jika sudah, klik Edit HTML.
• Klik Expand Template Widget.
• Kemudian cari kode yang mirip seperti dibawah ini, sebagai catatan untuk title='Label' adalah judul label yang ada di blog sobat, silahkan disesuaikan. Dan kode yang berwarna merah adalah kode yang harus disisipkan.
  

  <b:widget id='Label1' locked='false' title='Label' 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>

• Kemudian Simpan Template.

Keterangan :

1. direction='up' adalah text yang berjalan dari bawah keatas.

    

2. height='300' adalah tinggi dari menu

    

3. scrollamount='2' adalah kecepatan gerakan text, semakin tinggi angkanya maka akan semakin cepat gerakannya.

Saya kira itu saja yang bisa saya sampaikan, semoga bisa bermanfaat.

Oleh : Dody FariaL Pada hari Sabtu, Maret 27, 2010

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :