Navigasi Breadcrumb Blogger Support RDFa

Navigasi Breadcrumb adalah deretan navigasi sederhana yang biasanya terletak di atas judul posting artikel yang sedang dibaca oleh pengunjung. Dengan adanya fitur ini, pengunjung dapat dengan mudah menemukan letak kategori atau label dari artikel yang sedang dibaca.

Breadcrumb Blogger

Kode navigasi breadcrumb pada artikel ini telah mendukung RDFa (Resource Description Framework – in – attributes) yang dapat membantu Anda untuk menampilkan jejak breadcrumb pada hasil pencarian Google.

Cara memasang navigasi breadcrumb pada blogger

 

Backup Template

Log in ke Blogger » Template » Cadangkan/Pulihkan » Unduh template lengkap

Tujuan dari membuat cadangan template sebelum langkah modifikasi adalah jika nanti terjadi error pada template, Anda cukup mengupload ulang kode template yang tadi telah didownlaod.

Menyisipkan Kode HTML

Masuk ke menu Edit HTML cari kode berikut ini

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

copy kode berikut kemudian letakkan tepat di atas 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"'>
<!-- 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' 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>Unlabelled</span>
»
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- 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 == "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>

kode navigasi breadcrumb di atas akan menampilkan label terakhir atau salah satu label dari postingan yang memiliki lebih dari satu label. Untuk menampilkan semua label pada navigasi breadcrumb, maka hapus dua baris kode yang dihighlight di atas (baris kode no.17 dan no.22).

Kode navigasi breadcrumb telah di pasang, sekarang kita tinggal menyisipkan potongan kode untuk mamanggil kodea navigasi breadcrumb tadi. Cari kode berikut:

<!-- posts -->
         <div class='blog-posts hfeed'>
              <b:include data='top' name='status-message'/>
        <data:defaultAdStart/>
   <b:loop values='data:posts' var='post'>

Letakkan kode potongan kode berikut tepat di atas kode <b:include data='top' name='status-message'/>

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

Sehingga hasilnya seperti berikut:

<!-- posts -->
         <div class='blog-posts hfeed'>
    <b:include data='posts' name='breadcrumb'/>
              <b:include data='top' name='status-message'/>
        <data:defaultAdStart/>
   <b:loop values='data:posts' var='post'>

Menyisipkan Kode CSS

Untuk menyesuaikan tampilan breadcrumb, Anda bisa melakukan beberapa kustomisasi dengan menambahkan selector .breadcrumbs pada baris kode CSS template. Cari kode berikut:

]]></b:skin>

Letakkan kode CSS berikut di atas kode ]]></b:skin>

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

Simpan Pengaturan Template

Simpan pengaturan template dan lihat hasilnya.

sumber: bloggerplugins.org

Tweet

Postingan terkait:

Ditulis EM — Tuesday 23 April 2013 — Add Comment — Blogger Hacks