Fungsi & Cara Membuat Navigasi Breadcrumbs Untuk Blogspot



Fungsi & Cara Membuat Navigasi Breadcrumbs Untuk Blogspot


Sobat sudah tentu tau apa itu breadcrumbs dan sudah tau fungsinya seperti apa, namun jika diantara sobat belum tau apa-apa tentang breadcrumbs ini, baiklah saya jelaskan terlebih dahulu mengenai fungsi dan penjelasan breadcrumbs ini sebelum lanjut ke pemaparan tentang cara pemasangannya pada blog.





1. Breadcrumbs menurut wikipedia



Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link kembali ke halaman sebelumnya kepada setiap pengguna menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, ataupun dapat menggunakan simbol lainnya seperti » atau >, serta beragam grafik.

Breadcrumbs biasanya terlihat seperti ini:

Home page > Nama Kategori > Judul Postingan

atau

Home page : Nama Kategori : Judul Postingan


Sumber : Wikipedia



2. Breadcrumbs menurut Saya (lostsector)


    Breadcrumbs adalah petunjuk yang memudahkan bagi para vistor untuk mengetahui posisi pada sebuah blog/website dimana pada breadcrumbs ini terdapat dua sampai tiga tag yang berisikan link aktif (penghubung) sehingga memudahkan pengunjung untuk kembali ke halaman / label sebelumnya atau bahkan kembali pada menu homepage blog/web.





Nah, selain hal tersebut di atas, breadcrumbs juga sangat baik untuk SEO karena akan memperkaya keywords pada setiap halaman atau postingan. Berikut contoh gambar breadcrumbs :





Fungsi & Cara Membuat Navigasi Breadcrumbs Untuk Blogspot





Sekarang, untuk pemasangannya sendiri memerlukan ketelitian dalam penempatan kode-kodenya karena jika terjadi kesalahan, maka breadcrumbs ini tidak akan berfungsi atau tidak bisa ditampilkan pada blog/website.


  • Login ke Blogger » Dashboard » Template » Edit HTML

  • Beri centang pada "Expand Template Widget"

  • Copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>




.breadcrumbs {

background: #fff;

float: left;

border: 1px solid #E6E6E6;

width: 575px;

font-size: 11px;

margin: 10px 10px 10px 10px;

padding: 5px 10px 5px 10px;

}



  • Lanjutkan dengan mencari kode di bawah ini :




<b:include data='top' name='status-message'/>



  • Jika sudah ketemu, copy kode di bawah ini dan pastekan tepat di bawah kode di atas




<b:include data='posts' name='breadcrumb'/>



  • Langkah selanjutnya, cari kode <b:includable id='main' var='top'> kemudian copy kode di bawah ini dan pastekan tepat di bawahnya




<!-- Breadcrumb Navigation By http://lostsector.blogspot.com/ -->

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- 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="v:url" property="v:title">Home</a></span>

 <b:loop values='data:post.labels' var='label'>

 <b:if cond='data:label.isLast == "true"'>

 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

 </b:if>

 </b:loop>

 » <span><data:post.title/></span>

</div>

<b:else/>

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

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<div class='breadcrumbs'>

 <b:if cond='data:blog.pageName == ""'>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

 <b:else/>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

 </b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<!-- Breadcrumb Navigation By http://lostsector.blogspot.com/ -->



    Keterangan :



    Kode yang saya tandai dengan warna biru di atas adalah kode yang menampilkan label terakhir dari postingan, tetapi jika ingin menampilkan semua label pada menu navigasi breadcrumbs, maka hapus kode tersebut.



  • Terakhir, simpan template dan lihat hasilnya.



Semoga apa yang saya posting kali ini memberikan manfaat bagi sobat, terima kasih dan salam bloggers...!!!


Artikel Terkait Blog Tips ,it

No comments:

Post a Comment