Cara membuat navigasi breadcrumb di blogger

thumb

Breadcrumbs adalah salah satu fitur dalam blog/situs internet. Breadcrumbs biasanya terletak di bagian atas halaman.

Fungsi breadcrumbs adalah menginformasikan kepada pembaca posisi halaman yang sedang dibuka ada di dalam kategori dan subkategori apa, sehingga pembaca bisa mengetahui posisi halaman. Lewat breadcrumbs pembaca juga dapat terbantu untuk memahami isi halaman. Pembaca juga bisa saja menjadi tertarik untuk melihat post lainnya dalam kategori yang ditunjukkan.

Kok namanya breadcrumbs?

Kata breadcrumb secara harfiah bila diterjemahkan ke Bahasa Indonesia berarti remah roti. Sedangkan bentuk jamaknya, breadcrumbs dapat berarti (banyak) remah-remah roti atau bisa juga berarti tepung roti (panir).

Ternyata pemberian nama breadcrumbs (remah roti) untuk bagian ini berasal dari dongeng anak-anak. Istilah ini diambil dari dongeng Jerman Hansel dan Gretel (Inggris: Hansel and Gretel, Jerman: Hänsel und Gretel; dibaca: Hénsel und gretel, "é" seperti huruf "e" pada kata cetak).

Dalam dongeng Hansel dan Gretel, ada satu saat ketika orang tua dari kakak beradik Hansel-Gretel ingin membuang mereka ke hutan karena tidak kuat mengurus mereka dalam keadaan miskin dan kelaparan. Karena Hansel mengetahui rencana jahat orang tua mereka, di sepanjang jalan Hansel pun menebarkan remah roti (breadcrumb) agar dari hutan mereka bisa mengikuti jejak remah roti dan kembali ke rumah, walaupun setelah itu ternyata mereka gagal pulang karena remah rotinya dimakan burung.

Berdasarkan dongeng itulah muncul istilah breadcrumbs dalam situs/blog, yang tujuannya mirip dengan dongeng. Di dongeng, fungsi si "remah-remah roti" ini adalah untuk menunjukkan posisi si Hansel dan Gretel dari rumah dan melacak jalan kembali ke rumah. Sedangkan di website, si "remah-remah roti" ini berfungsi untuk menunjukkan posisi halaman dari halaman beranda (home) dan dapat mengarahkan kembali ke beranda.

Desain breadcrumbs

Artikel ini menjelaskan kode untuk membuat breadcrumb hanya untuk blog blogger/blogspot, tidak untuk yang lain, karena data blog diambil dari Blogger JSON Feed API. Bahasa yang digunakan adalah HTML dan JavaScript.

Ini adalah desain breadcrumb yang akan dibuat:

Home » Tag 1 » Tag 2 » Judul post

