Membuat Label Dengan Marquee

image 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.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

16 comments

27 Maret 2010 23.54

kalo labelnya udah jadi cloud, tetep jadi marquee gak :D

28 Maret 2010 00.18

blm sy coba ben, sepertinya tetap bisa..tp tampilannya kan jd ga bagus ben

28 Maret 2010 02.05

Kayaknya keren nich... tapi nanti bikin loading berat ga sob?

28 Maret 2010 03.32

marquee itu hanya html ringan, jd sy rasa tdk akan membuat blog jd berat

28 Maret 2010 14.44

patut di coba nih sob..makasih infonya..

28 Maret 2010 15.26

Sip tipsnya sobat! Makasi ya!

28 Maret 2010 16.21

terimakasih ilmunya, oh yah sekedar info aja pingin uang gratis bisnis neobux klik iklan di bayar dollar

28 Maret 2010 20.31

mantab infonya kawan..terima kasih

30 Maret 2010 21.33

Berkunjung menjalin relasi dan mencari ilmu yang bermanfaat. Sukses yach ^_^

3 April 2010 06.41

mas, bagaimana cara membuat fungsi scrool ditambah dengan marquee tetapi tidak untuk label ?
melainkan isinya berupa link seperti blogroll gitu mas...

9 April 2010 17.59

makasih

10 April 2010 13.30

trnyt msh gagal. coz diblogku kode gk spt itu. hikz hikz......

28 April 2010 00.35

thx infona

22 Juni 2010 20.33

wah, blog aq da bisa, makasih sob atas infonya

13 November 2011 17.54

Manteeeppp........
langsung d terapkan ;)

21 November 2011 03.23

nice langsung gue praktekkan berjalan dgn mulus seep...

Poskan Komentar

Reader Community

Recent Comments