Membuat Menu Navigasi Breadcrumbs

Ahmad Fawzan Rohman Sabtu, Juli 28, 2012

Menu navigasi breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel. menu ini biasanya kita lihat pada wordpress yang urutannya mulai dari Home >> Category >> Sub Category, nah bagaimana dengan Blogger ? kita bisa menggunakannya hanya dengan edit template yang saya rasa ini cukup mudah, menu breadcrumbs ini di blogger urutannya Home >> Label/Category >> Judul Postingan ( pada halaman posting ) dan akan tampil disemua halaman kecuali halaman homepage, dan katanya nih ini juga berguna buat optimasi SEO yaitu membantu memberi kepadatan keyword dan pemetaan pada search engine terutama mbah google.

Bagaimana caranya ..?

Login dulu ke akun blogger anda, klik pada template dan edit HTML  centang expand widget kemudian carilah code ]]></b:skin> untuk memudahkan pencarian silahkan tekan CTRL F dulu dan masukkan code yang anda cari, udah ketemu kan ? silahkan anda copas kode dibawah ini tepat diatas kode ]]></b:skin>.

.breadcrumbs{
padding:5px 0px 5px 0;
margin:0;font-size:97%;
line-height:1.5em;
border-bottom:5px double #A4CBDF}

Kode yang berwarna merupakan garis bawah silahkan ubah warna sesuai keinginan anda. Kemudian cari kode <b:includable id='main' var='top'> kemudian copas kode ini dibawah kode <b:includable id='main' var='top'>

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

Tetap di kode  <b:includable id='main' var='top'> dan copas kode dibawah ini tepat diatasnya

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Simpan template anda dan monggo dilihat hasilnya. dan jika anda anda berhasil tinggal nunggu neh google indeks blog kita, so tampilannya pada search engine akan kayak gini ( silahkan search keyword pengertian pengajaran di mbah google ) breadcrumbs tampil di pencarian google

dan ini

dan yang ini belum terindeks oleh google