Cara Tambah Breadcrumb Untuk Mudahkan Navigasi

Sangat Bermanfaat Untuk Meningkatkan posisi SERP dan SEO Blog Anda

Breadcrumb atau breadcrumbs adalah suatu cara bagi bloger untuk memudahkan navigasi pengunjung saat mengunjungi blog yang dimiliki. Banyak pendapat para pakar blogging bahwa penggunaan breadcrumbs ini juga bermanfaat untuk meningkatkan SEO bagi blog pemasangnya, namun demikian dengan keberadaan breadcrumbs ini, yang paling penting adalah bagaimana pengunjung blog lebih leluasa dalam menavigasi blog tersebut. Umumnya Breadcrumbs terlihat seperti berikut ini:

Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.

Langkah-langkah menambah Breadcrumbs dalam Blogger (Blogspot)

Note: Sebelum melakukan perubahan apapun pada template, Buat backup template blogspot anda terlebih dahulu.

Langkah 1 : Log in ke Dashboard blog anda dan Navigasi ke Layout > Edit HTML.

Langkah 2 :Termukan kode Berikut

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

Taruh kode dibawah ini dibawah Kode diatas

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Langkah 3 :Termukan kode Berikut

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

Ganti dengan Kode dibawah ini


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' 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' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>


Langkah 4 :Termukan kode Berikut

]]></b:skin>

Ganti dengan Kode dibawah ini


.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>



Langkah 5 :Simpan Template dan Pembuatan Breadcrumb selesai

Jika Anda menggunakan beberapa label untuk satu posting, Breadcrumb hanya menampilkan label terakhir yang anda ambahkan, sehingga diletakkan label yang anda inginka di akhir dalam posting anda.

Sumber: http://bloggerhowtotips.blogspot.com/2010/06/how-to-add-breadcrumbs-in-blogger-to.html

Views