Cara memasang breadcrumb di blogger?

cara mudah memasang breadcrumb di blogger

Disini saya hanya mencoba mengembangkan sebuah kode yang siapa pertama kali membuatnya di Blogger. Kode ini sangat populer di Blogger bahkan banyak yang membuatnya lebih stylish dengan menambahkan kode CSS. Sebelumnya, kita bahas terlebih dahulu disini secara singkat, tapi maaf jika tidak sesuai atau masih melenceng.

Apa itu breadcrumb?

Breadcrumb itu hanyalah sebuah navigasi pada sebuah website. Kebanyakan, breadcrumb hadir pada sebuah website yang besar yang memiliki kategori dan banyak sub-kategori atau lebih mudah disebut hirarki. Menurut saya begitu, ingat ya ini menurut saya saja dan jangan jadikan patokan sebagai acuan. Berikut adalah contoh breadcrumb (gambar) atau bisa dilihat diatas judul pos ini. blogger breadcrumb using bootstrap

Apa fungsi/kegunaan breadcrumb?

Sedemikian rupa pemahaman saya mengenai definisi apa itu breadcrumb. Oleh karena itu beberapa fungsi breadcrumb lebih diperuntukkan kepada pengguna / user saja, kecuali kita telah melakukan optimasi terhadap kode breadcrumb agar lebih Search Friendly dimata Google.
Lebih detail, fungsinya mempermudah pengguna agar lebih mendpatkan pengalaman berselancar pada sebuah website / blog. Sedangkan di Google kita bisa lihat beberapa hasilnya seperti pada gambar dibawah ini. hasil pencarian cara menghilangkan bundle css blogspot

Cara membuat breadcrumb?

Sebelum melangkah lebih jauh dalam membuat breadcrumb, sebaiknya pahami dulu bagaimana struktur dalam html agar penulisannya juga enak dan kustom style-nya juga lebih mudah. Berikut ini sedikit kode berupa format html.

Breadcrumb untuk blog minim gaya


  <div class="breadcrumb">
    <a href="#!">Home</a>
    <a href="#!">Blogger</a>
    <a href="#!">Breadcrumb</a>
  </div>

Hanya dengan modal awal seperti tersebut saja (tanpa CSS) kita sudah memiliki tampilan breadcrumb. Hanya saja akan kurang menarik tampilan jika hanya seperti itu.
Karena breadcrumb dianggap sebagai navigasi pembantu, alangkah baiknya kita juga menjadikan ini layaknya sebuah menu yang penting. Kita dapat menggunakan sedikit gaya dengan merubah sedikit kode html (menggunakan list), hasilnya dapat seperti berikut ini.


  <ol class="breadcrumb">
    <li><a href="#!">Home</a></li>
    <li><a href="#!">Blogger</a></li>
    <li><a href="#!">Breadcrumbs</a></li>
  </ol>

Sudah menggunakan kode html tersebut, namun jangan lupa untuk menambahkan css sederhana agar lebih unik, caranya? lihat kode css berikut ini beserta live demo.


  <style>
  .breadcrumbs {
    list-style: none;
  }
  .breadcrumbs li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }
  .breadcrumbs li:last-child a {
    color: grey
  }
  .breadcrumbs li+li::before {
    display: inline-block;
    padding-right: .5rem;
    color: #6c757d;
    content: "/";
  }
  </style>
LIVE DEMO simple html breadcrumb

Kita dapat mengganti pembatas (separator) "garis miring" dengan tanda lain. Silakan gunakan kode ASCII atau karakter lain, atau jika ada, dapat diganti dengan gambar.

Disini, diblog ini saya menggunakan framework Bootstrap untuk membuat breadcrumbs termasuk semua elemen yang ada.

Lalu, bagaimana cara membuat breadcrumb di blog?

Kita sudah dapat struktur, selanjutnya tinggal bermain kode XML Blogger. Kita harus lebih banyak berfikir (kalau belum ada yang membuat), tapi untung kita tinggal copas saja dari kode yang telah dibagikan oleh banyak orang. Breadcrumb pada blogger yang banyak kita jumpai, kodenya seperti berikut ini.

Kode Breadcrumb hasil searching


