Breadcrumb juga membantu dalam SEO, inilah 2 cara membuatnya

Breadcrumb cocok sekali bagi anda yang sedang belajar dan menggeluti dunia SEO. karena selain membuatnya mudah, breadcrumb ini juga cukup membantu dalam optimasi pencarian. Guna navigasi breadcrumb ini adalah untuk memudahkan pengunjung dalam mengetahui keberadaan sebuah artikel dan sebagainya. dan Navigasi ini biasanya terletak pada bagian atas judul. Oke Artikel kali ini, saya akan menampilkan 2 cara membuat breadcrumb, karena pada template tertentu, kadang kita tidak dapat menemukan kode yang kita cari, untuk penjelasan tentang ini, sudah saya bahas pada postingan sebelumnya yaitu : Mengapa kita tidak bisa menemukan kode HTML blog yang kita cari.
Nah sekarang kita langsung saja ke materi (kayak dosen aja gue :D)

Kira-kira beginilah contoh navigasi breadcrumb tersebut:

Breadcrumb bagi saya selain bagus untuk optimasi SEO juga bisa memperindah tampilan sebuah blog/web. Jadi, bagi saya keberadaannya di blog adalah wajib :)

Begini cara membuatnya :

#CARA PERTAMA

1. Masuk ke blogger.
2. Pilih menu Rancangan =» Edit HTML
3. Centang tulisan Expand Widget Templates

4. Cari kode berikut:

<b:if cond='data:post.title'> 

5. Lalu tambahkan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == "item"'>
<a href='http://bloganda.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>
 

Ganti tulisan berwarna merah dengan nama blog anda

 










6.Simpan Template & Selesai



#CARA KEDUA

1. Cari kode ]]></b:skin> 
2. Letakkan kode berikut diatas kode ]]></b:skin>
 


.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
} 


3. Lalu cari lagi kode <div class='post hentry uncustomized-post-template'> dan pastekan kode dibawah ini, tepat dibawah kode <div class='post hentry uncustomized-post-template'> tadi :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

<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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>

Contoh keseluruhan seperti ini:

<div class='post hentry uncustomized-post-template'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

<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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if> 


4. Simpan Template & Selesai

NB: untuk cara pertama* Jika ingin menambahkan garis, taruh kode <hr/> di bawah kode <data:post.title/>

Itulah 2 Cara dalam membuat Breadcrumb yang bisa saya sharingkan hari ini.