Cara Membuat Scroll Pada Label yang keren habis

 

asalamualaikum wr wb

selamat malam sobat bloger kali ini saya sebagai pemula akan mencoba menulis artikel yang berjudul:

Cara Membuat Scroll Pada Label
Tutorial yang mau saya bahas kali ini adalah membuat scroll pada label. Bagi yang labelnya banyak pasti ribet kalau labelnya memanjang sampe ke bawah gitu. Mangkanya ditambahin scroll biar lebih hemat tempat dan pastinya bikin loading blog cepet. Kalau pingin liat contohnya seperti ini :

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.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email