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


COMMENTS

BLOGGER: 2
Loading...

Nama

Artikel,66,Cerita singkat,82,Java,12,SEO,15,Tahukah sobat??,21,Tips dan Trik,15,Tips.....n' Trick.....,14,Tutorial,20,Tutorial Blogger,50,
ltr
item
Blog Salman Syuhada: [Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah
[Tutorial] Cara memasang menu navigasi (Breadcrumbs) pada Blogger dengan mudah
http://2.bp.blogspot.com/-LgwQPcwgt_g/UDYy8RfCATI/AAAAAAAACfU/zTtjgDU4CNI/s400/brea1.gif
http://2.bp.blogspot.com/-LgwQPcwgt_g/UDYy8RfCATI/AAAAAAAACfU/zTtjgDU4CNI/s72-c/brea1.gif
Blog Salman Syuhada
http://blog.salmansyuhada.com/2012/08/tutorial-cara-memasang-menu-navigasi.html
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/2012/08/tutorial-cara-memasang-menu-navigasi.html
true
5369818979434965955
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy