Panduan Bagaimana Cara Membuat Breadcumb Di Setiap Postingan Blog

Cari Artikelmu | Panduan Bagaimana Cara Membuat Breadcumb Di Setiap Postingan Blog

Selamat siang!! kali ini saya akan membagikan Panduan Bagaimana Cara Membuat Breadcumb Di Setiap Postingan Blog. Untuk membuat tampilan blog kita menjadi lebih profesional dan pastinya lebih Seo di mata Search Engine, maka kita perlu menambahkan breadcumb di blog kita yakni di bagian atas setiap postingan.

Breadcumb ini maksudnya menampilkan detail alamat dari sebuah postingan. Sama halnya seperti sebuah file gambar yang ada di laptop kita, Seperti My Computer=>Data Local=>File Gambar=>Gambar, nah begitu juga pada blog yang menunjukkan letak sebuah artikel. Yah, Seperti itulah yang di maksud breadcumb itu..

Ok, Tak perlu berlama-lama langsung saja. Berikut ini adalah langkah-langkah cara membuat breadcumb di setiap postingan blog:

1. Buka Dashboard, terus Template=>Edit Template

2. Kemudian Copy Script Dibawah ini kemudian pastekan di atas kode ]]></b:skin> 

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:13px;border-bottom:1px dotted #ccc;font-weight:normal}

3. Lanjut ke Htmlnya, Copy Code di bawah ini kemudian ganti kode ini <b:includable id='main' var='top'>

<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' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
&#187;
</b:if>
<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'/>

4. Oke, Sampai disini selesai dan klik Save.. Cobalah lihat blog anda dan lihat breadcumb di atas postingan anda..

Sekian untuk Panduan Bagaimana Cara Membuat Breadcumb Di Setiap Postingan Blog. Jika anda bingung! jangan sungkan untuk bertanya di kolom komentar..