Cara Memasang Breadcrumb Pada Blog

Apa itu breadcrumbs ?

Mungkin pertanyaan itu sering muncul pada blogger pemula yang masih ingin tahu banyak tentang dunia blog dan segala isinya.
Ok,saya akan berikan sedikit penjelasan,jadi breadcrumbs adalah alat navigasi yang digunakan dalam user interface. Hal ini memungkinkan pengguna untuk melacak lokasi dokumen yang dicari.Jadi penbaca web akan lebih mudah mengetahui dimana letak artikel yang dicari berdasar kategori menu pada blog.
untuk lebih jelas lihat gambar ini :

( klik gmbr untuk memperbesar )

coba perhatikan tulisan dalam kolom merah,itulah yang disebut breadcrumb,google sendiri lebih suka dengan blog yang dilengkapi breadcrumb,sehingga terindex lebih cepat,jadi bagi kalian yang belum memasangnya di blog ,silahkan ikuti petunjuk pemasangan breadcrumb di blog ini :

Cara pemasangan :

1. log in blog terlebih dahulu

2. masuk ke bagian rancangan > template > edit html

( centang tulisan expand widget templates)

3. Letakan kode dibawah ini sebelum kode: ]]></b:skin>

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

3. Copy kode dibawah ini,tepat diatas kode <b:include data=’top’ name=’status
message’/> :

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

kadang terdapat 2 buah kode diatas,agar kalian tidak bingung copy saja semua..

4. Copy kode berikut tepat diatas kode <b:includable id=’main’ var=’top> :

<b:includable var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == "static_page"'></p>
<div><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<p><b:else/><b:if cond='data:blog.pageType == "item"'><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'></p>
<div 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>
<p><b:else/></p>
<div><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
<p></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == "archive"'></p>
<div><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span></div>
<p><b:else/><b:if cond='data:blog.pageType == "index"'></p>
<div><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>
<p></b:if></b:if></b:if></b:if></b:if></b:includable>

5. Simpan template

6. Selesai

tambah bagus kan tampilan blog kalian ??
jika artikel ini bermanfaat,silahkan tinggalkan komentar..

adatopik
July 12, 2013 at 4:16 pm

Terimakasih untuk tutorial cara memasang breadcrumnya, dengan cara ini semoga cepat terindex google. Terimakasih ya…

Harum MF
July 13, 2013 at 2:19 am

@adatopik
sama-sama^^
semangat trus gan,semoga blognya makin sukses

Yusuf Ismail
October 14, 2013 at 5:51 pm

request cara pasang smiley/emoticon tepat di atas kotak komentar seperti di blog agan ini dong 😀
thanks before..

Harum MF
October 15, 2013 at 2:09 pm

@Yusuf Ismail
ok,sy tampung dulu requestnya

TM Johan
February 3, 2015 at 3:37 am

Salam sejahtera bos Mansion Community

Harum MF
February 5, 2015 at 3:12 am

@TM Johan
ok,terima kasih kunjungannya..

Media2give

Blog Seputar Informasi Unik Dan Menarik

Cara Memasang Breadcrumb Pada Blog

Related Posts:

Recent Posts

6 Comments

Leave a Reply Cancel reply