Cara Buat Breadcrumbs di Blogger

Sebenar nya Breadcrumb inj di bilang penting atau tidak di blogger itu hal yang susah di kaji ya sobat pada dasar nya Breadcrumb ini berguna untuk para blogging.

Kenapa ini berguna buat blog anda lantas

Aps saja fungsi Breadcrumb untuk blogger atau website kita?

apa Fungsi Breadcrumb

breadcrumb berfungsi sebagai petunjuk arah yang membuat pengunjung mengetahui dimana posisi mereka berada saat ini ketika membuka blog, website, atau dokumen

Apa mamfaat Breadcrumbs untuk blogger

Pada dasarnya, breadcrumbs adalah elemen web yang memiliki fungsi sebagai navigasi halaman dan bisa disebut sebagai navigasi sekunder dalam web. Sebab, breadcrumbs bisa menunjukkan urutan struktur halaman mana saja yang sudah dibuka oleh pengunjung website tersebut.

Pertama yang akamu harus lakukan ya mencari kode 

 <b:includable id='comment-form' var='post'>

Kalau kode sudah ketemu lalu sahabat gasfull tinggal letak kan kode di bawah ini tepat diatas kode 

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == "item"'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <span itemprop='name'>Home</span></a> <meta content='1' itemprop='position'/> </span> <i class='fa fa-angle-right'/> <b:loop index='num' values='data:post.labels' var='label'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:label.url + "?&max-results=16"' expr:title='data:label.name' itemprop='item'> <span itemprop='name'><data:label.name/></span> </a> <meta expr:content='data:num+2' itemprop='position'/> </span> <b:if cond='data:label.isLast != "true"'> <i class='fa fa-angle-right'/> </b:if> </b:loop> <i class='fa fa-angle-right'/> <span><data:post.title/></span> </div> </b:if> </b:loop> </b:if> </b:includable>

 <b:includable id='comment-form' var='post'>

Kira kira jadi nga seperti contoh diatas

Namun,  Kalau sobat melihat script yang sama atau mirip dengan script breadcrumb di atas silahkan dihapus dan diganti dengan script di atas.

Selanjutnya kita masuk ke bagian css atau style nya letak kan saja terserah sobat kode di bawah ini

/* Breadcrumb */ .breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap} .breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400} .breadcrumbs a:hover{color:#11589D} .breadcrumbs svg{width:16px;height:16px;vertical-align:-4px} .breadcrumbs svg path{fill:#666} 

Yang lasti nya sobat harus meltak kode di atas itu di dalam css nya terserah mau di mana saja asal dalam css atau style.

Yang trakhir jangan lupa anda cari kode seperti di bawah ini 

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

jika kode sudah ketemu

Maka sobat selanjut copy kode ini

<b:include data='posts' name='breadcrumb'/>

Lalu pastekan tepat di bawah kode yang sobat cari tadi

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

<b:include data='posts' name='breadcrumb'/>

Kira kira tampilan nya seperti code di atas.

Nah lalu simpan dan selesai

Akhir kata mungkin hanya ini yamg dapat saya sampai kan selebih dan kurang nya saya mohon maaf jika ada pertanyaan silah berikan komentar anda di kolom komen yang sudah di sediakan 

Terima kasih........

Semangat slalu sobat Gasfull