Cara Memasang Menu Navigasi Breadcrumb di Blog – Breadcrumb adalah link navigasi yang muncul di atas sebuah postingan yang bisa membantu pengunjung ketika berada pada sebuah situs karena memudahkan untuk menelusuri artikel yang terkait label ataupun kategori. Pengunjung bisa mengetahui di halaman mana dia sedang berada. Contoh menu navigasi breadcrumb seperti gambar dibawah ini:
Cara memasang navigasi breadcrumb:
– Masuk ke akun Blogger anda
– Dashboard
– Tempalate
– Edit HTML
– Centang Expand Template Widget
– Letakkan kode berikut diatas kode ]]></b:skin> :
.breadcrumbs{
padding:0px;
font-size:12px;
line-height:1.4em;
border-bottom:4px double #6ABA00;
}
– Cari kode
<b:includable id='main' var='top'>
dan ganti dengan kode di bawah ini:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == "item"'> <p class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> <span class='post-labels'><span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span><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"'> » <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><b:else/> » Unlabelled</b:if> » <span><data:post.title/></span></b:loop></span></p> <b:else/> <b:if cond='data:blog.pageType == "archive"'><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> » Categories under <data:blog.pageName/></b:if> </span></p></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'> <!--Breadcrumbs Navigation For blogger -->
– Lalu cari atau scroll kebawah sedikit dan lihat kode yang seperti ini:
<b:include data='top' name='status-message'/>
– Tambahkan kode berikut:
<b:include data='posts' name='breadcrumb'/>
Jadi akan seperti ini:
<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/>
– Simpan Template
Anda bisa menguji apakah breadcrumb yang telah dipasang berhasil atau tidak di alamat ini: http://www.google.com/webmasters/tools/richsnippets
– Masukkan salah satu URL postingan anda dan klik preview
VANCODETO 