Cara Membuat Breadcrumbs di Blogspot

Cara Membuat Breadcrumbs di Blogspot. Breadcrumbs merupakann salah satu cara kita untuk memberitahukan kepada pengunjung halaman / lokasi pada blog atau website kita. Yang di maksudkan agar pengunjung mengetahui di mana lokasi artikel yang mereka baca.
Breadcrumbs di buat dengan tujuan untuk mempermudah pengunjung melihat halaman di blog atau website kita tanpa kesulitan. Juga bisa digunakan untuk SEO dengan menambahkan kata kunci di setiap barisnya. Sebagai contoh jika anda menulis artikel tentang Cara Sharing Printer Windows XP maka akan mengcreate tag dengan kata kunci yang anda bidik.

jadi sekarang anda mengetahui bahwa Breadcrumbs sangat berguna untuk SEO OnPage blog atau website anda.

Cara Membuat Breadcrumbs di Blogspot
Note: Mohon backup template blog anda sebelum menambahkan breadcrumbs navigasi ke blog anda.

Ikuti langkah - langkah di bawah :
1. Login ke blogger.com, Masuk ke Dashboard > Template > Edit HTML

2. Cari kode di bawah

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

3. Gantikan dengan kode di bawah

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

4. Cari kode di bawah

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

5. Gantikan dengan kode di bawah

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</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>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Seluruh Artikel <b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

6. langkah berikut untuk memasang css pada breadcrumb yang sudah kita buat, cari kode di bawah

]]></b:skin>

7. letakkan kode di bawah, di atas kode yang ada di langkah "6", jika anda mengerti tentang css anda bisa memodifikasi kode dibawah sesuai dengan selera anda.

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

8. Click "Save"

Selamat Mencoba ...