Cara Membuat Breadcrumb / Navigasi pada Blogger

Breadcrumb

Search engine selalu membaca label atau tags setiap postingan blog, untuk mengindeks suatu website / blog, maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google. Atas alasan tersebut Membuat Web Sendiri menganggap perlu untuk menyajikan Breadcrumb di setiap Blog / website.  Sesuai dengan fungsinya  Breadcrumb merupakan alat navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.

Adapun cara membuat Breadcrumb / Navigasi pada Blogger adalah sebagai berikut :

• Klik Template

• Klik Edit HTML

• Cari kode :   ]]></b:skin     pada Edit HTML ( gunakan CTRL + F ) untuk memudahkan anda dalam pencarian.

• Letakan Scrip dibawah ini diatas kode ]]></b:skin tersebut

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}

• Cari Kode <b:includable id='main' var='top'> dan ganti dengan kode script di bawah ini :

<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;">
</b:if></b:if></b:includable><br />
<div class="breadcrumbs">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" rel="tag">Home</a> » <data:blog .pagename=""></data:blog></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" xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" property="v:title" rel="v:url">Home</a></span>
<b:loop values="data:post.labels" var="label">
» <span typeof="v:Breadcrumb"><a expr:href="data:label.url" href="https://www.blogger.com/null" property="v:title" rel="v:url"><data:label .name=""></data:label></a></span>
</b:loop>
» <data:post .title=""></data:post>
</div>
<b:else>
<div class="breadcrumbs">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" rel="tag">Home</a> » Unlabelled » <data:post .title=""></data:post></div>
</b:else></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" href="https://www.blogger.com/null">Home</a> » Archives for <data:blog .pagename=""></data:blog>
</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" href="https://www.blogger.com/null">Home</a> » All posts
<b:else>
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home</a> » Posts filed under <data:blog .pagename=""></data:blog>
</b:else></b:if>
</div>
</b:if>
</b:else></b:if>
</b:else></b:if>
</b:else>
<b:includable id="main" var="top">
<b:include data="posts" name="breadcrumb">

• Klik Save Template

Demikian cara Membuat Breadcrumb / Navigasi pada Blogger, semoga bermanfaat.