Tuesday, August 16, 2011

Menambahkan Breadcrumb Ke dalam Blogger Anda

Breadcrumb adalah nama yang di berikan ke menu link , biasanya breadcrumb ini di tampilkan di atas posting di blog dan di bagian atas link website . Navigasi breadcrumb akan menunjukan jejak saat ini . Navigasi ini sudah sangat cukup populer dan mungkin telah banyak di gunakan oleh para blogger lain .

Berikut ini adalah contoh gambar dari navigasi breadcrumb ini



Cara memasukkan Breadcrumb di Blogger anda

1. Masuk pada akun blogger anda lalu pergi ke design > edit html > expand widget template



2. Setelah itu cari kode berikut ini <b:include data='top' name='status-message'/>


3. Jika anda telah menemukan kode tersebut  , hapus kode itu lalu ganti dengan kode dibawah ini.

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


4. Kemudian cari kode <b:includable id='main' var='top'> , lalu ganti kode tersebut dengan kode dibawah ini


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!--Breadcrumbs code info @ http://vianjb.blogspot.com/-->

5. Kemudian cari kembali kode ]]></b:skin> , lalu letakkan kode dibawah ini tepat sebelum atau diatas kode ]]></b:skin> .


/* Breadcrumbs Css info @ http://vianjb.blogspot.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

6. Save Template dan blog anda pun sudah mempunyai navigasi breadcrumb

8 comments:

  1. oh gitu ya gan,amaksih bnyak ya gan

    ReplyDelete
  2. kayaknya bagus nie,,, ikutan coba ya sob,,,

    ReplyDelete
  3. gak bisa kak...:'(


    gak muncul :'(

    ReplyDelete
  4. ga kok punya ane ga keindex index di SE yah gan, klo boleh tau kenapa tuh?

    ReplyDelete
  5. Buat yang belum bisa, sebenernya tips diatas sebenarnya udah benar, cuman di point 4, kode bukan diganti tapi simpan kode breadcumbs nya tepat diatas kode tersebut, dijamin berhasil. Jika berkenan buat sob admin, mohon update posting ini biar ga ada yang kecewa hehehe

    Jangan lupa kunjungi saya ya di http://kelasinformatika.com

    ReplyDelete


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam