Cara Membuat Navigasi Breadcrumb Di Blogspot

Cara Membuat Navigasi Breadcrumb Di Blogspot

Breadcrumb adalah bantuan navigasi yang digunakan dalam user interface.Hal ini memberikan kemudahan kepada pengguna untuk melacak dan mengetahui di dokumen mana dia berada.Navigasi Breadcrumb ini Berada tepat di atas postingan kita dengan Urutanya seperti berikut
Home »Nama Label» Post.
Cara Membuat Navigasi Breadcrumb di Blogspot ini syaratnya adalah anda harus memberi Label di setiap potingan sobat.mudah bukan syaratnya.Breadcrumb juga bisa di katakan menambah kekuatan seo kita.jadi sangatlah sayang untuk di lewatkan.Sekarang Anda tahu apa yang di maksud breadcrumb mari kita masuk ke rincian Membuat Navigasi Breadcrumb Di Blogspot
1. Masuk ke Template > Edit HTML dan centang kotak Widget.
2. Cari Kode

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

Jika udah ketemu copy paste kode di bawah ini tepat di atasnya

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

3. Lanjut Cari Kode berikut

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

Jika sobat menemukan dua kode script yang sama maka pilh yang no dua dan paste kode berikut tepat di atasnya

<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 untuk halaman posting -> <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> berlabel </ span>» < span> <data:post.title/> </ span> </ div> </ B: if> </ B: loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <-! Breadcrumb untuk halaman arsip label dan halaman pencarian .. -> <div class='breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl'> Home </ a> </ span> »<span> Arsip untuk <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> Semua posting </ span> <b:else/> <span> <a expr:href='data:blog.homepageUrl'> Home </ a> </ span> »<span> Tulisan filed under <data:blog.pageName/> </ span> </ b: if>
</ div>
</ b: if>
</ b: if>
</ b: if>
</ b: if>
</ b: if>
</ b: includable>

4.Jika sobat ingin memodifikasi tampilan Breadcrumb di blogspot anda Tambahkan Css Untuk Breadcrumb cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

   ]]></b:skin>

Letakan Kode dibawah ini tepat di atasnya

. Breadcrumbs { 
padding: 5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size: 95%; 
line-height: 1.4em; 
border-bottom: 3px # e6e4e3 ganda; 
}

5. Simpan Templat Dan selesai. Semoga aja bermanfaat untuk sobat yang mungkin belum tahu Cara Membuat Navigasi Breadcrumb Di Blogspot .Salam Blogger Persahabatan.