[Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah

- [Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah Salam sobat blogger... Salam sukses... Mela...

-[Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah

Salam sobat blogger...

Salam sukses...

Melanjutkan kembali dalam dunia blog, Berbagai tutorial blog akan sobat temui di  sini,

Pada tutorial selanjutnya ini, ana mengulas kembali tutorial mengenai [Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah. Sebelum menggunakannya, ada baiknya sobat blogger untuk mengenal terlebih dahulu apa itu Breadcrumbs.

Mengenal Breadcrumbs?

Menurut Wikipedia, Breadcrumbs berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dongeng yang terkenal itu. Hingga saat ini Breadcrumbs dijadikan sebagai bantuan navigasi yang digunakan dalam user interface yang memungkinkan pengguna untuk melacak lokasi suatu file dalam program ataupun dokumen.

Nah... pada kesempatan kali ini, ana berbagi bukan untuk digunakan dalam komputer. Tetapi juga ada pada blog. Sehingga dapat menentukan lokasi artikel yang sedang dibaca oleh pembaca.

Dalam tampilannya, Breadcrumbs biasanya muncul secara horizontal di bagian ata halaman web, ataupun berada di bawah bar judul atau header. Lihat contoh pada blog ini. 

Baris kata yang muncul juga menyediakan link kembali ke halaman sebelumnya yang setiap pengguna akan dinavigasikan hingga sampai pada halaman yang dibaca saat ini. Sehingga Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri.  Biasanya tampilan Breadcrumbs adalah

Halaman Depan > page Bagian > Bagian Halaman

atau

Home page: Bagian Halaman: Halaman Ayat

Tertarik untuk membuatnya? Caranya sangat mudah untuk diikuti.
Langkah-langkah [Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah adalah 

1. Langkah pertama yang harus dilakukan adalah masuk ke dalam akun blogger sobat.

2. Setelah itu, masuk ke Dashbor => Template => Edit HTML => Lanjutkan

(Jangan lupa untuk mencentang Expand Template Widget)

3. Kemudian cari kode <b:includable id='main' var='top'>
(Untuk mempermudah pencarian, gunakan CTRL+F pada keyboard)

4. Setelah menemukan kode <b:includable id='main' var='top'> , copy kode di bawah ini dan pastekan diatas atau sebelum kode <b:includable id='main' var='top'> 

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs Bloglistic. http://bloglistic.blogspot.com/ -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

Browse:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
<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:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>

</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Bloglistic -->
</b:includable>

5. Kemudian cari kode <b:if cond='data:post.dateHeader'> dan letakkan kode dibawah ini tepat diatas atau sebelum kode <b:if cond='data:post.dateHeader'>.

<b:include data='post' name='breadcrumbs'/>

6. Langkah terakhir, cari kode  ]]></b:skin> dan letakkan barisan kode berikut  diatas atau sebelum kode ]]></b:skin> 

.breadcrumbs {

border-bottom:1px dotted #000;

margin:2em 0 0.5em;

padding:0 0 0.5em;

}

7. kemudian lihatlah pada Pratinjau terlebih dahulu, jika sudah tidak ada pesan error lagi barulah SIMPAN TEMPLATE.

Dan lihat hasilnya,
Selamat mencoba dan semoga berhasil.
Demikian [Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah.
Jika terdapat kesalahan, mohon diberitahu kepada kami melalui komentar postingan ini.
Terima kasih...