Cara Membuat Breadcrumbs SEO Friendly Valid HTML5 Di Blog

Unknown

Tutorial

Kamis, 20 Februari 2014

Belum ada komentar

Breadcrumbs SEO Friendly Valid HTML5 Di Blog - Sebetulnya sudah banyak sekali tutorial mengenai cara membuat Breadcrumbs SEO Friendly yang bertebaran di internet, tapi kali ini Ziant Shady akan berbagi sedikit pengetahuan saya yang sebetulnya juga saya dapat dari browsing di Internet.

Breadcrumbs merupakan menu navigasi yang berada di atas judul postingan yang bisa membuat child category seperti Home » SEO » Tutorial Blogger, atau bisa sobat lihat pada Blog ini yang posisinya tepat dibawah judul postingan. Breadcrumbs yang kali ini saya bagikan bukan hanya sekedar Breadcrumbs SEO Friendly, tetapi juga valid HTML5, untuk cara pemasangannya silahkan simak tutorial dibawah ini.

Cara Membuat Breadcrumbs SEO Friendly Valid HTML5

1. Login ke Blogger
2. Piih Template
3. Pilih Edit HTML
4. Cari kode ]]></b:skin> dan simpan kode dibawah tepat 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. Cari kode <b:includable id='main' var='top'> kemudian ganti dengan:

<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'/>

6. Simpan Template

Note: Jika sebelumnya template sobat sudah memiliki Breadcrumbs, hapus dulu kode yang lama agar tidak menimbulkan error pada template.

Semoga bermanfaat...