Langsung ke konten utama

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

Postingan populer dari blog ini

Cara menggunakan mifi

Kebutuhan akses internet kian hari kian menjadi sebuah kebutuhan primer. Kita bagaikan tidak dapat hidup tanpa keberadaan internet itu sendiri. Bahkan mungkin ada orang diluaran saya yang rela tidak makan demi akses internet. Berikut ini akan saya jelaskan pilihan mifi 4G All operator yang terbaik untuk digunakan.Apa itu mifi?Mi-Fi (baca: mifi) adalah kependekan dari Mobile Wi-Fi. Yang namanya mobile sudah pasti dapat dibawa kemana-mana dan sangat fleksibel selayaknya mobile phone yang biasa kita genggam kemana-mana. Mifi sendiri berfungsi layaknya router yang berfungsi memancarkan/menyebarkan sinyal untuk selanjutnya dapat kita gunakan untuk berselancar didunia maya.
Sebenarnya sudah jelas apa itu mifi, dan sepatutnya tidak timbul pertanyaan lebih bagusan mana antara wifi atau mifi?
Sedangkan untuk pertanyaan tentang perbedaan wifi dan mifi kalian sebagai pembaca sudah lebih paham dari mengartikan kata Mobile Wi-fi diatas.Pilihan modem mifi GSMMiFi Huawei E5577CGambar diatas adalah Mi-…

Membuat Random Words dengan Codeigniter

Sejak helperrandom_element() hadir, semua custom function mulai di-migrasi. Semua koding tidak memerlukan keahlian khusus, hanya perlu logika. Termasuk dengan generator random words yang sangat dibantu oleh kehadiran fungsi ini.IntroGenerator Random Words adalah satu yang ingin saya bagikan. Di-Codeigniter sendiri sudah hadir yang namanya random_string() yang menghasilkan string acak. Sedangkan kali ini ingin berbagi dengan kata acak yang dapat diaplikasikan untuk helper seperti captcha. Cara ini sudah saya terapkan pula untuk captcha bawaan dari CI untuk beberapa proyek web.The StepsLangkah untuk membuat random word ini cukup mudah, hanya persiapkan database yang ada, tentu yang sudah ada artikelnya agar kata acaknya keluar sesuai konten yang ada. Daripada mencari api yang menyediakan kata acak dan tentu berbayar.
Untuk kasus ini, anggap saja kita memiliki DB dengan table bernama 'news' dengan kolom 'articles'. Dengan bantuan random_element() akan memuluskan fungsi gen…

Cara mudah membuat fungsi Unique Slug pada codeigniter

Membuat URL demi meningkatkan SEO itu ternyata penting, jika suatu web/blog yang kita bangun tersebut ingin dikenal oleh publik karena kita publikasikan. Dalam kasus ini adalah membuat URL (slug) unik pada Codeigniter. Beberapa cara singkat akan diulas dalam artikel ini.IntroTidak perlu menguasai ilmu tinggi, kita hanya perlu sedikit logika saja agar URL yang kita buat menggunakan CI lebih unik. Dan cara yang dapat kita terapkan semua dapat kita ambil dalam dokumentasi CI tersebut. Ada beberapa cara yang dapat saya ulas untuk Anda, dan cara-cara ini juga yang sering saya terapkan pada banyak projek web saya.The StepsAgar URL menjadi cantik, kita gunakan helperurl_title() yang telah disediakan CI. Fungsi ini sangat membantu, jadi kita tak perlu lagi membuat fungsi baru agar URL cantik.Encrypt SlugCara ini paling dasar, saya sering menggunakan cara ini karena malas otak-atik terlalu dalam. Saya biasa menyimpan slug dengan cara ini. Efektif dan sangat mudah. Caranya dengan menggunakan f…