Seorang Admin blogger kebanyakan yang membuat label blognya telalu banyak sehingga jika ditampilkan ke widged akan terlihat memanjang ke bawah, tentunya ini tidak cocok untuk untuk tampilan karena menggunakan banyak tempat sedangkan widget yang lainnya memiliki tempat yang tidak sesuai dengan posisi yang diinginkan.
Nah bagaimana cara mengatasinya, untuk mengatasinya hanya dengan Membuat Scroll pada label sehingga panjangnya bisa di kontrol sesuai dengan keinginan pengguna, dengan begitu admin/ pengguna dapat memasang widget yang lain karena telah mengurangi tempat label dan tempat widget lain menjadi luang.
Untuk cara membuat Scroll pada Label juga tidak terlalu sulit hanya dengan sedikit mengubah/menambah kode CSS dan kode HTML. berikut langkah-langkahnya.
1. Masuk ke akun blogger anda
2. Pilih Template laluk klik EDIT HTML lalu Klik Lanjutkan
3. Kemudian Cari kode berikut ini ]]></b:skin>
4. kemudian tambahkan kode berikut ini sebelum kode ]]></b:skin> (kode yang dicari tadi)
#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
5. Ganti yang berwarna merah sesuai panjang yang di inginkan.
6. Lalu Klik Simpan Template dan lihat hasilnya.
Jika cara di atas tidak berhasi coba kembali ke langkah 1 dan 2 lalu cari kode yang telah di tambahkan tadi kemudian hapus, dan ikuti langkah berikut ini
1. 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>
2. Ganti dengan kode berikut 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 Sroolnya
Sedangkan yang berwarna biru adalah Button
Demikian postingan kali ini, semiga bermanfaat dan sampai jumpa lagi.!
Belum ada tanggapan untuk "Cara Membuat Scroll Pada Label Blog"
Post a Comment