Modifikasi Widget Label by Category
Modifikasi Widget Label by Category. Widget label merupakan salah satu navigasi yang paling membantu pengunjung blog untuk bisa menjelajah seluruh isi blog berdasarkan kategori atau label.
Seperti yang kita ketahui dalam tehnik SEO onpage, tentu saja widget tersebut sangat diperlukan untuk mencegah bounching dari visitor. Karena bisa menambah page view blog kita.
Memang widget ini sudah lama beredar di blog-blog tutorial yang asli maupun yang cuma copas script (termasuk saya 😆) tetapi dalam artikel ini saya mencoba untuk memodifikasinya sedemikian rupa sehingga mudah dipergunakan atau dipasang kedalam blog sobat. Let's check it out!!
Modifikasi Widget Label by Category
Yang pertama harus sobat lakukan adalah buka halaman dashboard blogger kemudian klik tambahkan gatget di menu tata letak. Bisa di sidebar atau di footer terserah sobat.Pilih HTML/Javascript kemudian copas kode dibawah ini
<div class='labelcategory'>
<script type='text/javascript' src='https://cdn.rawgit.com/agungjakanugraha/label-by-category/321be5b3/label-by-category.js'></script>
<script type='text/javascript'>
var numposts = 5; // Jumlah Post yang di tampilkan
var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]
var displaymore = false; // Ganti "true" untuk menampilkan link [More]
var displayseparator = false;
var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]
var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]
var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]
var numchars = 60; // Character Deskripsi yang di tampilkan
</script>
<script type="text/javascript" src="/feeds/posts/default/-/nama%20label?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
</div>
Keterangan :
- Yang ditandai merah silakan ganti dengan nama label sobat.
- Ingat!! untuk penamaan label yang berjumlah lebih dari 1 kata sematkan tanda "%20" diantara kata tersebut.
- Nama label responsif terhadap huruf kapital dan tidak. Jika nama label berawalan huruf kapital, maka tulislah dengan huruf kapital. Cara termudahnya silakan klik nama label yang ada di breadcrumb di blog sobat kemudian lihat penamaannya. Contoh "/Info%20pendidikan" untuk nama label Info pendidikan. "/tutorial%20Blog" untuk nama label tutorial Blog
CSS style 1 (tanpa thumbnail)
<style>
img.label_thumb{display:none}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li h3{padding:0;margin:0;display:block}
ul.taglabel li{padding:5px 0;list-style:none;font-size:65%;border-bottom:1px solid #efefef;line-height:1.5em}
ul.taglabel li a{font-weight:bold;line-height:1px}
</style>
CSS style 2 (dengan thumbnail)
<style>
img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li h3{padding:0;margin:0;display:block}
ul.taglabel li{padding:5px 0;list-style:none;font-size:65%;min-height:73px;line-height:1.5em}
ul.taglabel li a{font-weight:bold;line-height:1px}
</style>
<style>
img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li h3{padding:0;margin:0;font-size:1.2emul.taglabel li{padding:5px 0;list-style:none;font-size:65%;min-height:73px;line-height:1.5em}
ul.taglabel li a{font-weight:bold;line-height:1px}
ul.taglabel li:first-child img{width:100%;height:150px;object-fit:cover}
</style>
CSS style 4 (dengan 1 thumbnail besar di kiri dan tanpa thumbnail di kanan)
<style>img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li h3{padding:0;margin:0;font-size: 1.2em;display:block}
ul.taglabel li{padding:5px 0;list-style:none;font-size:75%;line-height:1.5em;float:right;width:45%;border-bottom:1px solid #efefef;margin-bottom:5px}
ul.taglabel li a{font-weight:bold;line-height:1px}
ul.taglabel li:first-child img{width:100%;height:150px;object-fit:cover}
ul.taglabel li:first-child a{font-size:1.3em;line-height:1.4em}
ul.taglabel li:first-child{float:left;width:50%;margin-right:20px}
</style>
CSS style 5 (dengan 1 thumbnail besar di kiri dan thumbnail kecil di kanan)
Untuk menggunakan style 5 ini sobat rubah settingan "var numposts = 5; // Jumlah Post yang di tampilkan" pada script diatas menjadi "var numposts = 4;" karena ukuran thumbnail sebelah kanan tidak seimbang dengan thumbnail besar sebelah kiri.
<style>
img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li h3{padding:0;margin:0;font-size:1.2em;
ul.taglabel li{padding:5px 0;list-style:none;font-size:75%;min-height:73px;line-height:1.5em;float:right;border-bottom:1px solid #efefef;width:45%}
ul.taglabel li a{font-weight:bold;line-height:1px}
ul.taglabel li:first-child img{width:100%;height:150px;object-fit:cover;margin-bottom:5px}
ul.taglabel li:first-child a{font-size:1.3em;line-height:1.4em}
ul.taglabel li:first-child{float:left;width:50%;margin-right:20px}
</style>
Langkah terakhir Simpan Widget
Untuk penggunaan semua style sobat tidak perlu memasang <script type='text/javascript' src='https://cdn.rawgit.com/agungjakanugraha/label-by-category/321be5b3/label-by-category.js'></script> banyak-banyak, cukup satu saja taruh di atas </head> di menu tema ⇒ edit HTML. Di HTML/Javascript cukup pasang style CSS dan script yg paling atas.
Sebenarnya masih bisa dimodifikasi lagi tergantung kreatifitas kita bagaimana tampilannya nanti dengan mengutak atik CSSnya. Namun dari saya cukup itu saja, karena saya sudah capek ngetik, hehehhe...
Demikian tutorial modifikasi widget label by category semoga bermanfaat. Terima kasih telah membaca artikel Agung jaka Nugraha. Wassalam
