Cara Memasang Breadcrums Yang Efektif di Blogspot

Selamat malam guys, saya mencoba bahas breadcrumb untuk blogspotdefinisi breadcumb sendiri adalah definisi breadcrumb menurut wikipedia adalah seperti berikut ini : Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.
Breadcrumbs biasanya terlihat seperti ini:
Home page> Nama Kategori>
Judul Postingan atau Home page: Nama Kategori:
Judul Postingan Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan, menurut saya SEO dengan breadcrumb cukup lumayan. berikut kata kunci atau artikel saya, yang berhasil masuk ke TOP 10 google search engine, ini hasil dari perubahan breadcrumbs dari tutorial bung frangki

Nah, untuk script yang sesuai dengan developer google, seperti di bawah ini, sumber script dari artikel bung frangki.
Silahkan buka HTML template anda, lalu cari kode 

b:includable id='breadcrumb' var='posts'

atau tekan CTRL+F dan masukan kodenya, untuk memudahkan pencarian di template,  ganti dengan kode :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<ol class='breadcrumbs' itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
<li><a expr:href='data:blog.homepageUrl' title='Home'><span itemprop='name'><i class='fa fa-home'/> Home&amp;nbsp;</span></a><i class='fa fa-angle-right'/>&amp;nbsp;</li>
<b:loop values='data:post.labels' var='label' index='num'>
<li itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a itemscope="itemscope" expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemtype="http://schema.org/Thing" itemprop="item"><span itemprop='name'><data:label.name/></span></a>&amp;nbsp;<i class='fa fa-angle-right'/>&amp;nbsp;
<meta itemprop="position" expr:content="data:num+1" />
</li>
</b:loop>
<span><data:post.title/></span>
</ol>
</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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home </a> &#8250; </span><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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Next to See All Posts </span>
<b:else/>
<span class='breadhome'> <a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Currently Browsing: <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Lalu tambahan kode dibawah ini pada css breadcrumbs

breadcrumbs li{list-style-type:none;display:inline-block;float:left}

Lalu simpan template,
Semoga bermanfaatditulis ulang,modifikasi dan bersumber dari artikel 
http://www.bungfrangki.com/2017/09/membuat-breadcrumbs-dengan-schema.org.html
http://kangasepsule.blogspot.com/2011/12/definisi-breadcrumb-dan-fungsi.html

Share :