Cara membuat breadcrumb pada blogger

Membuat breadcrumb pada blog merupakan salah satu tips Seo yang dapat memudahkan posting atau blog mudah terindex search engine. Banyak blog menyiadakan HTML breadcrumb dan CSS breadcrumbs atau mengulas tentang breadcrumbs, akan tetapi setelah kita pasang html breadcrumbs tersebut pada blog. Ternyata xml tidak valid atau error. Banyak sekali cara agar blog
Seo freindly . Diantaranya mengganti atau Edit template blog agar Seo friendly, membuat artikel terkait atau realeted post pada blog,dan sekarang ini yang sedang di bahas ini membuat navigator blog atau breadcrumbs pada blog
Untuk itu saya share Cara membuat breadcrumbs yang telah teruji di blog saya ini, jadi tidak salahnya yang sudah sekian banyaknya mencoba cara membuat breadcrumbs gagal, boleh mencoba cara ini.
Bagaimana caranya langsung aja simak.

• 1. Masuk ke blogger --> edit template --> centang expand widget --> masukan kode css untuk breadcrumbnya, taruh di atas kode ]]></b:skin>
  
  
  .breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font- size:11px;border-bottom:1px dotted #ccc;font-weight:normal}
  
  
• 2 cari kode <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut,

 

• <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> &#187; <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'>
  <b:if cond='data:label.isLast == &quot;true&quot;'>
  &#187; <span typeof='v:Breadcrumb'><a
  expr:href='data:label.url'
  property='v:title'
  rel='v:url'><data:label.name/></a></span>
  </b:if> </b:loop>
  &#187; <span><data:post.title/></span>
  </div>
  <b:else/>
  <div class='breadcrumbs'>
  <span><a expr:href='data:blog.homepageUrl'
  rel='tag'>Home</a></span> &#187; <span>Unlabelled</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='breadcrumbs'>
  <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='breadcrumbs'>
  <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'/>
  
  
• 3. Terakhir simpan template dan lihat hasilnya.

catatan: bila tidak berhasil cara memasang css dan html breadcrumbs pada blog coba teliti kembali html yang telah kita pasang biasanya kesalahan terjadi pada html yang tag nya salah. sebagai contoh: < /span> itu salah dan seharusnya tidak ada spasi setelah tanda kurung </span> . Mohon diteliti kembali sebelum memasang kode tersebut.

Semoga bermanfaat atikel tentang Cara membuat Breadcrumbs pada blog.