Cara Pasang Breadcrumbs Blog Responsive

Skipen - Tips dan Trik Blogger, Breadcrumbs SEO. Banyak tutorial yang menjelaskan cara membuat breadcrumbs di Blogspot/Blogger. Kali ini saya akan menjelaskan cara membuat breadcrumbs yang SEO friendly dan semua label terindeks oleh Search Engine. Breadcrumbs merupakan menu navigasi yang berada di atas judul postingan seperti yang ada di blog saya. Struktur ini tentu berbeda dengan WordPress, yang bisa membuat child category. Struktur di bloger hanya Home kemudian Label. Apabila memiliki beberapa label, maka akan terbaca seperti ini :

Home > Label1 > Label2 > Label3

Breadcrumbs adalah

Cara Memasang Breadcrumbs di Blog

Login ke Blogger.com
Masuk ke menu edit html, Dashboard > Template > Edit HTML.

Cari kode ]]></b:skin> lalu copy paste kan kode tepat diatasnya.

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Kemudian cari <b:includable id='main' var='top'>, jika sudahh ketemu silakan hapus dan ganti dengan kode html 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'>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' 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'>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 Label <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'/>