Breadcrumb
merupakan sebuah fitur navigasi yang biasanya terletak di atas atau di bawah judul
postingan. Fitur yang biasa dikenal dengan nama breadcrumb
ini berisikan kategori atau
label dari postingan dan bisanya selalu diawali dengan tombol menuju home
(halaman depan blog), seperti tampak berikut.
Breadcrumb disebut sebagai navigasi seo sebaris dengan tautan internal sehingga memungkinkan pengunjung untuk
menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.
Oleh sebab itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan
semakin mendapatkan kesempatan tampil di halaman depan google.
Langsung saja pada langkah-langkah pembuatan breadchumb ini : :
- Login dulu ke Blogger.
- Klik Template, kemudian Edit HTML.
- Letakkan kode berikut ini tepat sebelum kode ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
- Setelah itu, cari kode seperti ini :
<div
class='post hentry'>
- Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>
<b:if
cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if
cond='data:blog.pageType == "item"'> <div
class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>Home</a>
» <b:if cond='data:post.labels'><b:loop
values='data:post.labels' var='label'> <a expr:href='data:label.url'
rel='tag'><data:label.name/></a> <b:if
cond='data:label.isLast != "true"'> , </b:if>
</b:loop> </b:if> » <data:post.title/> </div>
</b:if> </b:if>
Simpan
Template.
Segera lihat hasilnyaCARA LAIN
Langkah-langkahnya:
- Login ke Blogger.
- Klik Expand Template, Edit HTML.
- Letakkan kode berikut ini tepat sebelum kode ]]></b:skin>
.breadcrumbs{padding:0 5px 5px 0;margin:0 0
5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}
Selanjutnya cari kode ini <b:includable id='main' var='top'> jika sudah ketemu gantilah dengan kode berikut:
<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"'><!--
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'/>
Save Template (selesai).
Namun demikian untuk melihat penggunaan kode tersebut ada error atau tidak kunjungi alamat ini Testing Tool - Google Developers.
Ikuti langkah-langkahnya sehingga hasilnya sperti berikut,
Berarti sudah benar dan segera lihat hasilnya, namun jika belum perbaiki kesalahan yang ditunjukkan.
Artikel Terkait