Kode

  1. Tambahkan kode HTML ini tepat di atas judul post (di atas conditional tag <b:if cond='data:post.title'> dan elemen <h1 class="post-title entry-title">) melalui edit tema (Tema » Panah di sebelah kanan "Sesuaikan" » Edit)
  2. <div id='breadcrumb'/>
  3. Tambahkan kode javascript di bawah ini di dalam tag <head></head>. Salin bersama dengan kode //<[CDATA[ dan //]]>.
  4. 
    <b:if cond="data:view.isPost"> /* Blogger conditional tag untuk membuat breadcrumbs
                                        hanya terlihat di Post, tidak di halaman lain */
    <script>
       //<[CDATA[
       var tagOrder;
       function breadcrumb_generator(a){ /* a = data JSON Feed blog yang didapat dari
                                                 Blogger JSON Feed Api */
    
         // mengambil tag dengan ID "breadcrumb" yang sudah ditambahkan lewat proses di atas
         var breadcrumb = document.getElementById('breadcrumb');
    
         // mengambil judul post dari halaman
          var postTitle = document.getElementsByClassName('post-title')[0];
    
         // data entry post
          var post = a.feed.entry;
    
         // Mulai dari homelink (halaman beranda)
          var homelink = document.createElement('a');
          hlink.innerHTML = 'Home';
          hlink.href = '/';
          breadcrumb.appendChild(hlink);
    
         // Menambahkan kategori
          for (var i = 0; i < post.length; i++){
            if (post[i].title.$t == postTitle.innerHTML){
              /* post[i].title.$t atau a.feed.entry[i].title.$t adalah judul post ke sekian (i)
                   dalam JSON Feed API. kondisi ini mengecek apakah judul post di satu halaman
                   sesuai dengan judul di JSON Feed Api */
              var postCategory = post[i].category; /* mengambil semua kategori dalam satu
                                                          post berjudul post[i].title.$t */
              for (var j = 0; j < postCategory.length; j++){
    
                // Menambahkan separator (pembatas) tanda "»"
                var separator = document.createElement('span');
                separator.classList.add('separator');
                separator.innerHTML = '&#187;'; // "&#187;" adalah kode HTML untuk tanda "»"
                breadcrumb.appendChild(separator);
    
                // Menambahkan kategori dan linknya
                var categorylink = document.createElement('a');
                // Mengecek jika var tagOrder ada
                if (!tagOrder) {
                  categorylink.innerHTML = postCategory[j].term;
                }
                else {
                  categorylink.innerHTML = postCategory[tagOrder[j]].term;
                }
                categorylink.href = `https://domainblog.blogspot.com/search/label/${categorylink.innerHTML}`;
                breadcrumb.appendChild(categorylink);
              }
              /* Menambahkan judul di akhir breadcrumbs*/
              separator = document.createElement('span');
              separator.classList.add('title');
              separator.innerHTML = '&#187;';
              breadcrumb.appendChild(separator);
              var judul = document.createElement('span');
              judul.innerHTML=`<b>${pos[i].title.$t}</b>`;
              breadcrumb.appendChild(judul);
            }
          }
        }
        //]]>
       </script>
    </b:if>
        
  5. Tambahkan ini di bagian akhir halaman (sebelum tag </body>) atau di bagian akhir post (sebelum komentar):
  6. 
    <script src="https://domainblog.blogspot.com/feeds/posts/summary?max-results=999&amp;alt=json-in-script&amp;callback=breadcrumb_generator"></script>
          
  7. Tambahkan kode CSS. Kurang lebih seperti di bawah ini. Bebas untuk mengatur bagaimanapun gayanya.
  8. 
    <style>
      #breadcrumb {
        font-size: 14px; /* Sebaiknya lebih kecil dari font paragraf */
        font-family: serif; /* Sesuaikan dengan tema */
      }
      #breadcrumb b {
        font-weight: bold; /* Bebas */
      }
      .separator {
        margin: 0 5px;
        font-weight: bold; /* Bebas */
      }
    </style>
          
  9. Opsional: Buat satu post baru, atau buka post yang sudah ada. Di bagian akhir masukkan script ini:
  10. 
    <script>
      tagOrder = [1,2,0]; // penjelasan di bawah
    </script>
          

    Array tagOrder, seperti yang sudah disebutkan di kode javascript pertama, adalah urutan tag yang mau ditampilkan terlebih dahulu di breadcrumbs. Blogger selalu mengurutkan tag/kategori sesuai dengan urutan abjad Latin (ABCD~~Z). Semua tag tersebut juga kedudukannya sama, tidak ada yang berperan sebagai sub-kategori atau sub-sub-kategori. Contohnya bila ada 3 tag yang ditambahkan: "Media Sosial", "Internet", "Fesbuk"; maka akan ditampilkan sebagai: "Fesbuk", "Internet", "Media Sosial".

    Variabel tagOrder ditentukan bila ingin membuat seolah-olah post tersebut memiliki kategori utama, sub-kategori, dan sub-sub-kategori. contohnya, post termasuk dalam kategori "Internet", sub-kategori "Media Sosial", dan sub-sub-kategori "Fesbuk"

    Dalam urutan tag yang disusun oleh blogger: "Fesbuk", "Internet", "Media Sosial", "Fesbuk" memiliki urutan/index 0, "Internet" memiliki urutan 1, dan "Media Sosial" memiliki urutan 2. Bila kita ingin menampilkan sesuai susunan ini: "Internet", "Media Sosial", "Fesbuk" maka buat isi array tagOrder menjadi [1,2,0]. Namun array ini tidak perlu diberi nilai jika tidak ingin mengurutkannya.

Sekian

Itu adalah kode untuk membuat breadcrumbs menggunakan HTML (+CSS) dan JavaScript. Bila ada kesalahan atau kode tidak berfungsi mohon tulis di komentar, agar kesalahan dapat diperbaiki. Boleh juga saling berbagi kode di komentar.

Sumber informasi

    Komentar