Cara Memasang Breadcrumb dan Kolom penunjuk Diatas Postingan

=============

   Dalam dunia blogspere istilah breadcrumb tentunya sudah bukan hal yang baru lagi. para blogger profesional rata-rata banayak memakainya. karena breadcrumbs ini diyakini banyak berkontribusi dan membantu googlebot untuk mengenali struktur blog.

Nah...untuk blogger pemula mungkin istilah breadcrumbs jarang yang tahu, bahkan untuk menyebutnya sulit karena memang kurang mengenal istilah ini. sebagian pemula biasanya menyebut istilah breadcrumbs dengan sebutan label atau kolom penunjuk diatas posting, atau mungkin kolom 

penunjuk link dibawah menu navigasi.

lihat gambar diatas perhatikan tulisan Browse>>Home>>Tutorial>>Cara membuat email inilah yang disebut breadcrumbs. untuk selanjutnya TUTORIAL DAN CARA MEMBUAT BREADCRUMBS ATAU KOLOM PENUNJUK DIATAS POSTING bisa kita pelajari dengan tutorial dibawah ini:

1. Masuk ke akun blogger 
2. Pilih menu TEMPLATE
3. Simpan dulu Full Template saudara dengan mengklik tombol Cadangkan/Pulihkan
4. Klik tombol EDIT HTML
5. Buka semua kode template. Caranya, klik di sembarang tempat di dalam kode. Tekan CTRL+A, lalu tekan CTRL+C, lalu tekan DEL, dan terakhir paste dengan menekan CTRL+V.... Semua kode akan terbuka penuh....
6. Klik di antara kode HTML, lalu tekan CTRL+F untuk membuka kotak pencarian. Cari kode ]]></b:skin
7. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

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

Nah...jika sudah cari kode yang seperti dibawah ini

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

Hapus kode diatas dan ganti dengan kode berikut ini

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

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

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

Klik simpan perubahan, lalu klik lihat blog. lihat hasilnya nanti akan terlihat breadcrumbs seperti gambar diatas. demikianlah sedikit dari sekian banyak ilmu tentang blog yang bisa admin share, semoga bermanfaat dan selamat mencoba.

=============

Tweet

Subscribe to receive free email updates: