Cara memasang breadcrumbs di blogger

Kali ini akan share artikel mengenai breadcrumb di blog mungkin sahabat blogger sudah pada tahu. Breadcrumb adalah navigasi vertikal dan beruntun seperti rel yang biasanya dipasang di atas title blog atau judul blog atau website yang berisi link menuju biasanya bentuknya seperti berikut homepage > label > judul artikel dimana memudahkan pengunjung blog terhadap informasi artikel link terkait berdasarkan kategori didalam postingan blogspot.

Selain di blog biasanya breadcrumbs juga muncul di search engine dan sahabat blogger juga sering lihat banyak blog baik blogger maupun wordpress memasang breadcrumb tersebut. Para pakar seo juga merekomendasikan blogger membuat breadcrumbs di blog untuk optimasi seo juga meningkatkan CTR (Click Trough Rates).

Membuat breadcrumbs sendiri untuk menunjang faktor seo di search engine.

Baca juga : Cara edit template blogger

Cara memasang breadcrumbs di blogger dengan mudah 

Breadcrumbs berikut dibawah sudah valid html5 dan seo friendly dan otomatis akan terindex di pencarian google, langkah pemasangan di blog sebagai berikut :

Di blogger dasbord klik theme lalu klik edit html, kemudian copy paste kode dibawah tepat diatas kode <b:includable id='main' var='top' > jangan sampai salah yah

<b:includable id='breadcrumb' var='post' >

<b:if cond='data:blog.homepageUrl 

!= data:blog.url'>

<b:if cond='data:blog.pageType ==&quote;static_page&quot;' >

<div class='breadcrumbs' ><span><a exp:href='data:blog.homepageUrl' rel='nofollow' >Home</a></span> &#8250; </span><data:blog.pageName/> </span>

</div>

<b:else/>

<b:if cond='data:blog. PageType == &quote;item&quot;' >

<b: loop values='data:posts' var='posts' >

<b:if cond='data:post.labels'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title' >Home</span></a></span> &#8250; <b:loop values='data:post.labels' var='label' ><span itemscope='' itemtype='data-vocabularty.org/Breadcrumb' ><a expr:href='data:label.url + & quot;?&amp;max-results=8&quot;' itemtype='url' ><span itemprope='title' ><data:label.name/></span></a></span><b:if cond='data:label.isLast !=&quot;true&quot;' > &#8250; </b:if></b:loop>

</div>

<b:else/>

<div class='breadcrumbs' ><span><a expr:href='data:blog.homepageUrl' rel='nofollow' >Home</a></span> &#8250; <span>Uncategories</span> &#8250;  <span><data:post.title/></span></div>

</b:if>

</b:loop/>

<b:else/>

<bif: cond='data:blog.pageType == & quot;archive&quot;' >

<div class='breadcrumbs' ><span><a expr:href='data:bloghomepage.Url' rel='nofollow' >Home</a></span> &#8250;<spanArchive for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.searchQuery'>

<div class='breadcrumbs' ><span><a expr:href='data:blog.homepageUrk' rel='nofollow' >Home</a></span> &#8250; <span><data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data.blog.pageType == &quot;index&quot;' ><span><a href:expr='data:blog.homepageUrl' rel='nofollow' >Home </a></span> &#8250 <span> All post </span>

<b:else/>

<span> <a expr:href='data:blog.homepageUrl' rel ='nofollow' >Home</a></span> &#8250<span><data:blog.pagdName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

<b:if>

</b:if>

</b:if>

</b:includable>

Sertakan css berikut dengan Copy paste diatas </style> atau sebelum ]]></b:skin>

<stye>

.breadcrumbs {

font-size: 0.9em !important;

} 

.breadcrumbs a{

Color: #444444;

} 

.breadcrumbs a:hover {

color: #49ACE1;

} 

</style>

Baca juga : membuat script loading image

Anda bisa merubah > atau kode &8250 menjadi |atau - atau bisa mengganti dengan ikon bootsrap supaya lebih indah, sehingga menjadi Home | Label | judul postingan tergantung kebutuhan dan selera anda supaya bteadcrumbs sobat unik dari blog yang lainnya.

Tunggu beberapa hari dan postingan blogspot dengan breadcrumbs pun akan tampil disearch engines.