Cara Memasang Scroll Pada Label / Kategori Blog

Translate

Setelah sekian lama saya tidak pernah update posting, Kali ini saya akan share posting dan berbagi trik yang mudah tentang Cara Membuat Dan Memasang Scroll Pada Label Categori Blog.


Mungkin jika sobat ingin blognya kelihatan rapi dan bersih, Maka sobat bisa menggunakan trik yang akan saya share ini. Karena fungsi dari memasang scroll adalah untuk menyingkat pada bagian widget maupun gadget agar kelihatan rapi dan enak di pandang. Intinya tampilan blog kita jadi simpel, karena biasanya kalau label atau kategori di blog kita sangat banyak maka akan memakan banyak tempat di template blog kita. Jadi kita bisa memasang scroll pada label atau kategori blog, agar tampilan blog kita jadi menarik dan singkat.


Seperti contohnya sobat bisa lihat di blog ini , Pada bagian Label atau kategori di samping (Sidebar) sudah saya pasang scroll. Kelihatan sangat simpel kan sobat??? Namun tetap bisa menampilkan semua label atau kategori, Karena dengan adanya scroll.

Jika sobat tertarik ingin Membuat Dan Memasang Scroll Pada Label Kategori Blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

Cara 1;

1. Silahkan sobat >>"Masuk/Login" ke Blog sobat.
2. Pilih >> Menu >> "Template" >> "Edit Html" >> Lanjutkan >> Jangan lupa sobat Centang kotak kecil "Expand Template Widget".
3. Kemudian Cari kode ]]></b:skin>  , Gunakan CTRL + F untuk mempercepat dan memudahkan pencarian.
Lihat Gambar berikut:

KETERANGAN:
• No 1 adalah pencarian cepat menggunakan CTRL + F. Jika sobat sudah sampai pada >> Menu >> Template >> centang Expand Template Widget, Maka gunakan CTRL + F , dan isikan ]]></b:skin> ada kotak seperti gambar no 1 diatas, guna untuk mempercepat pencarian.


• No 2 adalah letak kode pada kode Html template sobat.
• No 3 adalah kode Scroll yang akan kita tambahkan.
4. Langkah yang selanjutnya silahkan sobat Copy/salin semua Kode Html di bawah ini dan Paste/tempel tepatdiatas/sebelum Kode ]]></b:skin> , seperti pada gambar di atas.
________________________________________
#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
________________________________________
CATATAN:
• height:200px; adalah Nilai Tinggi Kotak Scroll, Silahkan sobat ganti seperti keinginan sobat.
• #Label1 adalah Id Html Gadget blog sobat. tidak perlu diganti.
5. Langkah yang terakhir jangan lupa sobat klik >> "Pratinjau" untuk menghindari kesalahan waktu Edit Html Template sobat.
Jika hasilnya sudah seperti yang sobat inginkan, Silahkan sobat klik >> "Save/Simpan Template".


Cara 2;

pada dasarnya hampir sama seperti dengan cara 1 hanya cara ini lebih simple tinggal copy /paste saja keterangan dibawah pada menu template blog anda.

Cara Membuat Scroll pada Label


Jika anda yang berkenan memasangnya di blog, ikuti saja langkah-langkahnya :
1. Masuk ke Blogger
2. Pilih Menu Template
3. Lalu pilih Edit Template, kemudian pilih lanjutkan
4. Cari kode berikut :


<b:widget id="Label1" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
</b:if></b:includable></b:widget>
<h2>
<data:title></data:title></h2>

<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=".name">
</data:label></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label .name=".name">
</data:label></a>
</b:else>
<span dir="ltr">(<data:label .count=".count">)</data:label></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">
<div style="height: 200px; overflow: auto;">
<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=".name">
</data:label></span>
<b:else>
<a dir="data:blog.languageDirection" href="data:label.url">
<data:label .name=".name">
</data:label></a>
</b:else>
<span dir="ltr">(<data:label .count=".count">)</data:label></span>
</b:if></li>
</b:loop> </ul>
<b:include name="quickedit">
</b:include></div>
</div>


Keterangan :
• 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.

Sampai di sini mungkin sobat sudah mengerti Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog. Semoga bermanfaat..

Edit; wawansurya
Sumber;
www.affiliate-waones.com

Artikel Menarik Lainnya :