Cara Memasang Breadcrumb di Blog

Mengutik masalah SEO memang banyak cara dan hal yang harus dilakukan, salah satunya dengan memberi Breadcrumb pada blog, walaupun ini terdengar sepele namun mempunyai dampak begitu signifikan, missal dalam pencarian hal tersebut akan saling membantu untuk sebuah artikel begitu pula untuk pengunjung hal ini sangat membantu karena yang menjelaskan dimana pengunjung berada, seperti halnya petunjuk arah. 

Walaupun tidak begitu banyak yang memperhatikan, paling tidak alangkah lebih baik untuk memsang Breadcrumb tersebut. Breadcrumb juga membantu untuk memberi jalur pada artikel blog anda. Masih banyak sebenernya SEO yang lebih efisien untuk web, missal penggunaan meta tag, seo onpage, seo offpage dan lain sebagainya.

Namun sekarang ini saya akan membahas masalah topic pertama yaitu Breadcrumb dan cara pemasangan diblog. Sangat mudah untuk memsang breadcrumb diblog tanpa harus berimajinasi walaupun anda bukan seorang programmer, karena disini sudah disedian tip sekaligus kode untuk dipasangkan diblog anda.

Pertama pastikan anda sudah berada di menu edit template, sesuai petunjuk pada gambar dibawah ini yang tidai warna kuning. Jika anda merasa ragu dalam penempatan kode silhkan backup dulu template anda biar aman, tapi hal ini sudah saya terapkan di web/blog saya sendiri.

Setelah anda melakukan hal diatas, pastikan anda mencari kode seperti ini

<b:includable id="main" var="top"> </b:includable>

dan gantikan dengan kode syntax yang ada dibawah ini, pastikan untuk benar-benar sesuai pada kode dibawah.

<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><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></span><span class='index'><i class='fa fa-file-text-o'/> <data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a></span><b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><i class='fa fa-folder-open-o'/> <span itemprop='title'><data:label.name/></span></a></span></b:loop> <span class='index' expr:title='data:post.title'><i class='fa fa-file-text-o'/> <b><data:post.title/></b></span>
</div>
<b:else/>
<div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><i class='fa fa-angle-right'/> <span class='index'>Unlabelled</span> <i class='fa fa-file-text-o'/> <span><data:post.title/></span></div>
</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'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'>Archive 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;'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/> Home</span></a><span class='index'><i class='fa fa-file-text-o'/> All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' itemprop='url' title='Blog Baca Tulis'><i class='fa fa-home'/></a></span><span class='index'><i class='fa fa-folder-open-o'/> <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'/>

Kemudian setelah memasang kode tersebut, sekarang anda tinggal memasangkan kode CSS untuk custom tampilan, andapun dapat merubah sesuai dengan selera. Perhatikan kode CSS berikut ini dan pasang di atas kode ]]></b:skin>.

.breadcrumbs {
margin: 0 0 1em 0; 
padding:20px; 
font-size:90%; 
line-height: normal;
display:block;
background:#EAEAEA;
text-transform:capitalize; 
}
.breadcrumbs span{padding:0px 10px 0px 0px;}
.breadcrumbs span a:hover{
text-decoration:none;}

Setelah dikira semua selesai maka lihatlah perubahan di blog anda, jika berhasil hasilnya akan seperti dibawah ini.