<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "static_page"'>
    <ol class='breadcrumbs'>
      <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li> 
      <li><a expr:href='data:blog.url'> <span><data:blog.pageName/></span> </a></li>
    </ol>
 <b:else/>
  <b:if cond='data:blog.pageType == "item"'>
    <b:loop values='data:posts' var='post'>
       <b:if cond='data:post.labels'>
         <ol class='breadcrumbs'>
           <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
           <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
             <li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
             </b:if>
           </b:loop>
          </ol>
         <b:else/>
          <ol class='breadcrumbs'>
           <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
           <li><a href='#'><span> Unlabelled</span></a></li>
         </ol>
       </b:if>
     </b:loop>
   <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
      <ol class='breadcrumbs'>
       <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
       <li><a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a></li>
      </ol>
   <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
      <b:if cond='data:blog.pageName == ""'>
      <b:else/>
       <ol class='breadcrumb'>
        <li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
        <li><a expr:href='data:blog.url'><span>Posts filed under <data:blog.pageName/></span></a></li>
       </ol>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:if>

Kode tersebut hasil dari sedikit modifikasi, aslinya tanpa menggunakan list, sedangkan ini sudah saya tambahkan. Anda sudah dapat menggunakan kode tersebut di Blogger dengan kode CSS yang sudah saya lampirkan diatas. Kelemahan dari kode tersebut (ysang saya rasakan) adalah blog dengan label lebih dari satu hanya ditampilkan satu saja, dan itu yang terakhir.

Kode Breadcrumb mod

Dikarenakan saya lebih enjoy menggunakan Bootstrap, karenanya saya harus melakukan modifikasi guna menyesuaikan kode tersebut. Tapi disini saya lampirkan sesuai yang telah saya buatkan kode diatas. Dan berikut ini adalah kodenya.


<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <ol class='breadcrumbs'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <b:switch var='data:blog.pageType'>
      <b:case value='item'/>
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
            <b:loop values='data:post.labels' var='label'>
              <li><a expr:href='data:label.url'><data:label.name/></a></li>
            </b:loop>
          <b:else/>
            <li><a href='#!'>Unlabelled</a></li>
          </b:if>
       </b:loop>
     <b:case value='static_page'/>
       <li><a expr:href='data:blog.url'><data:blog.pageName/></a></li>
     <b:case value='archive'/>
       <li><a expr:href='data:blog.url'>Archives for <data:blog.pageName/></a></li>
     <b:case value='index'/>
       <b:if cond='data:blog.pageName == ""'>
      <b:else/>
        <li><a expr:href='data:blog.url'>Posts filed under <data:blog.pageName/></a></li>
      </b:if>
   </b:switch>
  </ol>
</b:if>

Dari kode modifikasi tersebut kita sudah dapat memasangnya di blog kita. Caranya akan segera dibahas dibawah ini, namun untuk dapat tampil di mesin pencari seperti Google, kita perlu juga menyesuaikan kodenya dengan menambahkan barisan elemen data type. Lebih detail bisa dibaca disini: https://developers.google.com/search/docs/data-types/breadcrumb.

Breadcrumb dengan data type

Sebelum lebih jauh memasang data types, kita pelajari dahulu di dokumentasi asli di: https://schema.org/BreadcrumbList. Setelah itu kita aplikasikan, ingat ini hanya saya set untuk breadcrumb pada pos saja dan hasilnya sebagai berikut.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <ol class='breadcrumbs' itemscope='' itemtype='http://schema.org/BreadcrumbList'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <b:switch var='data:blog.pageType'>
      <b:case value='item'/>
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
            <b:loop index='i' values='data:post.labels' var='label'>
              <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'><a itemprop='item' expr:href='data:label.url'><span itemprop='name'><data:label.name/></span></a>
              <meta itemprop='position' expr:content='data:i + 1' />
              </li>
            </b:loop>
            <li><data:post.title/></li>
          <b:else/>
            <li><a href='#!'>Unlabelled</a></li>
          </b:if>
       </b:loop>
     <b:case value='static_page'/>
       <li><a expr:href='data:blog.url'><data:blog.pageName/></a></li>
     <b:case value='archive'/>
       <li><a expr:href='data:blog.url'>Archives for <data:blog.pageName/></a></li>
     <b:case value='index'/>
       <b:if cond='data:blog.pageName == ""'>
      <b:else/>
        <li><a expr:href='data:blog.url'>Posts filed under <data:blog.pageName/></a></li>
      </b:if>
   </b:switch>
  </ol>
</b:if>
NOTE: Akan diperbarui

Artikel Terkait

Berlangganan pos via email

Powered by FeedBurner