Headlines News :
Home » » Cara Membuat Scroll pada Label

Cara Membuat Scroll pada Label

Written By Johannes Nababan on Monday, May 21, 2012 | 10:55 PM

Trik yang akan segera kita bahas kali ini adalah, Cara membuat tombol scroll pada Label. Bagi anda yang labelnya banyak, tentuh risih kan melihal label yang terus memanjang kebawah dan otomatis akan boros tempat. Saya sarankan untuk anda supaya memasang scroll ini di blog anda agar labelnya terlihat rapi dan tidak memakan tempat. Contoh dari Scroll pada Label adalah :

Jika anda yang berkenan memasangnya di blog, ikuti saja langkah-langkahnya :
  1. Masuk ke Blogger
  2. Pilih Menu Template
  3. Lalu pilih Edit Template, kemudian pilih lanjutkan
  4. Cari kode berikut :
<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>

Ganti kode diatas dengan kode dibawah ini :

<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
<h2><data:title></data:title></h2>
</b:if>
<div class="widget-content">
<div style="overflow: auto; height: 300px;">
<ul>
<b:loop values="data:labels" var="label">
<li>
<b:if cond="data:blog.url == data:label.url">
<span dir="data:blog.languageDirection">
<data:label.name>
</data:label.name></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label.name>
</data:label.name></a>
</b:else>
<span dir="ltr">(<data:label.count>)</data:label.count></span>
</b:if></li>
</b:loop>
</ul>
<b:include name="quickedit">
</b:include></div>
</div>
Keterangan :
  • Yang berwarnah merah adalah kode scroll nya
  • Yang berwarna biru kode untuk button. Kode yang berwarna biru dapat diganti menjadi <ol> dan diakhiri dengan </ol> untuk diganti menjadi angka
Happy Blogging
Share this article :

22 komentar:

  1. script nya ga ada tuh...ada cara lain ga....

    ReplyDelete
    Replies
    1. itu mksudnya anda menambahkan kode menjadi seperti dibawah,

      Delete
  2. coba deh yg ini :
    1. Buka Edit HTML, jangan lupa di backup dulu templatenya
    2. Contreng V di Expand Template Widget

    3. Cari (Ctrl F) Kode : ]]>

    4. Copykan kode berikut di atasnya

    #Label1 .widget-content{
    height:153px;
    width:auto;
    overflow:auto;
    }

    5. height:153px; adalah tinggi dari labelnya (ex.kategori produk), atur sesuai keinginan Anda

    6. Klik Simpan Template

    7. Refresh dech website-nya.... done.

    ReplyDelete
    Replies
    1. Maaf terhapus.. edit nomor 3. Kode ]]>

      Delete
    2. bagaimana caranya membuat choose category seperti yang ada di blog ini?
      dijawab ya thanks

      Delete
  3. kok ga ada ya.... ketik biasa aja deh : Kode ]]>buka kurung / b: skin tutup kurung

    ReplyDelete
  4. makasih infony sob..tapi gak ketemu ni yang di cari.....

    ReplyDelete
  5. bagaimana caranya membuat choose category seperti yang ada di blog ini?
    dijawab ya thanks

    ReplyDelete
  6. caranya buat tampilan komentar seprti blogmu itu gmna ya,,,,

    ReplyDelete
  7. dan satu lagi gmna cranya memasukan hasil postingan kita ke dalam menu dropdown,,, trimaksih,,,

    ReplyDelete
  8. saya praktekan dl ya mas mudah2an bs.
    makasih ya mas...

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Keren sob tutorialnya dan work 100% di blog saya Pasang Iklan Di Blog Ini

    ReplyDelete
  11. terimakasih mas bro
    by http://budayabacabaca.blogspot.com

    ReplyDelete
  12. Sudah ane coba berhasil. Thanks bang ilmunya

    ReplyDelete
  13. info bagus gan, sangat bermanfaat bagi saya. Ditunggu kedatangannya di www.ankurniawan.blogspot.com

    ReplyDelete

Setelah membaca Artikel yang saya berikan diatas, anda dapat memberikan komentar terhadap Artikel diatas tanpa adanya :
-Spam
-Rasis
-Dan perkataan lainnya yang dapat membuat orang lain merasa tersinggung.

Terima Kasih

banner ads banner ads

 
Support : Blog | Joe | Johny Template
Copyright © 2011. Blog | Joe - All Rights Reserved
Template Created by Johny Template Published by Blog | Joe
Proudly powered by Blogger