Navigasi Breadcrumb

Dengan menggunakan navigasi breadcrump pada blog biasanya akan muncul menu tambahan di bagian atas posting blog. Menu tersebut akan ditampilkan dengan format:

Browse >> Home >> [Nama Label] >> Judul Posting 

Berikut screenshotnya:

Atau lihat saja apa yang ada di atas judul postingan blog ini. Lalu, buat apa kegunaannya? Selain memudahkan navigasi, ada mitos bahwa navigasi breadcrump ini juga dipercaya memudahkan search engine untuk mengindeks posting blog anda lho. Bagaimana itu bisa terjadi? Mari kita pelajari sebentar, dan coba perhatikan tulisan yang ditampilkan. Bukankah tulisan tersebut yang lebih dulu tercrawl? Lihat juga tulisannya, sama dengan judul. Selain itu, navigasi ini membuat postingan bagian awal berserak keyword. Bukankah baik untuk teknik top serp google search? Memang, ini bukan satu-satunya cara yang bisa diandalkan di halaman pertama google, tapi ini pasti ada sedikit pengaruhnya untuk kebaikan blog anda, juga akan terlihat lebih rapi kelihatannya dengan baris susunan navigasi ini.  

Bagaimana? Mau ya pake navigasi breadcrumb yang imut ini.

Berikut langkah-langkah yang harus anda ikuti untuk membuatnya:
1. Seperti biasa masuk ke dalam kustomisasi blog lalu klik tab Design (Tata Letak) > Edit HTML.
2. Cari bagian ]]></b:skin>, kemudian tambahkan kode di bawah ini di atasnya:

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

3. Cari bagian <div class=’post hentry’> atau <div class=’post hentry uncustomized-post-template’>, kemudian tambahkan kode berikut di atasnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<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;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Note: untuk kata Browse dapat anda sesuaikan sendiri, contoh Anda berada di >> atau You are here >>.
4. Simpan template dan nikmati hasilnya. Selamat mencoba.

This work is protected by Copyscape and licensed under a Creative Commons Attribution - Non Commercial - Share Alike 3.0 Unported License. Articles cannot be reproduced without permission from the author. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page.