Cara Memasang Breadcrumb Navigation Di Blog (Seo On-Page)

Erlangga Hidayatullah - Kali ini saya ingin share tutorial blog dan nyambung ke tentang SEO yaitu cara membuat Breadcrumb Navigation agar blog menjadi lebih SEO Friendly dan bisa meningkat Pagerank blog. Nah Breadcrumb ini masuk dalam kegiatan SEO On-Page
Apa itu Breadcrumb Navigation ? Breadcrumb Navigation adalah suatu navigasi untuk konten blog agar pengunjung blog kita bisa menjelajahi kontent blog kita dengan mudah. Dan lewat mana artikel tersebut dikunjungi, tanpa harus pusing untuk menjelajahinya.Pasti bingung letak Breadcrumb ini dimana. Letak Breadcrumb ini di atas title artikel atau post
Atau lihat gambar di bawah ini

Lihat yang di beri panah warna merah, nah itu yang namanya Breadcrumb Navigation.
Nah jika sudah paham apa itu Breadcrumb kita lanjut ke cara pemasangannya.

Cara Memasang Breadcrumb Navigation Di Blog

1. Masuk Ke Blogger » Template » Edit Html
2. Jika Sudah, Cari Kode Di Bawah Ini Menggunakan CTRL + F 

]]></b:skin>

3. Jika Sudah Ketemu, Letakan Script Css Di Bawah Ini, Di Atas Kode Yang Kamu Cari Tadi
   

   .breadcrumb {
   padding:1px ;
   margin:0 0 9px 0 ;
   font-size:13px ;
   text-shadow:0px 0px 0px;
   }

4. Kalau Sudah, Langsung Cari Kode Di Bawah Ini
   

   <b:includable id='main' var='top'>

5. Dan Ganti Kode Yang Di Cari Tadi 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='breadcrumb'><span><a expr:href='data:blog.homepageUrl' expr:title='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span></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='breadcrumb'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
   </div>
   <b:else/>
   <div class='breadcrumb'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Without category</span> &#187; <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='breadcrumb'>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
   </div>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <div class='breadcrumb'>
   <b:if cond='data:blog.pageName == &quot;&quot;'>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
   <b:else/>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'>
   <b:include data='posts' name='breadcrumb'/>

6. Yang Di Beri Warna Merah Bisa Di Ganti Dengan Kata - Katamu Misal HOME Menjadi Beranda.
7. Simpan Template. 

Cuman itu artikel hari ini. jika ada kesalahan silahkan berkomentar, insaaloh admin terus online dalam blog
Sekian semoga artikel ini bermanfaat. dan terima kasih
Salam Blogger Newbie ...