Rina Net: Membuat Breadcrumbs Valid HTML5

Breadcrumbs adalah Pengkategorian artikel atau postingan. Breadcrumbs terletak di atas postingan dan berukuran kecil. Dalam postingan kali ini saya akan membahas tentang Cara Membuat Breadcrumbs Valid HTML5 untuk Blog. Mau tau bagimana Cara Membuat Breadcrumbs Valid HTML5? Ayo dilihat postingan kali ini.

Beradcrumbs sangat berguna untuk blog kita karena dapat memudahkan mesin pencari untuk mengcrawl postingan kita. Dengan breadcrumbs, mesin pencari akan mudah mencarinya berdasarkan kategori. Selain terlihat di atas postingan, breadcrumbs juga terlihat dalam pencarian google.

Seiring dengan perkembangan, sekarang blogger menyarankan untuk memiliki blog yang valid html 5 agar tidak terjadi kesalahan dalam pendeteksian, maka kali ini saya akan memberikan Cara Membuat Breadcrumbs Valid HTML5. Berikut tutorialnya.

Pertama : Cari kode ]]></b:skin>, lalu letakkan kode berikut di atasnya.

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

Kedua : Cari kode <b:includable id='main' var='top'> lalu ganti dengan kode berikut.

<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'>
<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'>
  &#187; <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>
&#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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Itulah postingan tentang Breadcrumbs Valid HTML5 dan Cara Membuat Breadcrumbs Valid HTML5. Semoga dapat berguna untuk anda. Hati-hati pada yang sudah pernah memakai Beadcrumbs sebelumnya. Jika ada kesalahan dalam tutorial silahkan komentar.

Senin, 06 Oktober 2014

Membuat Breadcrumbs Valid HTML5