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 == "static_page"'>
<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 == "item"'>
<!-- 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 + "?max-results=5"' 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 == "archive"'>
<!-- 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 == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<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.
Join the conversation