Cara Membuat Efek Marquee pada Gadget Bawaan Blogger

Cara Membuat Efek Marquee pada Gadget Bawaan Blogger - Apakah sobat sudah paham tentang "marquee"? Jika sobat yang belum paham, silahkan sobat browsing di Google, sangat banyak sobat blogger yang memberikan banyak teknik seputar marquee. Secara singkat dan dengan bahasa "aneh", marquee itu adalah 'fitur' yang bergerak ke kiri, ke kanan, ke atas, ke bawah, bolak balik, apakah itu teks, gambar, atau apa saja yang ingin dibuat bergerak atau berjalan.

Apa yang akan saya bahas di artikel ini? Tentunya juga seputar marquee, yang membedakan adalah karena saya akan memaparkan hasil coba-coba-an saya  tentang marquee pada gadget / widget bawaan blogger. Pada teknik marquee yang banyak dijelaskan di blog lain, termasuk blog sahabat saya di atas, itu menjelaskan teknik marquee yang akan dipasang pada "gadget HTML". Sementara artikel ini akan memaparkan hasil utak-atik alias percobaan pada gadget bawaan blogger seperti LABEL / KATEGORI, LINK LIST, ATAU APA SAJA SELAIN GADGET HTML. Bagaimana cara agar gadget bawaan blogger dapat berefek marquee? Itulah pertanyaan inti dalam postingan ini.

Jika kita hendak membuat teks berjalan di blog kita, biasanya kita harus memasang kode tertentu kemudian dipasang atau dipaste pada Gadget HTML. Bagaimana jika kita hendak membuat marquee pada gadget Label (kategori) atau gadget lainnya? Kita harus membuatnya di dalam halaman "Edit Template". Pada kasus yang akan ku jelaskan, saya akan membuat efek marquee pada Label atau Kategori dengan efek "bergerak dari bawah ke atas kemudian berhenti jika teks disentuh denga kursor". Langkah-langkahnya adalah sebagai berikut:

1. Log in dengan akun blogger sobat kemudian masuk pada halaman "Rancangan" > Edit HTML, Setelah itu centang pada kotak "Expand Template Widget", Download Lengkap Template (untuk jaga-jaga jangan sampai gagal)

2. Tekan CTRL F atau F3 pada keyboar sobat (gunakan Mozila) kemudian ketik 'Label1' (pake kutip tidak pake spasi). Jika sudah ketemu, perhatikan kode di bawah ini dan sesuaikan dengan kode yang ada dalam template sobat.

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<marquee align='center' direction='up' height='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <div class='widget-content'>
    <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>
        <span dir='ltr'/>
      </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</marquee>
</b:includable>
</b:widget>

Warna Biru adalah id gadget Label atau kategori
Warna Merah adalah kode marquee bergerak dari bawah ke atas kemudian berhenti ketika disentuh kursor
Warna Hitam adalah kode bawaan atau default blogger, tidak usah diubah.

Dari kode di atas, yang kita tambahkan adalah kode yang berwarna merah (perhatikan letak pemasangannya, ini akan gagal jika salah tempat), sobat dapat menggantinya dengan kode marquee dengan efek yang lain, misalnya bergerak ke kanan atau ke kiri. Setelah itu, klik Save Template.

Nah, sangat mudah kan? Jika ada masalah, silahkan berkomentar, jika ini berhasil silahkan dinikmati.