Cara Mudah dan Gampang Plus Simple Membuat Breadcrumb Navigation di Blog

Assalamu'alaikum Wr.Wb
Salam Hangat dari Blogger Bogor Barat

Blog informasibogorbarat, Kali ini Share Tentang Cara Mudah dan Gampang Plus Simple Membuat Breadcrumb Navigation di Blogspot

1. Mengenal apa itu breadcrumb

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.

Ini contohnya:

Home>>SEO>>Cara Mudah dan Gampang Plus Simple Membuat Efek Gerak Pada Link di Blog.

       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.

Baiklah pada panduan dan tutorial gratis sekarang kita akan bersama-sama belajar memasang atau mengaktifkan breadcrumb tersebut pada halaman blog kita.

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

1 Setelah masuk halaman dasbor/dashboard, klik "Design" atau "Rancangan". Dari halaman Tata   Letak/Layout ".
   Lebih Simplenya Seperti Contoh Gambar di bawah ini
  

2. Pilih " Edit HTML "
    Seperti Contoh Gambar di Bawah ini

3. Cari kode seperti ini:
<b:include data='top' name='status-message'/> di template Anda.

4. Ganti dengan kode berikut:

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

5 Cari lagi kode seperti ini:

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

6 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'>

7. Cari kode seperti ini: ]]></b:skin> dan Letakkan Kode dibawah ini Tepat Diatasnya
    Jadinya Seperti ini

.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>

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

9. Selamat mencoba dan semoga berhasil.