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

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


Share this

Related Posts

Previous
Next Post »

2 comments

Write comments
27 Agustus 2012 00.24 delete

Ni salah satu menu yang paling penting buat dipasang dan kayaknya di template blogku belum ada ni

Reply
avatar
27 Agustus 2012 21.57 delete

Selamat mencoba mas Ramzi, :D

Reply
avatar

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon