Cara membuat breadcrumb untuk blogger

Cara buat breadcrumb diblog

kali ini saya akan membagikan tutorial breadcrumb di blog, yang pastinya akan menjadikan tampilan blog menjadi keren dan lebih SEO Friendly. Cara nya pun sangat mudah dan bisa di lakukan walau teman-teman tidak paham dengan kode HTML.

Sebelum melangkah ke cara membuat breadcrumb alangkah baiknya untuk mengetahui kegunaan dari breadcrumb ini. Breadcrumb sendiri adalah menu navigasi yang terlihat kecil yang biasanya ada pada judul artikel. 

Tampilan Breadcrumb yang Akan di Buat

Kegunaan Breadcrumb di Blog

1. Berguna untuk melihat tempat artikel yang saat ini kita lihat.
2. Berguna agar blog mudah untuk di crawl dan di index oleh google atau lainnya
3. Membuat tampilan  blog terlihat profesional dan lebih SEO
4. Memudahkan pembaca atau pengunjung untuk kembali ke Home atau ke artikel yang terkait dengan yang kita baca. Sama halnya dengan label dan Artikel Terkait. Bisa di baca di Cara membuat tampilan artikel terkait dancara membuat label menjadi keren.

Stelah mengetahui kegunaannya dan manfaatnya sekarang mari kita ke materi langsung untuk membuat breadcrumb ini dan pastikan membacanya pelan-pelan dan pahami agar saat mempraktekkannya tidak mengalami kesulitan dan kesalahan yang membuat kode tersebut tidak bisa terpasang dan berfungsi. Contoh breadcrumb yang akan di blog

Inilah Cara Membuat Breadcrumb Pada Blog

1. Masuk blogger teman teman dan langsung menuju ke Template > Edit HTML
2. Setelah masuk cari kode ]]></b:skin>
3. Kemudian masukkan kode di bawah ini di atas kode yang telah di cari tadi

.breadcrumbs{width:auto; padding: 5px 0; color: #666; border-bottom: 1px dotted #ccc;; font-size:12px; font-weight:400;margin-top:5px}

4. Belum sampai disitu, cari lagi kode ini <b:includable id='main' var='top'>
5. Dan ganti lah kode yang telah di cari sebelumnya dan ganti dengan kode berikut

<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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><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' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</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'/>

6. Saat semua nya telah dilakukan save template teman-teman dan lihalah hasilnya dengan cara klik pratinjau template atau lihat blog juga boleh.
7. Bila bila berhasil maka tampilannya akan seperti pada gambar sebelumnya di atas. Selamat mempraktekkan.

Itulah bagaimana cara membuat Breadcrumb di blog, semoga bermanfaat dan dapat di praktekkan dengan baik

Sumber-carablogfor

Bagikan Artikel ini