Breadcrumb Navigasi, pasti semua sudah tahu apa itu breadcrumb pada blog, tutorial blogger yang satu ini mungkin banyak dicari juga, karena pada standart template blog biasanya memang belum dilengkapi dengan breadcrumb navigasi.Sebelumnya saya tulis juga cara membuat breadcrumb di wordpress Nah, Rembogo kali ini akan share ulang tentang cara membuat breadcrumb lagi,bedanya sekarang untuk pengguna blogger atau blogspot.
kelebihan daripada breadcrumb yang satu ini sangat penting, apalagi untuk SEO, karena dengan cara yang satu ini,breadcrumb kamu akan terindex oleh google, coba lihat gambar pada blog saya infonetmu dibawah ini:
Bukan kebetulan label tersebut tampil di pencarian google,namun memang ada tehnik dan kode pada breadcrumb agar bisa terindex google, ingin tau cara membuatnya? langsung saja ikuti tutorial blogger dibawah ini:
- Silahkan menuju ke edit html blog kamu,jangan lupa centang expand template widget dan cadangkan demi keamanan.
- Cari kode ]]></b:skin> lalu letakkan kode berikut tepat diatas ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double
#e6e4e3;
} - Setelah itu cari kode <b:include data='top' name='status-message'/> dan letakkan dibawahnya kode berikut:
<b:include data='posts' name='breadcrumb'/>
- Cari lagi kode <b:includable id='main' var='top'> Setelah ketemu letakkan kode dibawah ini diatas kode tersebut.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' href='' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> » All posts
<b:else/>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl'><span itemprop='title'>Home</span></a></span> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable> - Lalu simpan template kamu.
- Jika ketika kamu cari kode pada nomor 3 ternyata kamu menemukan 2 kode yang sama,maka cari kode <b:include data='top' name='status-message'/> yang dekat dengan kode <data:defaultAdStart/> atau <data:AdStart/>
- Jika kode yang pada langkah nomor 3 ternyata kamu menemukan satu kode saja, maka letakkan kode <b:include data='posts' name='breadcrumb'/> ini tepat dibawah kode <b:includable id='post' var='post'>
Susah ya Cara Agar Breadcrumb Terindex Google? jadi pahami dengan seksama, untuk menguji berhasil dan tidaknya,akan terindex google atau tidak silahkan cek di google rich snippets
