Cara membuat Navigasi penghubung ke halaman awal atau breadcrumb

Ada beberapa cara untuk menaikkan traffic blog kita, salah satunya adalah dengan menambahkan fitur Breadcrumbs kedalam blog atau website kita. Bagi yang belum tahu apa itu Bread crumbs bisa dijelaskan sebagai alat navigasi untuk menunjukkan jejak bagi pengguna untuk mengikuti kembali ketitik awal atau entri dan biasanya berada diatas judul postingan.

Bagi yang belum jelas apa itu breadcumbs bisa lihat screenshoot dibawah ini :

Seperti yang sudah saya jelaskan diatas fungsi dari memasang navigasi breadcrumb diatas judul postingan adalah untuk mempermudah mesin pencari "robot google" dalam melakukan crawl terhadap halaman blog atau web kita, sehingga secara otomatis akan mengoptimalkan SEO dan meningkatkan traffic blog kita.

Langsung saja, berikut langkah - langkah membuat Breadcrumbs :

• kita login dulu ke blog kita
• pilih template dan klik Edit HTML
• setelah itu jangan lupa centang Expand Template Widget
• Cari kode ]]></b:skin> untuk memudahkan pencarian tekan Ctrl+F secara bersamaan dan masukkan kata kuncinya
• Setelah ketemu, letakkan kode html dibawah ini dan paste diatas ]]></b:skin>

.breadcrumbs {padding:0px 5px 5px 0px; margin: 0px  0px  6px; font-size:11px;border-bottom:4px solid #ccc}

• Setelah itu cari dan ganti kode <b:includable id='main' var='top'> dengan kode 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 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'/>

•       Simpan template   

Selamat mencoba..!


tag : cara membuat breadcrumb, membuat navigasi breadcrumb, Apa itu breadcrumb, cara pasang breadcrumb