Cara Membuat Breadcrum Di Blog


Bagi saya breadcrum di blog itu sangat penting, karena selain untuk navigasi, breadcrum juga berfungsi sebagai penunjang seo di blog kita. Breadcrum juga bisa memperindah tampilan blog kita. Membuat Breadcrum Di Blog itu sangat mudah dan juga cepat. Selain breadcrum, kalian juga perlu memberikan navigasi yang bagus seperti sitemap jika blog kalian belum mempunyai sitemap baca juga Cara Membuat Sitemap Di Blog. Sedikit penjelasan tentang breadcrum di bawah ini. 


Apa itu Breadcrum? Breadcrum adalah link yang akan mempermudah kan kalian untuk kembali ke label yang ada di blog. Biasanya berupa link horizontal yang jika di klik akan menuju ke link yang di klik.

Membuat Breadcrum agar terindex
Contoh Breadcrum

Nah untuk Cara Membuat Breadcrum Di Blog silahkan simak langkah-langkah dibawah ini dengan cermat agar bisa terindex. Berikut ini langkah nya. Baca Juga Agar Breadcrum Terindex.



1. Pertama masuk ke blogger

2. Kemudian menuju ke opsi " Template " dan " Edit Html "

3. Kemudian Copy Kode dibawah ini :

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;}
4. Kemudan cari kode " ]]></b:skin> " ( Gunakan CTRL + F  untuk lebih mudah mencari kodenya )
5. Kemudian Paste kode yang tadi tepat DIATAS kode " ]]></b:skin>  ".
6. Jika sudah, langkah selanjutnya silahkan copy kode dibawah ini :
<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'>My Blog</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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>My Blog</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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
7. Kemudian cari kode " <b:includable id='main' var='top'> "
8. Kemudian ganti kode " <b:includable id='main' var='top'> " dengan kode yang diatas tadi.
9. Pada akhir langkah ini silahkan simpan atau pratinjau dulu agar bisa melihat hasilnya.

Sekianlah artikel yang bisa Saya  sampaikan

Terima Kasih.

Sumber : http://teknologikomputer9.blogspot.co.id/2016/09/cara-membuat-breadcrum-di-blog.html

Komentar

Postingan Populer