Cara Membuat Label Dengan Fungsi Scroll

Menu scroll tentunya sudah banyak yang tau, 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. menu ini gak jauh berbeda sama menu scroll pada archive blog.

Untuk lebih jelasnya langsung saja langkahnya seperti ini :

• Login ke Blogger dengan ID sobat tentunya.
• Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.



• Anggap saja sobat telah membuat judul labelnya dengan nama “LABEL”.
• Sekarang tuju ke Edit HTML.
• Klik Expand Template Widgets.
• Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “LABEL”, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut.
  
• Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.
  
  <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;'>
  <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>
  </div> </b:includable>
  </b:widget>
  
• Jangan lupa Simpan Template.

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

Posted in: Blogger

Baca Juga Artikel Terkait Dibawah Ini: