Cara Membuat Breadcrumb

Mungkin sobat tidak tahu apa itu Breadcrumbs, fungsi Breadcrumbs dan cara memasang Bradcrumbs, oleh karena itu kali ini Saya akan membahas tentang Breadcrumbs, silahkan simak.

Apa itu Breadcrumbs ?

Breandcrumbs adalah navigasi dari sebuah halaman untuk mengetahui dimana pengunjung berada.

Pada blog yang memiliki banyak halaman, Breadcrumbs ini dapat digunakan untuk memudahkan pengunjung menemukan artikel yang sesuai dengan keingginannya.

Breadcrumbs biasanya muncul secara horizontal di atas postingan atau dibawah header.

Pada ummunya Beradcrumbs terlihat seperti ini :

Home > Label >Post

atau

Beranda > Kategori > Postingan

Fungsi Breadcrumb ?

Berikut ini beberapa fungsi Breadcrumb :

1. Kenyaman untuk pengunjung karena pengunjung akan tahu dihalaman mana ia berada.

2. Sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan.

Membuat Breadcrumb Blogger

1. Masuk Blogger

2. Pilih Template > Edit HTML

3. Klik Ctrl+F untuk mempermudah pencarian skrip ]]></b:skin> masukkan skrip tersebut dikotak pencarian, kemudian tekan enter.

4. Salin skrip dibawah ini, lalu tempel diatas ]]></b:skin>

.breadcrumb {

    background-color: #fff;

    font-size: 14px;

    padding: 20px 30px;

    margin-bottom: 20px;

}

Sobat dapat mengganti gaya CSS Breadcrumbs sesuai keinginan sobat

5. Lalu cari lagi skrip <b:includable id='main' var='top'>

6. Ganti skrip <b:includable id='main' var='top'> dengan skrip dibawah ini

<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> Anda disini : <a expr:href='data:blog.homepageUrl' rel='tag'> Beranda </a></span> &#47; <span><data:blog.pageName/></span></div>

    <b:else/>

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

    <b:loop values='data:posts' var='post'>

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

    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

    <span typeof='v:Breadcrumb'>  Anda disini : <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'> Beranda </a></span>

    <b:loop values='data:post.labels' var='label'>

    &#47; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

    </b:loop>

    &#47; <span><data:post.title/></span>

    </div>

    <b:else/>

    <div class='breadcrumbs'><span> Anda disini : <a expr:href='data:blog.homepageUrl' rel='tag'> Beranda </a></span> &#47; <span> Tidak ada kategori </span> &#47; <span><data:post.title/></span></div>

    </b:if>

    </b:loop>

    <b:else/>

    <b:if cond='data:blog.pageType == &quot;archive&quot;'>

    <div class='breadcrumbs'>

    <span> Anda disini : <a expr:href='data:blog.homepageUrl'> Beranda </a></span> &#47; <span> Arsip untuk  <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> Anda disini : <a expr:href='data:blog.homepageUrl'> Beranda </a></span> &#47; <span> Semua postingan </span>

    <b:else/>

    <span><a expr:href='data:blog.homepageUrl'></a></span> &#47; <span> Postingan dibawah <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'/>

7. Klik Simpan

Sobat dapat lihat hasilnya di postingan blog sobat, jika tidak terjadi kesalahan maka akan muncul Bradcrumbs seperti gambar dibawah ini.

Demikian Cara Membuat Breadcrumb Blogger dan selamat mencoba...

Share this post