Cara Membuat Breadcrumb

April 16, 2012

Bismillah
Breadcrumb merupakan suatu bentuk navigasi yang menunjukkan konten berada dalam suatu kategori yang mempermudah pembaca mengerti dimana letaknya dan tema persoalan artikel tersebut (Definisi saya sendiri, Sumpah!).

Kemarin-kemarin saya sudah membahas membuat breadcrumb dan sudah ada 2 artikel, dan semuanya menurut saya kurang memuaskan, untuk itu saya berusaha untuk mentelaah, memahami kerja breadcrumb itu sendiri, dan dalam tutorial ini saya mempunyai persoalan, persoalan itu antara lain: persoalan pertama mengapa tidak bisa terIndex oleh google, persoalan kedua mengapa yang tampil dalam breadcrumb hanya 1 label saja padahal sudah ditempatkan dalam dua label, dan sekarang saya sudah menemui titik terang bagaimana 2 persoalan diatas bisa diatasi, saya mencoba untuk membuat tutorial ini lagi dan semoga seperti apa yang saya harapkan, gambar dibawah ini adalah hasil SERP dari postingan saya

Dapat kita lihat tulisan yang digaris bawah merah, itu merupakan hasil breadcrumb jika terindex oleh google, dan jika sobat ingin mengetahui apakah breadcrumb sobat terindex oleh google atau tidak bisa dilihat disini http://www.google.com/webmasters/tools/richsnippets

Cara Membuat Breadcrumb

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Letakan kode dibawah ini sebelum kode: ]]></b:skin>

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

Langkah 3
Kemudian cari kode <b:include data='top' name='status-message'/>
biasanya ada 2 kode yang serupa, dan masing-masing diatasnya letakkan kode berikut

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

Langkah 4
Letakkan kode dibawah ini diatas kode <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 == "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"'>

<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</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"'>

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

Langkah 5

Semoga bermanfaat, selamat mencoba dan semoga berhasil

Labels: Blog Design, SEO

20 Komentar:

Muhammad Irham said on April 16, 2012 at 9:50 AM

PERFECT:-q:))

Batikrock said on April 16, 2012 at 2:18 PM

makasi atas infonya gan mampir ke http://ngasar.blogspot.com/

:[[

Muhammad Irham said on April 16, 2012 at 2:32 PM

@Dhajal Capengok gan :)

Anonymous said on April 18, 2012 at 9:13 PM

yang menarik adalah definisinya,.. simpel tapi orisinal,.. heheheh bravo,..

Anonymous said on May 4, 2012 at 3:10 PM

mantab sob, thanks ilmunya

Blog Agil95 said on May 8, 2012 at 3:27 PM

Fantastic :-q

Ringtone Lucu Gratis said on May 24, 2012 at 6:26 PM

terima kasih bnyak gan. ini sangat membantu! Thx

iklan internet said on June 9, 2012 at 6:25 AM

inponya berguna bgt buat newbie kyk ane..

Limit Komputer said on June 11, 2012 at 10:04 AM

Thanks yah gan ...

Bisa lihat gan

Ryan Mika said on June 12, 2012 at 1:01 AM

makasi sob telah berbagi. salam kenal ya

aruna prabaswara said on June 13, 2012 at 10:49 AM

Master,,gmn ya cara agar judul blog kita bsa di klik? judul blogku duniaku http://duniakaomao.blogspot.com/

Muhammad Irham said on June 13, 2012 at 3:45 PM

@aruna prabaswara ada 2 kemungkinan yaitu kesengajaan untuk tidak mencantumkan kode data:blog.homepageUrl atau emang rusak pada header dan memang template tersebut di design seperti demikian, untuk hal ini saya belum terlalu faham karena setiap template mempunyai tujuan berbeda", entah emang single link atau gimana, coba saja di edit pada bagian header.

d7own said on June 26, 2012 at 7:57 AM

manft bgt nh gan..
Thx infox..
Sks trs..
d tngg knjgnxxx gan..

Surga Kenari said on June 26, 2012 at 8:00 AM

thanks alottttttt :-*

LP said on June 28, 2012 at 7:47 PM

thanks sob tutornya hehehehe

Lowongan Kerja Terbaru said on July 5, 2012 at 5:32 PM

terimakasih banyak mas.triknya bekerja :)

masaiya said on July 19, 2012 at 6:24 PM

Ini dia yang saya cari, mantep dari dulu gak ada yang jawab untuk bisa multi label,, dan ini yang berhasil saya terapkan.

anak baik said on August 29, 2012 at 3:23 AM

kenapa enggak muncul di blog ane ya gan breadcrumbsnya