Memang sangat tidak enak dipandang dan bikin susah jika terdapat banyak label. Apa lagi jika jika dibuat tampilannya mendatar, satu-satu dari atas. Sidebar jadi terlihat memanjang ke bawah. Tidak seimbang dengan post area. Oleh sebab itu untuk mengakalinya bisa memberi scoll pada label. Sehingga fungsi scroll akan membuat lebih rapi.
Screenshot :
Cara Memberi Scroll pada Label di Blog
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut :
<b:widget id='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<div style='overflow:auto; width:ancho; height:300px;'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
6. Kode yang berwarna merah adalah kode yang harus kita sisipkan, dan 300px adalah tingginya.
7. Simpan Template jika sudah selesai.
Jika di template kamu tidak menemukan kode
dan sisipkan kode yang berwarna merah setelah itu.
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>berarti cari kode <div class='widget-content'>
dan sisipkan kode yang berwarna merah setelah itu.
Cara membuat Scroll pada widget label, Blog Archive, Popular Post
1. Login ke Blogger
2. Klik Rancangan รข Edit HTML
3. Klik tulisan Download Template Lengkap
Kemudian cari kode seperti berikut :
Contoh membuat Scroll untuk arsip blog (BlogArchive1) caranya cari kode ]]></b:skin> Copy kode dibawah ini dan Paste di atasnya kode tadi :
Simpan Template......
2. Klik Rancangan รข Edit HTML
3. Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template WidgetKemudian cari kode seperti berikut :
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
Contoh membuat Scroll untuk arsip blog (BlogArchive1) caranya cari kode ]]></b:skin> Copy kode dibawah ini dan Paste di atasnya kode tadi :
#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
Simpan Template......
Contoh lainnya jika ingin memasang kan scroll pada widget lain tinggal ganti Kode id berwana biru (BlogArchive1) contoh untuk label blog masukkan kode id berikut Label1 atau untuk Entri Populer dengan kode id PopularPosts1 nama id tersebut silahkan sesuaikan dengan template kawan-kawan....
Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog
Setelah sekian lama saya tidak pernah update posting, Kali ini saya akan share posting dan berbagi trik yang ringan 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:
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>pada 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.
#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.
Jika hasilnya sudah seperti yang sobat inginkan, Silahkan sobat klik >> "Save/Simpan Template".
Sampai di sini mungkin sobat sudah mengerti Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog, Jika sobat belum jelas, silahkan bertanya. Dan saya akan menjelaskanya secara detail.
0 komentar:
Posting Komentar