Buat Menu Navigasi Breadcrumbs Blogspot

  

Cara buat menu/navigasi breadcrumbs di Blogger/Blogspot

Pengenalan
Mengenal Breadcrumbs: Breadcrumbs adalah merupakan navigasi dibawah header blog yang  memberikan informasi kepada pengunjung blog ANDA. 

Maksudnya, posisi atau letak posting yang mereka baca. Sedangkan definisi yang dibuat oleh Wikipedia seperti ini "Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces", semoga anda memahami apa maksudnya...

So...sudah jelas penjelasan apa itu "breadcrumbs"?. Apa fungsi breadcrumbs? apakah breadcrumbs berguna dalam SEO (Search Engine Optimization) sebuah blog.

Berikut penjelasan mengenai manfaat atau fungsi breadcrumbs ialah:

1. Memberikan kemudahan navigasi bagi pengunjung blog atau websiteBreadcrumbs 
2. Menunjukkan jalan kepada para pengunjung blog untuk mengetahui lokasi dimana posting mereka baca.
3. Berfungsi untuk membantu untuk memberikan orientasi

Dibawah ini adalah tutorial lengkap bagaimana cara untuk menambah atau membuat Navigasi Breadcrumbs ini:

Nota: Link atau pautan yang ada di breadcrumbs membantu para pengunjung blog dengan cepat untuk kembali ke halaman awal mereka kunjungi atau setidaknya kembali ke Halaman Utama / home blog atau website.

1. Masuk ke Blogger Dashboard > Design > Edit HTML, jangan lupa (check) "Expand Widget Templates" di kanan atas kotak edit HTML.


2. Cari kod ini (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS ini SEBELUMNYA:

👉Kod 1:

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kod dibawah TEPAT SELEPAS kod tersebut:


👉Kod 2:

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

4. Cari (Ctrl+F) <b:includable id='main' var='top'> copy script dibawah dan tambahkan script berikut TEPAT SEBELUM kod diatas:



👉Kod 3:

<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

👉Sila dapatkan kod 1, 2 dan 3 ->>>KLIK SINI<<<-


5. Pastikan semua kod telah dicopy dan paste/diletakkan dengan betul, kemudian klik save.

Nota: sebab banyak masalah semasa mengedit, perhatikan betul-betul arahan istilah di bawah/setelah serta di atas/sebelum, maksudnya letakkan kod tersebut tepat-tepat setelah atau sebelum kod yang dicari.

Contohnya:



<b:include data='top' name='status-message'/><data:adStart/>

Di situ ada 2 tag berasingan, anda harus memasukkan tag/kod baru mengikut arahan seperti di bawah/setelah <b:include data='top' name='status-message'/>, ini bermakna anda harus meletakkan betul-betul selepasnya, iaitu sebelum <data:adStart/> pastikan tepat posisinya, atau kod/tag baru diletakkan di antara keduanya, jadinya macam contoh kat bawah:


<b:include data='top' name='status-message'/>

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

<data:adStart/>


Selamat mencuba...