Cara Membuat Breadcrumbs Di Blog

Kembali lagi di ViperGoy Blog. Pada kali ini saya akan membahas artikel tentang Cara Membuat Breadcrumbs di Blog. Mungkin anda bertanya kepada diri anda sendiri, Apa itu Breadcrumbs ? Breadcrumbs adalah Navigasi yang digunakan agar pengunjung bisa mengetahui tempat yang dia berada, Navigasi Breadcrumbs juga baik untuk SEO Blog. Setelah kita mengerti Arti dan Fungsi Breadcrumbs, kita akan menuju tahap pembuatannya. Cekidot....

Cara Membuat Breadcrumbs Di Blog :

1. Login ke Blogger/Blogspot
2. Klik Menu Dropdown
3. Klik ' Template '
4. Klik ' Edit HTML '
5. Centang pada kotak Checklist ' Expand Widget Templates '
6. Cari Kode ]]></b:skin>
7. Lalu Copy Paste Kode dibawah ini dengan menaruhnya di Atas Kode

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

8. Setelah itu cari Kode <b:includable id='main' var='top'>
9. Setelah selesai menemukan kode tersebut, Gantilah kode tersebut dengan Kode :

<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' 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' property='v:title' rel='v:url'><data:label.name/></a></span> </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"'> <!-- ViperGoy 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> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

10. Klik ' Save ' , Lalu Refresh Halaman Blog anda dan Lihatlah bedanya.

11. Selesai.

Sekian dari artikel Cara Membuat Breadcrumbs Di Blog. Semoga anda semua bisa menyimak dan paham yang saya katakan, serta sajian dari Apa Itu Breadcrumbs dan Fungsi Breadcrumbs. Terima Kasih telah mengunjungi, sekali lagi Terima Kasih