Membuat Awesome Breadcrumb SEO Friendly

Setelah sebelumnya saya pernah memberikan artikel tentang menu breadcrumb metro style yang mungkin akan lebih pas dan cocok buat kalian yang menggunakan template blog gaya metro style. Kini saya akan memberikan sedikit tips membuat navigasi breadcrumb agar blog lebih seofriendly, mungkin kalian semua sudah sering melihat beberapa tips - tips seperti ini di internet. Namun disini ada sedikit yang berbeda dengan menu breadcrumb yang saya berikan, yaitu menggunakan fitur font awesome bootstrap. Untuk tampilannya kira kira seperti gambar diatas.

Masukkan kode dibawah ini sebelum kode

Code:

</head>

Code:

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian Tambahkan kode CSS dibawah ini sebelum

Code:

]]></b:skin>

Code:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:10px;margin-top:0px;font-size:11px;color:#5B5B5B;}

Lalu cari Kode

Code:

<b:includable id='main' var='top'>

dan ganti dengan kode dibawah ini :

Code:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<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'><i class="icon-home"></i> HOME</a></span>
<b:loop values='data:post.labels' var='label'>
<i class="icon-check"></i> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
<i class="icon-check"></i> <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>Unlabelled</span> <i class="icon-check"></i> <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <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'/>

More http://samsury-sites.blogspot.com/2014/01/awesome-breadcrumb-seo-friendly.html

 

ada yang sudah coba model

ada yang sudah coba model breadcrumb diatas ?