Membuat Menu Navigasi Breadcrumbs Di Blogger

Menu navigasi breadcrumbs adalah menu yang dapat menampilkan urutan halaman dari Beranda (root) hingga ke postingan (artikel). Menu ini banyak dijumpai pada blog dengan domain WordPress, karena memang sudah disetting seperti itu. Jika dalam WordPress, urutan menu breadcrumbs ini adalah dari Beranda > Category > Sub Category > Postingan (artikel).

Menu ini tidak ditampilkan dibagian homepage karena di homepage tidak memiliki urutan halaman. Jadi, menu breadcrumbs hanya tampil di halaman post body (postingan) saja. Menu navigasi breadcrumbs juga diyakini banyak orang dapat meningkatkan nilai SEO (search engine optimization) dan SERP (search engine result page). Mengapa? Karena, menu ini dapat menambah kepadatan keyword. Misalnya, kita membuat sebuah artikel dengan label sebanyak 3 label. Jadi, label tersebut akan ikut terindeks juga oleh search engine. 

Fungsi lainnya dari menu breadcrumbs adalah untuk menampilkan posisi dimana pengunjung tersebut berada, menunjukkan label pada artikel yang sedang dibaca, dan yang terakhir adalah untuk menunjukkan kepada pengunjung blog homepage kita. Menurut analisis saya, breadcrumbs juga dapat dibilang dapat menambah internal link dalam suatu blog. Ingat, internal link dalam suatu blog yang tersusun dan terstruktur secara rapi dapat menambah penilaian SEO di mata search engine. Ikuti langkah-langkah berikut untuk membuat menu navigasi breadcrumbs:

1. Dari dasbor, masuk ke Template.

2. Pilih Edit HTML.

3. Cari kode ]]></b:skin>. Untuk mempermudah pencarian, seperti biasa, tekan Ctrl+F.

4. Letakkan kode berikut tepat diatas ]]></b:skin>.

5. Cari lagi kode <b:include data='top' name='status-message'/>. Letakkan kode berikut dibawahnya.

<b:include data='posts' name='breadcrumb'/>

6. Terakhir, cari kode <b:includable id='main' var='top'> . Letakkan kode berikut tepat diatasnya.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<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 == "true"'> »

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

»Unlabelled

</b:if>

» <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:blog.pageName == ""'>

<a expr:href='data:blog.homepageUrl'>Home</a> » All posts

<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>

</b:if>

</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

7. Simpan Template. Klik Pratinjau untuk melihat perubahan.