Cara mengganti Breadcrumbs valid HTML5

Cara Memasang Breadcrumb valid HTML5, Breadcrumbs SEO Friendly,

Sangat banyak sekali macam dan jenis breadcrumbs dengan berbagai macam tampilan yang menarik dan SEO Friendly, akan tetapi dari sekian banyak macam breadcrumbs yang menarik mungkin ada saja yang tidak valid hmtl5 dan CSS3, pada kali ini kami memilih dan membagikan sebuah tutorial memasang atau membuat breadcrumbs seo friendly Valid HTML5. Bagi blog sobat yang tidak memiliki breadcrumbs lebih baiknya Anda memasang breadcrumbs di blog Sobat, Hal ini akan sangat bermanfaat dan berguna untuk blog Sobat, dan jika blog Sobat sudah menggunakan breadcrumbs lebih baik mengecek setiap kode script pada breadcrumbs tersebut apakah sudah valid html5 atau tidak ? Jika tidak, maka ganti saja kode breadcrumbs blog sobat lalu membuat breadcrumbs baru dengan kode script breadcrumb dibawah ini.

Breadcrumbs ini sudah valid html5 dan tentunya seo friendly, jadi sobat beruntung telah membaca dan menggunakan kode script breadcrumb ini untuk mengganti kode breadcrumbs yang ada pada blog sobat, oke langsung saja. Silahkan baca tutorialnya dibawah ini :

Sering kita menjumpai kode dibawah ini yang menjadikan breadcrumbs menjadi tidak valid html5 :

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

Langkah memasang atau mengganti Breadcrumb, sebagai berikut :
1. Masuk ke Blogger.com
2. Klik Template ->> Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>

.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
margin-top:0px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}

5. Kemudian cari kode seperti ini <b:includable id='main' var='top'>
6. Kemudian Ganti dengan kode script dibawah ini :

<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'>Home</a></span> » <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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
» <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <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'>Home</a></span> » <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'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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. Lalu klik Simpan Template

Catatan :
Cara diatas adalah cara untuk membuat breadcrumbs baru pada blog Anda

Bagaimana cara mengganti mengedit breadcrumbs di blog agar valid html5 ?
Dibawah ini saya membagikan cara mengganti breadcrumbs agar valid html5, Silahkan Anda bisa melihat tutorial cara edit atau mengganti breadcrumbs menjadi valid html5, langkahnya sebagai berikut :

1. Masuk ke Blogger.com
2. Klik Template ->> Edit HTML
3.Cari kode seperti ini <b:includable id='main' var='top'>
4. Kemudian periksa kode script breadcrumbs pada blog Anda seperti dibawah ini :

<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

Lalu ganti dengan kode breadcrumb dibawah ini :

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
» <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

5. Kemudian klik Simpan Template

Jika kode breadcrumb sudah diganti dengan kode yang valid HTML5, coba anda cek dan uji hasilnya DISINI

Cara mengganti Breadcrumbs valid HTML5

Cara mengganti Breadcrumbs valid HTML5

Ditulis Oleh : Admin