Memasang Breadcrumbs Di Blogger
Thursday, November 15, 20183 Comments
Memasang Breadcrumbs Di Blogger

Memasang Breadcrumbs Di Blogger

  • Eka Awaludin

  • A dreamer who trying to loves writing and blogwalking. Man of nature. The wrong man in the wrong time. Going with the flow. Penggemar CSS dan HTML.
Aku berkali-kali kehilangan fitur Breadcrumbs setelah berkali-kali ngedit template blogku padahal udah di pasang dengan rapih, dan berkali-kali pula aku bolak-balik nyari tutorialnya lagi di Google. Setelah nyari di Google aku dapet kode yang pas dan bisa di terapkan di blogku. Oke langsung aja ke cara pemasangan nya.

Pemasangan
Sisipkan kode berikut ini setelah kode <head>. Ini adalah font dari Google font yang akan di gunakan di breadcrumb.
<link href='https://fonts.googleapis.com/css?family=Monda' rel='stylesheet'/>
Simpan kode CSS ini di bagian style blog kamu.
/* Breadcrumbs */

.breadcrumbs {
 font-family: 'Monda', sans-serif;
 overflow: hidden;
 padding: 8px 25px;
 text-transform: none;
 color: #fff;
 font-size: 13px;
 background-color: #4b515d;
 border-left: 10px solid #414753;
}

.breadcrumbs a,
.breadcrumbs a:link {
 transition: all 200ms ease-in-out 0s;
 color: #ddd;
 text-decoration: none;
}

.breadcrumbs a:visited {
 color: #ddd;
 text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:visited:hover {
 color: #fff;
 text-decoration: underline;
}
Cari dan ganti kode di bawah ini.
<b:includable id='main' var='top'>
Ganti dengan kode di bawah ini.
<b:includable id='breadcrumb' var='posts'>
 <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <div class='breadcrumbs'>
    <span>
     <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
    </span> &#8250; 
    <span>
     <data:blog.pageName/>
    </span>
   </div>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.labels'>
      <div class='breadcrumbs'
       xmlns:v='http://rdf.data-vocabulary.org/#'>
       <span typeof='v:Breadcrumb'>
        <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a>
       </span>
       <b:loop values='data:post.labels' var='label'>
&#8250; 
        <span typeof='v:Breadcrumb'>
         <a expr:href='data:label.url' property='v:title' rel='v:url'>
          <data:label.name/>
         </a>
        </span>
       </b:loop>
&#8250; 
       <span>
        <data:post.title/>
       </span>
      </div>
      <b:else/>
      <div class='breadcrumbs'>
       <span>
        <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
       </span> &#8250; 
       <span>Unlabelled</span> &#8250; 
       <span>
        <data:post.title/>
       </span>
      </div>
     </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
     <!-- breadcrumb for the label archive page and search pages.. -->
     <div class='breadcrumbs'>
      <span>
       <a expr:href='data:blog.homepageUrl'>Home</a>
      </span> &#8250; 
      <span>Archives for 
       <data:blog.pageName/>
      </span>
     </div>
     <b:else/>
     <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div class='breadcrumbs'>
       <b:if cond='data:blog.pageName == &quot;&quot;'>
        <span>
         <a expr:href='data:blog.homepageUrl'>Home</a>
        </span> &#8250; 
        <span>All posts</span>
        <b:else/>
        <span>
         <a expr:href='data:blog.homepageUrl'>Home</a>
        </span> &#8250; 
        <span>Posts filed under 
         <data:blog.pageName/>
        </span>
       </b:if>
      </div>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:includable>
<b:includable id='main' var='top'>
Cari kode berikut ini.
<div class='post-footer'>
Dari pengalaman saya, kita akan menemukan dua buah kode seperti itu. Lewati kode yang pertama dan simpan setelah kode yang kedua. Kemudian simpan kode berikut ini setelah kode tadi.
<b:include data='posts' name='breadcrumb'/>
Simpan template. Hasil akhirnya kira-kira akan seperti gambar di bawah ini.
Breadcrumb di bagian bawah post
Breadcrumb akan muncul di bawah postingan. Kamu tinggal menyesuaikan nya seperti yang kamu inginkan. Apabila ada yang kurang jelas dan ingin di tanyakan bisa di tulis di kolom komentar. Sekian untuk artikel kali ini, kita jumpa lagi di artikel berikutnya. Ciao!

Referensi
  • http://www.contohblog.com/2013/10/cara-memasang-breadcrumb-di-blogspot.html
3 comments :