Cara Membuat Breadcrumbs di Blogger

Tutorial Cara Membuat Breadcrumb di Blogger Blogspot
Oleh Tim Multimedia Ponpes Al-Khoirot

Blog yang memiliki breadcrumbs konon memiliki daya SEO dan daya SERP yang lebih tinggi di Google dibanding yang tidak memakai breadcrumbs. Tentu saja, itu cuma salah satu faktor. Bagaimanapun, konten artikel yang orisinil, loading cepat dan ringan, plus template yang ramah Google (friendly) serta internal link yang baik adalah empat faktor yang sangat signifikan di mata Google.

1. Apa itu Breadcrumbs
2. Contoh Breadcrumbs
3. Cara Membuat Breadcrumbs di Blogger Blogspot

APA ITU BREADCRUMBS

Breadcrumb atau breadcrumb trail adalah bantuan navigasi yang dipakai untuk mengetahui jejak asal dari lokasi dalam sebuah bog/website, program atau dokumen.

CONTOH BREADCRUMBS

Lihat di atasnya judul artikel ini atau lihat gambarnya di bawah:

Apa ini dianjurkan oleh Google?

Iya. Breadcrumb akan menambah SEO suatu artikel di blog.

CARA MEMBUAT BREADCRUMBS DI BLOGGER BLOGSPOT

I. Masuk ke blogger.com -> Template -> Edit HTML -> centang (kasih tanda tik) Expand Widget Template.

Tips:
(i) Cara mencari kode di template blogger, tekan CTRL+F -> masukkan kode yang dicari dikotak yang tersedia.
(ii) Dalam meng-copy kode, klik "View Plain" -> copy kodenya.

II.

a. Cara kode berikut: <b:include data='top' name='status-message'/>
b. Ganti dengan kode berikut:

view plainprint?

1. <b:include data='top' name='status-message'/>  
2. <b:include data='posts' name='breadcrumb'/>  

III.

a. Cari kode berikut: <b:includable id='main' var='top'>
b. Ganti dengan kode berikut:

view plainprint?

1. <b:includable id='breadcrumb' var='posts'>  
2. <b:if cond='data:blog.homepageUrl == data:blog.url'>  
3. <!-- No breadcrumb on home page -->  
4. <b:else/>  
5. <b:if cond='data:blog.pageType == "item"'>  
6. <!-- breadcrumb for the post page -->  
7. <p class='breadcrumbs'>  
8. <span class='post-labels'>  
9. <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  
10. <b:loop values='data:posts' var='post'>  
11. <b:if cond='data:post.labels'>  
12. <b:loop values='data:post.labels' var='label'>  
13. <b:if cond='data:label.isLast == "true"'> »  
14. <a expr:href='data:label.url' rel='tag'><data:label.name/></a>  
15. </b:if>  
16. </b:loop>  
17. <b:else/>  
18. »Unlabelled  
19. </b:if>  
20. » <span><data:post.title/></span>  
21. </b:loop>  
22. </span>  
23. </p>  
24. <b:else/>  
25. <b:if cond='data:blog.pageType == "archive"'>  
26. <!-- breadcrumb for the label archive page and search pages.. -->  
27. <p class='breadcrumbs'>  
28. <span class='post-labels'>  
29. <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>  
30. </span>  
31. </p>  
32. <b:else/>  
33. <b:if cond='data:blog.pageType == "index"'>  
34. <p class='breadcrumbs'>  
35. <span class='post-labels'>  
36. <b:if cond='data:blog.pageName == ""'>  
37. <a expr:href='data:blog.homepageUrl'>Home</a> » All posts  
38. <b:else/>  
39. <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>  
40. </b:if>  
41. </span>  
42. </p>  
43. </b:if>  
44. </b:if>  
45. </b:if>  
46. </b:if>  
47. </b:includable>  
48. <b:includable id='main' var='top'>  

IV.
a. Cari kode berikut: ]]></b:skin>
b. Ganti dengan kode berikut:

view plainprint?

1. .breadcrumbs {  
2. padding:5px 5px 5px 0px;  
3. margin: 0px 0px 15px 0px;  
4. font-size:95%;  
5. line-height: 1.4em;  
6. border-bottom:3px double #e6e4e3;  
7. }  
8. ]]></b:skin>  

V. Klik Simpan Template. Selesai