Blog Archive

Membuat Label Dengan Fungsi Scroll

Pada postingan sebelumnya, kita sudah membahas cara membuat daftar isi blog dengan fungsi scroll, bagi yang belum membaca klik disini, dan pada kesempatan ini kita akan membahas membuat label dengan fungsi scroll, fungsinya sama seperti daftar isi juga, tapi isinya adalah label atau disebut juga dengan  kategori.

bagi yang ingin membuat label dengan fungsi scroll ini, ikuti langkah-langkah dibawah :
  1. Login ke Blogger.
  2. Buatlah Label dengan menambah Gadget pada sidebar,dan berilah judul Kategori.
  3. Sekarang masuklah tab ke Edit HTML.
  4. Klik Expand Template Widgets.
  5. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “Kategori”.
  6. Jika sudah ketemu, sisipkan kode HTML yang ditandai dengan warna merah pada kode kategory pada HTML sobat.

    <b:widget id='Label1' locked='false' title='Kategori' 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;'>
    <div style='overflow:auto; width:ancho; height:250px;'>
    <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'/>
    </div>

    </div>
    </b:includable>
    </b:widget>
  7. Save Template. lihat hasilnya pada widget label yang sobat buat tadi..

NB:
Pada setiap Template berbeda-beda, ada yang didahului kode seperti ini :
<div class='widget-content'>
Dan kode seperti ini :
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

Tapi itu tidak masalah, asal penyisipan kode yang berwarna merah diletakkan dengan benar..

selamat mencoba.... 

0 Comment:

Post a Comment