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 :
- Masuk ke Blogger
- Pilih Menu Template
- Lalu pilih Edit Template, kemudian pilih lanjutkan
- 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>
<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">
<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><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>
- 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
thank sob sharenya..
ReplyDeleteOk sama-sama
Deletescript nya ga ada tuh...ada cara lain ga....
ReplyDeleteitu mksudnya anda menambahkan kode menjadi seperti dibawah,
Deletecoba deh yg ini :
ReplyDelete1. 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.
Maaf terhapus.. edit nomor 3. Kode ]]>
Deletebagaimana caranya membuat choose category seperti yang ada di blog ini?
Deletedijawab ya thanks
kok ga ada ya.... ketik biasa aja deh : Kode ]]>buka kurung / b: skin tutup kurung
ReplyDeletemakasih infony sob..tapi gak ketemu ni yang di cari.....
ReplyDeletebagaimana caranya membuat choose category seperti yang ada di blog ini?
ReplyDeletedijawab ya thanks
caranya buat tampilan komentar seprti blogmu itu gmna ya,,,,
ReplyDeletedan satu lagi gmna cranya memasukan hasil postingan kita ke dalam menu dropdown,,, trimaksih,,,
ReplyDeletethank you ya bro
ReplyDeletesaya praktekan dl ya mas mudah2an bs.
ReplyDeletemakasih ya mas...
This comment has been removed by the author.
ReplyDeleteKeren........thanks y
ReplyDeleteKeren sob tutorialnya dan work 100% di blog saya Pasang Iklan Di Blog Ini
ReplyDeleteMAKASI MAS... UDAH BISA.
ReplyDeleteterimakasih mas bro
ReplyDeleteby http://budayabacabaca.blogspot.com
Sudah ane coba berhasil. Thanks bang ilmunya
ReplyDeleteinfo bagus gan, sangat bermanfaat bagi saya. Ditunggu kedatangannya di www.ankurniawan.blogspot.com
ReplyDeletemakasih gan infonya
ReplyDelete