Menampilkan daftar label (kategori) post di Blogger

Dalam mengelola blog, pastinya kita menginginkan tampilan yang menarik, supaya pembaca betah mengunjungi blog. Bahkan tertarik untuk membaca halaman-halaman lain dalam blog.

Untuk menambah rasa penasaran pengunjung, perlu ditambahkan link-link lain yang mengarah ke setiap post di blog kita. Salah satunya adalah daftar recent post. Untuk membuat recent post sebelumnya di blog ini sudah pernah dibahas.

Namun recent post terbatas, tidak mungkin menampilkan semua post dalam semua kategori. Sebagai gantinya, kita bisa menampilkan daftar label post atau kategori post yang ada di blog masing-masing. Karena memakan space lebih sedikit, semua kategori dapat ditampilkan.

Cara menampilkan daftar kategori post

Ini adalah cara menampilkan daftar kategori atau label post, hanya untuk blog di Blogger (Blogspot). Desainnya kurang lebih seperti pada gambar di bawah ini.

1. Masuk ke edit HTML

Setelah login ke Blogger dengan akun Google, pilih Tema, lalu klik panah di samping tombol sesuaikan/customize, lalu klik Edit HTML.

2. Tambahkan kode

Tambahkan kode javascript berikut ke bagian head.

  <!--SHOW ALL CATEGORY/LABEL IN BLOGGER/BLOGSPOT
         BY: https://bennyes.my.id-->
<script>
 function showCats(bldt){
	var showcat = document.getElementById('showcategory');
	for (var i = 0; i < bldt.feed.category.length; i++) {
    	var singlecategory = document.createElement('a');
    	singlecategory.classList.add('singlecategory');
    	singlecategory.target = '_blank';

        // Mengambil kategori/label dari Blogger JSON Feed API.
    	singlecategory.innerHTML = bldt.feed.category[i].term;

        // Mengarahkan link ke halaman pencarian label terkait
    	singlecategory.href = `https://domainblog.blogspot.com/search/label/${bldt.feed.category[i].term}`;

    	showcat.appendChild(singlecategory);
	}
   }
</script>
  

Ganti domainblog.blogspot.com dengan domain blog kalian.

Tambahkan kode CSS berikut

<style>
	#showcategory {
            display: flex;
            flex-direction: row;
            /* flex-direction: column; BILA INGIN DAFTAR KATEGORI
            BERBENTUK LIST KE BAWAH */
            flex-wrap: wrap;
        }
        a.singlecategory{
            background: #092040; /* SESUAIKAN DENGAN TEMA BLOG */
            color: #ffd43b; /* SESUAIKAN DENGAN TEMA BLOG */
            font-weight: bold;
            padding: 4px 7px;
            font-family:serif; /* SESUAIKAN DENGAN TEMA BLOG */
            width: max-content;
            height: max-content;
            margin-right: 10px;
            margin-bottom: 2px;
        }

        /*UNTUK MENGAKTIFKAN EFEK HOVER
        TUKAR WARNA COLOR DENGAN BACKGROUND, ATAU SESUAIKAN DENGAN SELERA*/
        a.singlecategory:hover{
        	background: #ffd43b; /* SESUAIKAN DENGAN TEMA BLOG */
        	color: #092040; /* SESUAIKAN DENGAN TEMA BLOG */
        }
</style>
  

Tambahkan elemen HTML dan script berikut di bagian tempat kalian akan meletakkan daftar label.

<div class="innercontainer">
  <h3 class="title inH">Kategori</h3>
  <div id="show-category"></div>
</div>
<script src="https://domainblog.blogspot.com/feeds/posts/summary?max-results=999&amp;alt=json-in-script&amp;callback=showCats"></script>
  

Ganti domainblog.blogspot.com dengan domain blog kalian.

Setelah script di atas dijalankan, script akan langsung memanggil fungsi (callback) showCats(bldt) yang sudah dijabarkan di kode paling atas. Nama 'showCats' ini bisa diganti, yang penting nama di script dan di fungsi sama.

Bacaan lebih lanjut

1. Panduan mengakses Blogger JSON Feed API oleh Google. https://developers.google.com/gdata/samples/blogger_sample