Cara Menambahkan Breadcrumbs pada Blogger Template

Cara Menambahkan Breadcrumbs pada Blogger Template - Breadcrumbs adalah navigasi yang di gunakan oleh pengunjung untuk berinteraksi dengan web atau blog. Apalagi jika website untuk komersial tentunya memiliki banyak kategori dan sub kategori.
Manfaat menambahkan breadcrumbs di blog adalah dapat meningkatkan tampilan dan internal link web atau blog anda.

Preview :



Nubie Theme mencoba akan berbagi cara menambahkan breadcrumbs pada template blog secara simpel dan sederhana, ikuti langkanya :

1. Buka dashboard blogger anda kemudian pilih menu Template>.>Edit HTML



2. Pada edit HTML, cari kode berikut dengan menekan tombol Ctrl+F

<div class="blog-posts hfeed">

3. Semua Template blogger memiliki kode div tag diatas, ada yang terdapat 2 div tag bahkan lebih. Jika sudah ketemu silahkan copy dan paste kode berikut dibawah tag div tadi.

<!--start breadcrumbs-->
<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if><br />
<div class="breadcrumbs">
<span class="post-labels">
       <a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null" rel="tag">Home</a>
        <b:loop values="data:posts" var="post">
            <b:if cond="data:post.labels">
            <b:loop values="data:post.labels" var="label">
                <b:if cond="data:label.isLast == true"> /
                    <a expr:href="data:label.url" href="https://www.blogger.com/null" rel="tag"><data:label .name=""></data:label></a>                </b:if>
            </b:loop>
            <b:else>
            / Unlabelled
            </b:else></b:if>
            / <data:post .title=""></data:post>
        </b:loop>
        </span>
    </div>
<b:if cond="data:blog.pageType == &quot;static_page&quot;">
<div class="breadcrumbs">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home</a> » <data:blog .pagename="">
</data:blog></div>
</b:if>
<b:if cond="data:blog.pageType == &quot;archive&quot;">
    <div class="breadcrumbs">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home</a> » <data:blog .pagename="">
    </data:blog></div>
</b:if>
<b:if cond="data:blog.searchLabel">
    <div class="breadcrumbs">
<a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home</a> » <data:blog .pagename="">
    </data:blog></div>
</b:if>
<!--end breadcrumbs-->

6. Sekarang breadcrumbs telah terpasang, silakan cek dan lihat hasilnya pada posting, terimakasih sudah membaca artikel Nubie Theme semoga bermanfaat.

Sumber dari : axlmulat.com