Cara Membuat Breadcrumbs / Menu Navigasi Pada Blog


 
Sharing Mania- akan ada kaitannya dengan Breadcrumbs. Breadcrumbs kalau di google translate adalah remah roti tapi bukan itu yang dimaksud. Breadcrumbs disini adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. 

Biasanya navigasi situs breadcrumbs memiliki laman umum sebagai tautan pertama di sebelah kiri, dan di sebelah kanan adalah bagian yang spesifik sampai ke paling ujung sebelah kanan merupakan bagian paling spesifik. Navigasi situs breadcrumbs selalu menjadi pilihan pakar SEO, konon kata mbah-mbah cara ini lebih disukai search engine terutama mbah Google.

Jika blogger ingin membuatnya maka ikuti langkah langkah yang bloglistic berikan. pastikan blog blogger harus memiliki label sebelum mengikuti langkah selanjutnya.


Pergi ke Dasbor. lalu pergi ke Rancangan dan kemudian ke Edit HTML, jangan lupa untuk men-checklist kotak Expand Template Widget.

Selanjutnya cari kode  <b:includable id='main' var='top'> letakkan script dibawah ini tepat di atas kode tadi.


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

setelah itu cari kode <b:if cond='data:post.dateHeader'> dan letakkan kode dibawah ini tepat diatasnya.

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

setelah itu cari kode ]]></b:skin> dan letakkan barisan kode css breadcrumb dibawah ini tepat diatas kode tadi.

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

kemudian simpan template dan selesai.

semoga tutorial ini membantu para blogger yang sedang mencarinya.

0 comments on Cara Membuat Breadcrumbs / Menu Navigasi Pada Blog :

Post a Comment

Blog Archive

Sharing Mania Data