Cara Membuat Navigasi Breadcrumbs Pada Blogspot

Breadcrumbs, makhluk apa pula nih? Saya sendiri kurang begitu ngerti mengapa istilahnya menjadi "remah roti" seperti ini. Tapi menurut wikipedia, breadcrumbs "is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents".

Konon, dengan navigasi breadcrumbs ini dapat meningkatkan SEO. Benar atau tidaknya belum tahu juga, soalnya dalam logika awam seperti saya, breadcrumbs ini sama saja dengan tag yang terdapat di bawah judul artikel (ada juga yang di bawah artikel) dan blog-pager. Namun sekalipun demikian, SC Community tetap memakainya, karena siapa tahu memang benar-benar mampu meningkatkan SEO, kan lumayan juga tuh, hehehe...

Bagi yang belum tahu makhluknya seperti apa, lihat saja navigasi yang terletak di atas judul artikel ini, yang memuat home page, tag (kategori), dan judul artikel.

Jika kamu tertarik dan ingin membuatnya, seperti biasa:

• Dari dasbor, pilih Template - Edit HTML(untuk amannya, duplikasi template terlebih dahulu).
• Beri tanda centrang pada Expand Template Widget.
• Kemudian tambahkan CSS berikut di atas kode ]]></b:skin> :

  
  .breadcrumbs { 
  padding:0px 5px 5px 0px;
  margin:0px 0px 15px 0px;
  font-size:11px;
  line-height:14px;
  border-bottom:3px double #CCC;
  }
  

  Ukuran (padding, margin, font-size, line-height) sesuaikan dengan template kamu.

• Selanjutnya cari kode:

  
  <div class=post>
  

• Jika sudah ketemu, tambahkan kode berikut di bawahnya:

  
  <!--awal breadcrumbs-->
  <b:if cond=data:blog.homepageUrl == data:blog.url>
  <b:else/>
    <b:if cond=data:blog.pageType == &quot;item&quot;>
  
        <div class=breadcrumbs>
         Browse &#187;  <a expr:href=data:blog.homepageUrl rel=tag>Home</a>
    <b:loop values=data:posts var=post>
        <b:if cond=data:post.labels>
         <b:loop values=data:post.labels var=label>
              <b:if cond=data:label.isLast == &quot;true&quot;> &#187;
                <a expr:href=data:label.url rel=tag><data:label.name/></a>
              </b:if>
  &#187; <span><data:post.title/></span>
         </b:loop>
        </b:if>
    </b:loop>
        </div>
  
    </b:if>
  <b:else/>
  <b:if cond=data:blog.pageType == &quot;archive&quot;>
  
  <div class=breadcrumbs>
  Browse &#187; <a expr:href=data:blog.homepageUrl>Home</a> &#187; Archives for <data:blog.pageName/>
  </div>
  
  </b:if>
  <b:else/>
    <b:if cond=data:navMessage>
        <div class=breadcrumbs>
        <data:navMessage/>
        </div>
    </b:if>
  </b:if>
  <!--akhir breadcrumbs-->
  

• Setelah itu save, lalu ucapkan Alhamdulillah...

Ok, segitu aja sob. Semoga bermanfaat .....