belajar membuat tampilan Breadcrumbs yang bagus

Breadcrumbs adalah elemen navigasi yang digunakan untuk menampilkan kedalaman di mana pengguna saat ini berada di sebuah website. Biasanya  Breadcrumbs  hadir di dekat bagian atas tepat di atas pos pos atau judul utama halaman. ternyata Di Blogger tidak ada sub-direktori yang  nyata yang dapat menunjukkan jalan hirarkis dari isi website jadi kita akan menggunakan Label sebagai solusi. disini Breadcrumbs lengkap dengan css.

hasil dari  Breadcrumbs demo lihat gambar di bawah

langkah langkah 

1. Pergi ke Template> Edit HTML dan centang expand Widget Preview

2. Sekarang cari kode <div class='blog-posts hfeed'> dan tambahkan kode berikut dibawahnya atau setelah kode tersebut.

<b:if cond='data:blog.homepageUrl != data:blog.url'> 
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
      <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  
      <a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>
    </div>
 <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:loop values='data:posts' var='post'>
       <b:if cond='data:post.labels'>
         <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
           <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'>
             <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a> 
             </b:if>
           </b:loop>
          </div>
         <b:else/>
          <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
           <a href='#'><span> Unlabelled</span></a>
         </div>
       </b:if>
     </b:loop>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
       <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  
       <a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a>
      </div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
       <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
        <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
        <a expr:href='data:blog.url'><span itemprop='title'>Posts filed under <data:blog.pageName/></span></a>
       </div>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:if>

3. Sekarang cari ]]> </ b: skin> dan tambahkan CSS berikut sebelum itu atau di atas kode  ]]> </ b: skin>

.breadcrumbs {
list-style: none;
margin: 0;
}
.breadcrumbs  a {
color: #666;
display: inline-block;
font-size: 12px;
margin-left: -15px;
padding: 7px 17px 11px 25px;
position: relative;
text-decoration: none;
vertical-align: top;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPovpLnA9Rehq1UF22LWRPNHKkadZ22TDWiUpsaTAGBod0Si-wj13L_jrozKnvqEGcOq9pIY6SgWLWOWW3QTTCvHT3rsgY-xMN9U07Rhl-LNOKzS70iBreRofE4j4AeeqcegrXUoJWW5pO/s1600/hc_yarnlett_global.png');
background-repeat: no-repeat;
background-position: 100% 0;
z-index: 1;
}
.breadcrumbs  a:hover   {
background-position: 100% -48px;
color: #333;
}
.first , .first:hover {z-index: 30 !important;}
.first span {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPovpLnA9Rehq1UF22LWRPNHKkadZ22TDWiUpsaTAGBod0Si-wj13L_jrozKnvqEGcOq9pIY6SgWLWOWW3QTTCvHT3rsgY-xMN9U07Rhl-LNOKzS70iBreRofE4j4AeeqcegrXUoJWW5pO/s1600/hc_yarnlett_global.png');
margin-left: -26px;
padding: 7px 6px 11px 10px;
z-index: 12 !important;}
.breadcrumbs a:nth-child(2) {z-index:29 !important;}
.breadcrumbs a span:hover {
background-position: 0 -48px;
color: #333;
}

4. Simpan Template Anda dan Sekarang Breadcrumbs akan mulai muncul di Halaman Posting Anda, Halaman Label, Arsip Halaman serta Static Pages

moga bermanfaat