Cara memasang breadcrumb di blog

Hallo sobat .. !! Selamat datang di Fajar345 Blog. Hari ini saya akan menulis tentang cara memasang breadcrumb di blog, atau menu navigasi di atas judul posting. Sebelumya saya telah meulis tentang cara edit template blog agar lebih seo friendly salah satu untuk membuat temlpate kita lebih seo friendly adalah dengan memasang breadcrumb di blog selain untuk tujuan seo dengan memasang breadcrumb di blog dapat memudahkan pengunjung untuk mengetahui label atau kategori tulisan yang kita buat.
Buat sobat yang belum tahu bentuk breadcrumb, bentuknya adalah seperti ini

Dan jika breadcrumb sudah terdetiksi di search engine maka, search engine google akan menampilkannya seperti berikut

Buat sobat yang tertari untuk memasang menu navigasi diatas judul posting atau breadcrumb berikut adalah caranya.
Yang pertama sobat masuk dulu ke blogger kemudian edit html jangan lupa centang expand widget templates
Yang kedua sobat kemudian cari kode  <b:include data='top' name='status-message'/> setelah sobat menemukan kode tadi, sobat paste kode berikut tepat di atas kode <b:include data='top' name='status-message'/>

<b:include data='posts' name='breadcrumb'/>

Yang ketiga sobat cari kode berikut  <b:includable id='main' var='top'> Pate kode berikut tepat diatas kode <b:includable id='main' var='top'>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Setelah itu sobat cari kode ]]></b:skin> kemudaian sobat tambahkan kode berikut diatas kode ]]></b:skin>

.breadcrumbs{
margin-left:10px;
padding: 5px 0;
border-bottom: 1px dotted;
line-height:1.4em;
}

Setelah itu sobat jangan lupa save templatenya,  dan lihat hasilnya. 

Ok.. Mungkin itu sekian dulu tulisan saya tentang cara memasang breadcrum di blog,semoga bermanfaat.

Catatan :  untuk menampilkan breadcrum di search engine google, memerlukan waktu, saya juga hanya beberapa artikel saja yang breadcrumbnya muncul di search engine

Sobat suka tulisan ini..?

	Dapatkan Tulisan Gratis Via Email!
Follow Fajar345!