Cara membuat label dengan fungsi scroll

Hello sob!! Kali ini saya akan memposting tentang cara membuat label yang ada scroll'nya. Manfaatnya, jika sobat blogger memiliki banyak label/kategori yang banyak, maka jika dipasang semua tentunya akan makan tempat. Nah lalu gimana cara buatnya?? cara membuatnya sangat mudah kok, hanya dengan menyisipkan sedikit kode HTML maka jadilah label dengan fungsi scroll.

  
Untuk membuatnya, silahkan ikuti langkah-langkah berikut :
  1. Login ke blogger tentunya.
     
  2. Buatlah label dengan menambah gadget pada sidebar,jangan lupa beri judul.
     
  3. Anggap saja sobat telah membuat label dengan nama "LABELS".
     
  4. Sekarang tuju ke edit HTML.
     
  5. Klik Expand Template Widget.
     
  6. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan "LABELS" maka akan muncul kode html yang ribet, tapi jangan pusing lihat kode tersebut.
     
  7. Perhatikan saja tulisan yang berwarna merah di bawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.

    <b:widget id='Label1' locked='false' title='labels' 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:180px;'>
    <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>
     
  8. Jangan lupa simpan template.
Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada seperti ini
<div class='widget-content'>
Bukan seperti yang ada di blog saya yaitu:
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
Yang penting letak kode tambahan yang disisipkan harus benar meletakkannya. Untuk kode height:180px adalah tinggi label scroll, bisa diganti dengan angka yang sobat inginkan sesuai kebutuhan


!!! Happy Blogging GUYS !!!


2 komentar:

  1. Sipkang.

    Saya punya back to top lebih keren dari punya agan, pengen pasang? yug kunjungi balik Klik Cyber Share

    BalasHapus
  2. bagus sekali info nya , sangat menarik
    dan penuh wawasan
    terimakasih

    BalasHapus

Silahkan berkomentar di sini. Kami mengharapkan saran dan kritik yang membangun. Terima kasih ^___^