myblog

berikut contoh Navigasi Breadcrumb:


perhatikan tulisan Earn Free Money dan Tips Blog dipisahkan dengan tanda koma, itu karena Postinga Blog memiliki dua Kategori atau label. Sebanyak apa pun label dalam satu artikel selalu akan dipisahkan dengan tanda koma.

Klo Sobat tertarik untuk Memasang Navigasi Breadcrumb ini silahkan ikuti tutorial Membuat Navigasi Breadcrumb SEO Friendly Berikut:

1. Loggin Blog - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode <div class='post hentry'>
3. Copy Kode berikut dan Paste tepat dibawah kode <div class='post hentry'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqXw_hs2JoZ8r7nviyxQHBWqGL0wpAdlDQ0mK38UHi60b2BIPJIxMOQ700EuGRzzzZ0iAHQS_VbrxMn3BTij0m-YNxiZKe7q4exfOkMhHz8j71Wzb0-ZOEAgXfvu3fAA9yhQRcIONH4E/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187;
<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 != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqXw_hs2JoZ8r7nviyxQHBWqGL0wpAdlDQ0mK38UHi60b2BIPJIxMOQ700EuGRzzzZ0iAHQS_VbrxMn3BTij0m-YNxiZKe7q4exfOkMhHz8j71Wzb0-ZOEAgXfvu3fAA9yhQRcIONH4E/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

4. Apabila Sobat ingin menambahkan Kotak (Border) pada tampilan Breadcrum, silahkan Copy kode berikut:

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

5. Paste kode tadi tepat di atas kode ]]>

6. Simpan Template

Keterangan: Tulisan Your Are Here bisa Sobat ganti dengan tulisan yang lain.