tempat berbagi informasi seputar dunia teknologi

Cara Membuat Breadcrumbs


Cara Membuat Breadcrumbs Breadcrumbs berfungsi sebagai petunjuk lokasi label sebuah artikel kepada pembaca halaman website atau blog. Pada bagian breadcrumbs kita bisa melihat kata kunci / label yang mengarahkan ke sebuah artikel yang sedang kita baca, informasi lokasi label seperti ini secara tidak langsung dapat membantu pembaca untuk mengetahui kata kunci dari sebuah artikel tersebut. Tentunya apabila sebuah halaman web atau blog memiliki tampilan informatif maka para pembaca juga akan memberikan respon positif bagi website kita. Langsung saja pembahasan mengenai "Cara Membuat Breadcrumbs" ada dibawah ini, JANGAN LUPA DAN INGAT SELALU UNTUK BACKUP TEMPLATE ANDA SEBELUM MEMBUAT PERUBAHAN PADA TEMPLATE.

Berikut langkah - langkah memasang breadcrumbs :
  1. Login pada halaman blogger 
  2. Pilih bagian Template
  3. Pilih Edit HTML
  4. Copy code dibagian bawah ini
Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah 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'/>

Setelah selesai copy paste code diatas, pilih save template dan coba refresh halaman website untuk melihat breadcrumbs pada halaman artikel. Sekian artikel tentang "Cara Membuat Breadcrumbs", semoga artikel ini dapat menambah wawasan pengetahuan kita seputar dunia website atau blog.
Terima Kasih.

No comments:

Post a Comment

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Marketplace Facebook Tempat Jual Beli Online Berbasis Sosial Media

Apabila anda adalah seorang pebisnis online di bidang perdagangan maka tempat jual beli online di Facebook ini wajib anda gunakan. Jumlah p...