Membuat Label dengan Marquee

3/10/2011 Blog Tutorial Blogger Tips Trik Blog Tutorial Blogger
Pada postingan sebelumnya saya sudah membahas tentang masalah Label yaitu tentang cara membuat "Secrool Pada Label". Nah, pada kesempatan kali ini saya akan membahas masih tentang masalah Label, tapi kali ini beda dengan postingan yang dulu yaitu pada postingan kali ini saya akan membahas tentang membuat "Label dengan Marquee" alias Label Berjalan. Seperti apa Label Marquee/Berjalan?? Jawabannya mungkin para sobat sudah pada tahu bahkan mungkin lebih tahu.

Mungkin bila ada para sobat yang belum tahu karena masih Newbe sama seperti saya, seperti apa itu Label Marquee. Untuk demonya bisa para sobat lihat di bawah ini :






PERHATIAN!!
Jika sobat belum menampilkan label, silahkan sobat pasang dulu labelnya, tentunya label dengan model yang biasa (bukan label cloud).


Langkah-langkahnya adalah sebagai berikut :

  1. Seperti biasa, login dulu ke blogger.
  2. Jika sudah, klik Edit HTML.
  3. Klik Expand Template Widget.
  4. 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 oleh sobat.


    <b:widget id="Label1" locked="false" title="Label" type="Label">
    <b:includable id="main">
    <b:if cond="data:title">
    <h2><data:title></data:title></h2>

    </b:if>
    <div class="&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;">
    <marquee align="left" direction="up" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%" height="300">
    <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 dir="data:blog.languageDirection"><data:label.name></data:label.name></span>
    <b:else><a dir="data:blog.languageDirection" href="data:label.url"><data:label.name></data:label.name></a>
    </b:else>
    <b:if cond="data:showFreqNumbers">
    <span dir="ltr">(<data:label.count>)</data:label.count></span>
    </b:if>
    </b:if></li>
    </b:loop>
    </ul>
    <b:else>
    <b:loop values="data:labels" var="label">
    <span class="&quot;label-size label-size-&quot; + data:label.cssSize">
    <b:if cond="data:blog.url == data:label.url">
    <span dir="data:blog.languageDirection"><data:label.name></data:label.name></span>
    <b:else>
    <a dir="data:blog.languageDirection" href="data:label.url"><data:label.name></data:label.name></a>
    </b:else>
    <b:if cond="data:showFreqNumbers">
    <span class="label-count" dir="ltr">(<data:label.count>)</data:label.count></span>
    </b:if>
    </b:if></span>
    </b:loop>
    </b:else>
    <b:include name="quickedit">
    </b:include></b:if></marquee>
    </div>
    </b:includable>
    </b:widget>


  5. Kemudian Simpan Template Sobat.


Selesai deh

KETERANGAN :
  • direction='up' adalah text yang berjalan dari bawah keatas.
  • height='300' adalah tinggi dari menu
  • 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.



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

5 comments