Cara Membuat Breadcrumb Navigation di Blogger

Membuat Breadcrumb Navigation di Blogger | Jika Anda perhatikan navigasi directory label seperti yang Anda lihat diatas judul posting ini, agar lebih jelas coba perhatikan urutan main menu yang di navigasikan oleh tanda >> yang mengarahkan ke posisi directory label penyimpanan yaitu directory dimana halaman posting tersimpan, dan membuat blog lebih terstruktur.

Ini contohnya:

Home>>Tutorial Blogger>>Cara Membuat Breadcrumb Navigation di Blogger

Jadi, jika menurut Saya breadcrumb itu adalah suatu attribute pada template blog atau website yang berfungsi memudahkan pencarian oleh robots dengan bantuan berupa arahan yang membawa ke lokasi tempat dimana file tersimpan.

Berikut langkah Membuat Breadcrumb Navigation di Blogger

Pertama login ke blogger.com, setelah login ikuti panduan berikut:

* Setelah masuk halaman dasbor/dashboard, klik "Design" atau "Rancangan". Dari halaman Tata Letak/Layout Klik "Edit HTML".

* Tandai dengan ceklist pada kotak disamping tulisan "Expand Widget Template".

* Cari kode seperti ini:

<b:include data='top' name='status-message'/> di template Anda.

* Ganti dengan kode berikut:

<b:include data='top' name='status-message'/>

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

* Cari kode seperti ini:

<b:includable id='main' var='top'>

* Ganti dengan kode berikut:

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<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"'> »

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</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"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<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> » Posts filed under <data:blog.pageName/>

</b:if>

</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

* Cari kode seperti ini: ]]></b:skin> dan ganti dengan kode berikut:

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

]]></b:skin>

* Save template, lihat hasilnya dengan cara mengklik salah satu judul posting Anda

Selamat mencoba dan semoga berhasil.