Cara memasang Breadcrumb navigasi pada blog

Cara memasang Breadcrumb navigasi pada blog atau runtutan label sebuah postingan blog mempunyai beberapa keuntungan diantaranya adalah membantu pembaca untuk melacak sebuah postingan yang ada hubungan dengan apa yang mereka cari di google.Selain itu dalam segi SEO juga diperhitungkan karena ini berhubungan dengan kata kunci pencarian sebuah artikel. Tapi jangan khawatir karena hampir semua template sudah mendukung adanya Breadcrumb ini terus bagaimana dengan template yang belum menyediakan fasilitas ini, tenang saja pada kesempatan kali ini saya akan posting cara pembuatan Breadcrumb navigasi pada blog. 

1. Masuk ke dashboard blog >> TEMPLATE >> EDIT HTML >> LANJUTKAN

2. Centang Expand template lalu cari kode ini

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

Lalu paste kode bawah ini tepat di atasnya

<b:include data='posts' name='breadcrumb'/>

3. Lalu cari kode di bawah ini

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

Jika ada dua silahkan pilih yang kedua.
Lalu paste-kan kode di bawah ini tepat diatasnya

<!-- Breadcrumb Navigation By http://www.go-blogger96.blogspot.com/ --> <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'>Home</a></span> » <span><data:blog.pagename/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- 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' rel="v:url" property="v:title">Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span> </div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives 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'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <!-- Breadcrumb Navigation By http://www.go-blogger96.blogspot.com/ -->

4. Lalu cari kode ini ]]>

5. Silahkan paste kode di bawah ini di atas kode no. 4

.breadcrumbs { background: #F7F7F7; float: left; border: 1px solid #E6E6E6; width: 575px; font-size: 11px; margin: 10px 10px 10px 10px; padding: 5px 10px 5px 10px; }

6. Terakhir simpan perubahannya lalu lihat hasilnya.

Semoga berhasil, semoga artikel ini bermanfaat. Jika ada kesulitan silahkan sharing dengan berkomentar di bawah.