Cara Membuat Menu Label Berjalan (Marquee) Di Blogger

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 Biru 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 :

    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.

Sumber :http://miscah.blogspot.com

ads

Ditulis Oleh : Belajar Yuk!!! Hari: 7:31 AM Kategori: