Cara Memasang Breadcrumbs dan Fungsinya di Blogger

Baca Juga

Breadcrumbs adalah navigasi sekaligus internal link pada postingan blog.

Menurut Wikipedia, breadcrumb adalah alat bantu navigasi yang digunakan dalam antarmuka pengguna (breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces).

Elemen breadcrumbs terdiri dari link ke halaman depan (home), link ke halaman label (label page), dan Judul Postingan.

Posisi breadcrumb yaitu di atas judul artikel di halaman single post. Lihat baris yang ada di atas judul postingan ini. Itulah breadcrumbs!

Fungsi Breadcrumbs

Menurut para pakar desain website, breadcrumbs berfungsi sebagai berikut:

• Memberikan kemudahan navigasi bagi pengunjung blog atau website.
• Membantu untuk memberikan orientasi, menunjukkan jalan kepada mereka para pengunjuing blog Anda untuk mengetahui lokasi dimana postingan mereka baca.
• Link atau tatutan yang ada di breadcrumbs membantu para pengunjung blog Anda dengan cepat untuk kembali ke halaman awal meraka kunjugi atau setidaknya kembali ke beranda / home blog atau website Anda.
• Menambah kepadatan kata kunci (keywords density) di halaman posting sehingga lebih SEO Friendly.

Cara Memasang Breadcrumbs di Blogger

Template bawaan Blogger biasanya tanpa breadcrumbs, sehingga kita harus memasang sendiri. Template premium atau template gratis hasil desain para desainer template blog biasanya sudah berisi breadcrumbs.

Berikut ini cara memasang breadcrumb di template Blogger.

1. Klik Tema > Edit HTML
2. Copas atau Simpan kode ini di atas kode ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

3. Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>Home</a>
<b:loop values='data:post.labels' var='label'> &#187;
<a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><data:label.name/></a>
</b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

4. Simpan! Save!

Cara Lain Memasang Breadcrumbs di Blogger

1. Klik Tema > Edit HTML
2. Copas kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

3. Cari kode seperti ini di template.

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

4. Copas kode breadcrumbs berikut ini tepat di bawah kode di atas:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>Home</a>
<b:loop values='data:post.labels' var='label'> &#187;
<a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><data:label.name/></a>
</b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Simpan template!

Cara Mengatasi Error Breadcrumbs

Bagi yang sudah memasang breadcrumbs, kemungkinan mendapatkan error warning dari Google. Berikut ini cara mengatasinya.

1. Klik Tema > Edit HTML
2. Cari dan Ganti kode:

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'> &#187;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop> &#187; <span><data:post.title/></span>
</div>

dengan kode:

<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>Home</a>
<b:loop values='data:post.labels' var='label'> &#187;
<a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><data:label.name/></a>
</b:loop> &#187; <span><data:post.title/></span>
</div>

3. Save!

Demikian Cara Memasang Breadcrumbs dan Fungsinya di Blogger.

Sumber: Blog Kang Ismet