Sempak Mungil XI IPS 4

Apa Itu Navigasi Breadcrumb ?, Pertanyaan itulah yang akan kita selesaikan kali ini.Ok akan sya jelaskan apa yang dimaksut dengan Navigasi Breadcrumb. Navigasi Breadcrumb yaitu sebuah tautan link internal yang terletak diatas atau dibawah halaman situs Web/Blog yang digunakan untuk mempermudah para pengunjung untuk kembali kehalaman sebelumnya.

Biar Lebih Jelas anda bisa lihat gambar berikut :

Perhatikan pada bagian gambar yang ditunjuk oleh warnah merah, itu lah yang saya maksut dengan Navigasi Breadcrumb. Pastinya ada sudah sering melihat menu Navigasi Breadcrumb ini di blog-blog yang lain dan untuk melihat demo aslinya anda bisa coba pada halaman blog Dapur Tutorial Blogspot yang juga sudah dilengkapi dengan Navigasi Breadcrumb ini.

Sekarang kita bahasa langkah-langkah untuk membuat menu Navigasi Breadcrumb.

1. Pastikan ada sudah login kehalaman blog anda
2. Pilih Template





3. Klik Pada Menu Edit HTML





4. Kemudian Klik Pada Tombol Lanjutkan





5. Selanjutnya anda akan menjumpai halaman berikut





6. Sebelum Melakukan Edit HTML sebaiknya anda Download Template Lengkap Terlebih Dahulu.
7. Cari Kode ]]></b:skin> (Gunakan Tombol CTRL + F3 untuk mempermudah mencari kode)
8. Copy dan Letakan kode dibawah ini dibagian atas kode ]]></b:skin>  

.breadcrumbs {


padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}



9.  Apababila sudah selesai sekarang cari kode <div class='post hentry uncustomized-post-template'> 
10. Copy kode dibwah ini dan letakan diatas kode tersebut

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

11. Kemudian klik pada tombol simpan
12. Sekarang lihat pada halam postingan blog anda jika menu Navigasi Breadcrumb muncul berarti anda sudah berhasil melakukan langkah-lankah diatas jika belum jangan menyerah dan berhenti mencoba

Demikian sekilas tetang Tutorial Blogspot  tetang cara membuat Membuat Menu Navigasi Breadcrumb Blogspot semoga berhasil dan bermanfaat.