Navigasi Breadcrumb Blogger Support Microdata

Apa itu Breadcrumb? Breadcrumb dalam bahasa indonesia artinya remah roti. Lantas apa hubungannya antara blog dan remah roti? Istilah Breadcrumb atau yang lebih populer dengan Breadcrumbs Trail bearasal dari dari legenda terkenal Hansel dan Gretel yang menebar remah-remah roti untuk memudahkan mereka dalam menemukan jalan pulang ketika tersesat di hutan.

Hansel and Gratel

Prinsip ini bisa diaplikasikan pada blog dengan cara memasang navigasi breadcrumb untuk memudahkan pengunjung dalam menemukan letak kategori atau label dari artikel yang sedang di baca.

Breadcrumb Navigation Blogger

Pada postingan sebelumnya saya telah berbagi tentang cara memasang navigasi breadcrumb pada blogger yang menggunakan markup RDFa (Resource Description Framework – in – attributes) yang berfungsi untuk menampilkan jejak breadcrumb pada hasil pencarian search engine khusunya Google. Selain menggunakan metode RDFa, kita bisa juga menggunakan metode Microformat, selengkapnya kunjungi Rich snippets - Breadcrumb. Adapun langkah-langkahnya tidak jauh berbeda dengan menggunakna metode RDFa. Berikut tutorialnya.

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.

Memodifikasi Kode Template

Masuk ke menu Edit HTML kemudian cari potongan kode yang dihighlight berikut:

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

Copy kemudian letakkan kode berikut 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' itemscope='itemscope' itemtype="http://data-vocabulary.org/Breadcrumb">
        <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a>
         <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast == "true"'>
           »
             <span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='ur'&        gt;<span itemprop='title'><data:label.name/></span></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.21 dan no.26).

tanda garis miring pada baris kode [6, 18, 22, 28, 30, 40, 48, 52] berfungsi sebagai separator atau pemisah antar title, Anda bisa menggantinya dengan separator yang lain.

Untuk memanggil kode breadcrumb, cari kode yang dihighlight berikut:

<!-- posts -->
         <div class='blog-posts hfeed'>
           <b:include data='top' name='status-message'/>
               <b:if cond='data:blog.pageType == &quot;index&quot;'>
                    <b:loop values='data:posts' var='post'>
                <b:include data='post' name='mobile-index-post'/>
           </b:loop>
         <b:else/>
     <b:loop values='data:posts' var='post'>
            <b:include data='post' name='mobile-post'/>
                 </b:loop>
          </b:if>
        </div>

Kemudian letakkan potongan kode berikut tepat di atasnya:

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

Sehingga susunan lengkapnya seperti berikut ini:

<!-- posts -->
         <div class='blog-posts hfeed'>
          <b:include data='posts' name='breadcrumb'/>
           <b:include data='top' name='status-message'/>
               <b:if cond='data:blog.pageType == &quot;index&quot;'>
                    <b:loop values='data:posts' var='post'>
                <b:include data='post' name='mobile-index-post'/>
           </b:loop>
         <b:else/>
     <b:loop values='data:posts' var='post'>
            <b:include data='post' name='mobile-post'/>
                 </b:loop>
          </b:if>
        </div>

Menyisipkan Kode CSS

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

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

—ς∞ς—

Tweet

Postingan terkait:

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