- Home >
- Tutorial Blog >
- Cara Membuat Scroll Pada Label Blog
Posted by : Surya Fahik
Sabtu, 15 Juni 2013
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>
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>
Posting Komentar