Membuat Menu Breadcrumb Sebagai Navigasi Posting

Membuat Menu Breadcrumb Sebagai Navigasi Posting - Breadcrumb merupakan sebuah menu navigasi yang berisi link halaman utama, label dan judul post yang sedang dikunjungi, pada dasarnya elemen-elemen ini sudah ada pada template blogger kita hanya copy ulang scriptnya untuk bisa dijadikan navigasi posting (breadcrumb) dalam satu elemen supaya mudah dalam modifikasi desain tampilan breadcrumb.

Seberapa penting penggunaan breadcrumb pada web atau blog? menurut saya seperti pada judul hanya sebagai sebuah menu navigasi halaman pada sebuah halaman posting, tapi yang pasti dengan adanya sebuah breadcrumb pada web/blog akan mempermudah pengunjung dalam mengetahui dan mempermudah dalam menavigasi label.

Ada beberapa peryataan breadcrumb terindex oleh search engine yang hasilnya menampilkan label pada search engine, dalam hal ini saya belum mengetahui apakah secara SEO lebih baik untuk sebuah mesin pencari atau tidak, karena pada kenyataanya sebuah label post kalau dilihat dari segi keyword belum terindex oleh mesin pencari.

Memasang Menu Navigasi Breadcrumbs

Letakan HTML berikut diatas <a expr:name='data:post.id'/>, untuk menemukan kode <a expr:name='data:post.id'/> pada menu edit template blogger jangan lupa melakukan ceklist pada Expand Widget Templates. Biasanya <a expr:name='data:post.id'/> pada template ada 2 atau 3, jika pada kode pertama tidak tampil coba kode yang ke-2 atau ke-3.

HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div id='breadcrumbs'> 
        <a expr:href='data:blog.homepageUrl'>Beranda</a> &#8811;
        <b:if cond='data:post.labels'> 
            <b:loop values='data:post.labels' var='label'> 
                <a expr:href='data:label.url' rel='tag'> 
                    <data:label.name/> 
                </a> 
                <b:if cond='data:label.isLast != &quot;true&quot;'> &#8811; </b:if> 
            </b:loop> 
        </b:if> &#8811; <data:post.title/>  
    </div> 
</b:if>

Pada script diatas sudah ditambahkan Tag Kondisional hanya untuk menampilkan menu navigasi breadcrumb pada halaman posting saja.

Selanjutnya letakan CSS-nya dibawah <b:skin><![CDATA[ atau diatas ]]></b:skin>

CSS

#breadcrumbs{
  padding:5px;
  font:normal 15px Arial, Helvetica, sans-serif;
  line-height:1.4em;
  border-top:1px solid #000;
  border-bottom:5px double #000;
}

Pemisahan peletakan antara CSS dan HTML dimaksudkan untuk mempermudah jika kita ingin melakukan modifikasi tampilan breadcrumb dikemudian hari. Berhubung css diatas tidak begitu rumit dalam penulisannya, kita bisa menggabungkan semua script (css dan html) menjadi seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div style='padding:5px;font:normal 15px Arial, Helvetica, sans-serif;line-height:1.4em;border-top:1px solid #000;border-bottom:5px double #000;'> 
        <a expr:href='data:blog.homepageUrl'>Beranda</a> &#8811;
        <b:if cond='data:post.labels'> 
            <b:loop values='data:post.labels' var='label'> 
                <a expr:href='data:label.url' rel='tag'> 
                    <data:label.name/> 
                </a> 
                <b:if cond='data:label.isLast != &quot;true&quot;'> &#8811; </b:if> 
            </b:loop> 
        </b:if> &#8811; <data:post.title/>  
    </div> 
</b:if>

dan cara meletakannya pun sama seperti diatas.


Untuk menhasilkan breadcrumb dengan tampilan yang lebih baik, kita bisa memodifikasinya pada bagian CSS-nya.