Cara Memasang Breadcumb di Blog Blogger

1. Apa itu Breadcumb?

Cara agar template blog blogger kita lebih SEO friendly adalah salah satunya dengan memasang breadcumb. Muncul pertanyaan, apa sih Breadcumb itu? Padahal jika diartikan ke Bahasa Indonesia artinya bisa jadi “remah roti”.

Mungkin asal mula kata breadcumb digunakan karena istilah ini mengingatkan kita pada Cerita dongeng yang berasal dari negeri Jerman yang dipublikasikan pada waktu itu oleh Grimm bersaudara, Hansel&Gretel. Diceritakan Hansel dan Gretel membuat jejak pulang kerumah dengan potongan-potongan roti sepanjang jalan sebagai penunjuk arah.

Dongeng Hansel dan Gretel

Jadi, breadcumb adalah sebuah jejak link yang dapat mempermudah atau membantu pengunjung untuk memahami isi konten web/blog serta sebagai penunjuk hirarki situs web/blog terkait.

2. Manfaat Breadcumb

Breadcumb biasanya muncul sebagai jejak link di bagian atas judul posting suatu halaman web/blog secara horizontal sebagai penunjuk arah jejak kembali. Breadcumb menyediakan link kembali ke halaman web/blog sebelumnya hingga Home atau Beranda situs web/blog sebagai pintu masuk atau titik awal.

Breadcumb tepat berada sebelum judul posting atau biasanya pada blogger adalah “label” artikel post terkait.  Biasanya simbol yang sering muncul adalah simbol lebih besar dari ( > ) yang berfungsi sebagai pemisah jejak link dari link utama atau induk (Home) sampai ke artikel terkait.

Leaf Culture > Blog > Cara Memasang Breadcumb di Blog Blogger

Sudah tahu kan apa itu Breadcumb? Sekarang kita lanjut ke bagaimana membuat jejak breadcumb di blog bawaan blogger untuk membuat blogger kita lebih terlihat rapih, SEO friendly, dan memudahkan pengunjung blog.

3. Menerapkan Breadcumb

A. Cara I

Langkah pertama,  seperti tahapan dalam “Edit HTML” umumnya dan jangan lupa untuk melakukan “Backup” template terlebih dahulu. Sekarang Kita anggap sudah sampai ke langkah memasang Script breadcumb.

Cari kode script berikut ini. Untuk mempermudah, jika browser yang Sahabat pakai adalah Mozilla maka gunakan fitur “Find” ( Ctrl+F ).

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

Setelah script diatas ditemukan, pastekan script dibawah ini tepat di atas atau sebelum <b:include data=’top’ name=’status-message’/>

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

Lalu cari script berikut ini

<b:includable id='main' var='top'>

Paste script selanjutnya tepat di atas atau sebelum script <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> » <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'>
 <b:if cond='data:label.isLast == &quot;true&quot;'>
 » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><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 == &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> » <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> » <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>

Disarankan untuk menyimpan template Anda terlebih dahulu, sebelum lanjut ke proses berikutnya.

Carilah kode script dibawah ini,

]]></b:skin>

Dan tambahkan script berikut ini tepat di atas  ]]></b:skin>

.breadcrumbs{
 margin-left:10px;
 padding: 5px 0;
 border-bottom: 1px dotted;
 line-height:1.4em;
 }

B. Cara II

Langsung saja ke tahapan “Edit HTML”, cari kode berikut ini;

]]></b:skin>

Setelah ditemukan, pastekan kode berikut sebelum atau persis diatas kode script ]]></b:skin>

 .breadcrumbs {
 padding:5px 5px 5px 0;
 margin:0;font-size:95%;
 line-height:1.4em;
 border-bottom:4px double #e2e7b4;
 }
 .breadcrumbs a {
 text-decoration:none;
 color: #000000;
 }

Kemudian, cari kode seperti di bawah ini;

<div class='post hentry'>

Setelah Anda dapat, copy paste kode berikutnya lagi persis di bawah atau setelah kode script <div class=’post hentry’>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Nama Blog Anda</a> » <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;'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>

“Save Template” dan langsung menuju ke halaman artikel blog Anda untuk membuktikan Tutorial-nya telah berhasil.

ex. Breadcumb di situs sahabatfree.blogspot.com

Sampai disini dulu posting tutorial blog bawaan blogger (blogspot), semoga tutorialnya berhasil dan dapat bermanfaat, juga menjadi lebih SEO friendly. Jangan lupa untuk meninggalkan pertanyaan ataupun juga lain halnya di kolom komentar.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s