Cara membuat label scroll

Minggu, 27 Maret 2011

Tutorial memasang label dengan fungsi scroll ini sengaja saya tulis semata-mata untuk membantu blogger yang mempunyai banyak label kategori dalam blognya. Jika di pasang semua tentunya akan makan tempatkan?, dan mungkin bisa membuat blog jadi timpang alias panjang sebelah antara postingan dengan sidebar Menu scroll tentunya sudah banyak yang tau Contohnya disidebar blog ini, menu ini dapat ditarik ke bawah dan ke atas. Cara membuatnya sangat mudah, hanya dengan menyisipkan sedikit kode HTML maka jadilah label dengan fungsi scroll. Untuk membuatnya, silahkan ikuti langkah-langkahnya berikut ini :)


   1. Login ke blogger 
       
   2. Buatlah Label dengan menambah Gadget pada sidebar, Beri judul [kategori]
             
   3. Sekarang tuju ke Edit HTML.

   4. Klik Expand Template Widgets.
     
   5. Cari label yang sudah Kamu buat tadi, dengan CTRL+F dan ketikkan "Kategori", maka akan muncul    kode HTML dari kategori tersebut, tapi jangan pusing melihat kode HTML tersebut.
       
   6. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah Kamu buat tadi.
      <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. Jangan lupa Simpan Template.
Catattan: Setiap template mempunyai karakter yang berbeda, mungkin di blog Kamu kode yang ada adalah
    <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:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi. ;)
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. NICE BLOG - All Rights Reserved
Template Created by Creating Website Inspired by Sportapolis Shape5.com
Proudly powered by Blogger