Cara Membuat Navigasi Breadcrumbs

Cara Membuat Navigasi Breadcrumbs - Breadcrumbs biasanya muncul secara horizontal di bagian atas suatu halaman web, sering dibawah bar judul atau header. Breadcrumbs menyediakan link kembali ke halaman sebelumnya setiap pengguna navigasikan melalui breadcrumbs untuk mendapatkan ke halaman saat ini atau di situs-hirarkis struktur-halaman induk dari yang sekarang. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau masuk. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun desainer dapat menggunakan tanda penghubung lainnya (seperti » atau >).

Berikut ini adalah langkah-langkah membuat navigasi breadcrumbs :

1.Login ke blogger.com
2.Dari Dashboard sobat pilih Rancangan > Edit HTML
3.Cheklist Expand Template Widget
4.Letakkan kode dibawah ini sebelum kode : ]]></b:skin>

.breadcrumbs{
      margin-left:10px;
      padding: 5px 0;
      border-bottom: 1px dotted;
      line-height:1.4em;
      }

5.Kemudian cari kode : <b:include data='top' name='status-message'/>
biasanya ada 2 kode yang serupa, dan masing-masing diatasnya letakkan kode berikut

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

6.Letakkan kode dibawah ini diatas kode <b:includable id='main' var='top'>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

7.Setelah itu klik Save Template


Jika sobat ingin mengetahui apakah breadcrumb sobat terindex oleh google atau tidak bisa dilihat disini Google Rich Snippet Tool.

Selamat mencoba membuat navigasi breadcrumbs yang terindeks oleh google dan semoga bermanfaat, salam.

Title : Cara Membuat Navigasi Breadcrumbs
URL : http://agil95en2.blogspot.com/2012/05/cara-membuat-navigasi-breadcrumbs.html
Do not forget to share the article Cara Membuat Navigasi Breadcrumbs if beneficial to your friends.