cara membuat scroll pada label

Pada hari ini artikel yang saya mau bahas adalah membuat scroll pada label. Bagi yang labelnya banyak pasti ribet kalau labelnya memanjang sampe ke bawah gitu. Mangkanya dditambahin variasi scroll biar lebih hemat tempat dan pastinya bikin loading blog cepet. Kalau pingin liat contohnya seperti ini :

blog scroll :blogger-berbagiilmu.blogspot.com

label berbasis scroll

Caranya simpel aja kok.
1. Pertama mulai dengan Login ke blogger.com
2. Masuk ke Rancangan dilanjutkan ke Edit HTML
3. Kemudian cari 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">

    <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>




Kalo udah tambahin kode seperti di bawah ini :



    <div style="overflow: auto; height: 300px;">


    dan


    </div>




Masukan kode berwarna merah dalam format seperti 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>




Yang berwarna merah adalah kode scrollnya. Sedangkan yang berwarna biru adalah kode untuk button. Kode berwarna biru bisa diganti menjadi <ol> dan diakhiri dengan </ol> untuk diganti menjadi angka.

Selamat mencoba semoga berhasil dan dapat bermanfaat.

Related Posts