Cara Menciptakan Breadcrumb

Mungkin sahabat tidak tahu apa itu Breadcrumbs, fungsi Breadcrumbs dan tips memasang Bradcrumbs, oleh alasannya yakni itu kali ini Saya akan membahas wacana Breadcrumbs, silahkan simak.

Apa itu Breadcrumbs ?

Breandcrumbs adlah navigasi dari sebuah halman untk mengetahui dimana pengunjung berada.

Pada blog yang mempunyai banyak halman, Breadcrumbs ini sanggup dipakai untk memudahkan pengunjung menemukan article yang sesuai dengan keingginannya.

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

Pada ummunya Beradcrumbs terlihat menyerupai ini :

Home > Label >Post

atau

Beranda > Kategori > Postingan

Fungsi Breadcrumb ?

Berikut ini bbrapa fungsi Breadcrumb :

1. Kenyaman untk pengunjung alasannya yakni pengunjung akan tahu dihalman mana ia berada.

2. Sangat baik untk SEO blog alasannya yakni memperkaya kata kunci dalam postingan.

Membuat Breadcrumb Blogger

1. Masuk Blogger

2. Pilih Template > Edit HTML

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

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

 .breadcrumb {      background-color: #fff;      font-size: 14px;      padding: 20px 30px;      margin-bottom: 20px;  } 

Sobat sanggup mengganti gaya CSS Breadcrumbs sesuai cita-cita sahabat

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 untk  <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 sanggup lihat alhasil di postingan blog sobat, bila tidak terjadi kesalahan maka akan muncul Bradcrumbs menyerupai gambar dibawah ini.

Demikian Trik Membuat Breadcrumb Blogger dan selamat mencoba...
Sumber https://mas-abdi.blogspot.com/