Cara membuat Menu Navigation Breadcrumb

Tutorial saya kali ini berhubungan dengan SEO yaitu cara membuat navigation breadcrumb yang bisa terindeks google. Menu navigation Breadcrumb adalah salah satu menu navigasi yang di ambil dari label setiap postingan. Menu breadcrumb sangat bermanfaat bagi si pembaca karena dengan adanya menu ini pengunjung blog akan lebih mudah menjelajahi blog kita berdasarkan label postingan. Selain itu juga dapat membuat blog SEO frendly. Menu breadcrumb biasanya terletak di atas judul postingan. Sobat bisa lihat menu breadcrumb di atas judul postingan ini. Breadcrumb yang akan kita buat yang bisa terindeks oleh google.

Menu navigation breadcrumb yang terindeks google.

Berikut langkah-langkahnya:
1.  Login ke blog kamu.
2.  Setelah masuk ke dashboard. klik menu Template.
3.  Klik Edit HTML
4.  Centang kotak Expand widget templates.
5.  Cari kode berikut (gunakan ctrl+F)

]]></b:skin>

6.  Setelah ketemu, copy kode berikut dan pastekan tepat diatas kode ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

7.  Selanjutnya cari kode dibawah ini :

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

8.  Setelah ketemu kode diatas, hapus dan ganti dengan kode dibawah 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> &#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'/>

9.  Simpan / Save template sobat.

Silakan buka salah satu postingan sobat. Jika berhasil, di bagian atas judul postingan sobat terdapat menu breadcrumb. Dan untuk mengecek apakah navigation breadcrumb sobat sudah terindeks atau belum, silakan buat postingan baru dan masukkan url-nya di google. Atau sobat bisa langsung cek disini.

Selamat mencoba dan semoga sukses..