Cara Memasang Breadcrumbs SEO Friendly Valid HTML5

Breadcrumbs SEO Friendly Valid HTML5 adalah sebuah tekhnik optimasi seo yang mempermudah mesin pencari dan pengunjung untuk menemukan blog kita

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 - Breadcrumbs SEO Friendly Valid HTML5 adalah sebuah tekhnik optimasi seo yang mempermudah mesin pencari dan pengunjung untuk menemukan blog kita. Navigasi Breadcrumbs ini akan menampilkan semua label yang di hubungkan dengan artikel kita yang tentunya akan semakin mudah blog kita di crawl oleh mesin penelusur.

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5

Untuk sobat yang ingin memasang Navigasi Breadcrumbs ini di blog sobat, silahkan ikuti cara berikut :

Langkah Pertama, Login ke Blogger > Template > Edit HTML > Salin CSS dibawah ini dan simpan sebelum kode </style> atau ]]></b:skin>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

Langkah Kedua, Temukan kode HTML berikut

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

Kemudian letakkan kode HTML berikut, tepat di atasnya

<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' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>

<b:else/>

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

<!-- Breadcrumb Untuk Halaman Pos -->

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

<b:if cond='data:post.labels'>

<div class='breadcrumbs'>

Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>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 + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>

/ <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

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

<!-- Breadcrumb Untuk Label Search dan Search Pages -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived 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><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

Langkah Ketiga, Silahkan simpan template sobat.

Demikian tutorial Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 semoga bermanfaat dan selamat bereksperimen.