Cara Membuat Breadcrumbs di Blog

Cara membuat Breadcrumbs di blog. Breadcrumbs penting untuk memudahkan pengunjung mengetahui letak halaman yang sedang dibaca pada blog. Dengan adanya Breadcrumbs, dapat diketahui sebuah posting terletak di dalam kategori dan sub-kategori apa. Selain itu, Breadcrumbs juga diketahui dapat membantu proses SEO, agar search engine dapat mengetahui navigasi laman di dalam blog. Cara membuatnya cukup mudah kok, Berikut ini saya paparkan cara membuat Breadcrumbs.

1. Login di Blogger, lalu masuk ke pengaturan Template.

2. Pilih Edit HTML (Saran saya, sebelumnya back-up template kamu terlebih dahulu untuk menghindari kesalahan)

3. Centang Expand Widget Templates

4. Cari kode ]]></b:skin>

5. Copy kode di bawah ini, lalu paste di atas kode ]]></b:skin>

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

6. Setelah itu, cari lagi kode <b:includable id='main' var='top'>

7. Hapus kode <b:includable id='main' var='top'> lalu ganti dengan kode di bawah ini.


<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <br />
<b:if cond='data:blog.pageType == "static_page"'> <br />
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div><b:else/> <br />
<b:if cond='data:blog.pageType == "item"'> <br />
<!-- breadcrumb for the post page --> <br />
<b:loop values='data:posts' var='post'> <br />
<b:if cond='data:post.labels'> <br />
<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> <br />
<b:loop values='data:post.labels' var='label'> <br />
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> <br />
</b:loop> <br />
» <span><data:post.title/></span> <br />
</div><b:else/> <br />
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div></b:if> <br />
</b:loop> <br />
<b:else/> <br />
<b:if cond='data:blog.pageType == "archive"'> <br />
<!-- breadcrumb for the label archive page and search pages.. --> <br />
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> <br />
</div><b:else/> <br />
<b:if cond='data:blog.pageType == "index"'> <br />
<div class='breadcrumbs'><b:if cond='data:blog.pageName == ""'> <br />
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <br />
<b:else/> <br />
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> <br />
</b:if> <br />
</div></b:if> <br />
</b:if> <br />
</b:if> <br />
</b:if> <br />
</b:if> <br />
</b:includable> <br />
<b:includable id='main' var='top'> <br />
<b:include data='posts' name='breadcrumb'/>

8. Klik simpan, dan lihat hasilnya.

4 komentar:

  1. Tutorial yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com

    BalasHapus
  2. Terima kasih agan :)
    Kunjungan Balik yah http://kopfi-official.blogspot.com/

    BalasHapus
  3. Maksutnya back up itu apa?
    Maklum baru belajar..

    BalasHapus
    Balasan
    1. Di bagian pengaturan template, di sebelah kanan atas ada tulisan "Backup/Restore". Backup fungsinya u/ mendownload template blog kita.

      Sebelum mengedit HTML template, dianjurkan download dulu template blog kita, supaya nanti kalau setelah diedit malah terjadi kesalahan bisa dikembalikan dengan me-restore (mengembalikan spt semula) template kita.

      Caranya template yg sudah didownload diupload kembali dg klik Backup/Restore, lalu upload.

      Semoga ngerti yah.. hehe (o)

      Hapus

INSTAGRAM POST

@mlnaufaldi