Cara Menampilkan atau Membuat Breadcrumb

Tampilan sudah disesuaikan dengan tema blogspot landing page builder, jadi mungkin harus dirubah lagi style nya kalau dipakai di template lain. Ok, Langsung simak cara buat nya. 

1. Silakan masuk ke menu Tema > Edit HTML

2. Copy paste code berikut ini untuk menggantikan kode <b:includable id='main' var='top'>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<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' rel='tag'>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;'> &#187; </b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
3. Lalu letakkan kode css berikut ini di atas kode ]]></b:skin>
.breadcrumbs{padding:0;margin:0 0 15px;font-size:13px;font-weight:normal;border-radius:4px;line-height:1.3em;font-family:'Roboto', sans-serif;}

4. Simpan Tema dan selesai

Catatan:
Breadcrumbs ini hanya akan muncul di Postingan saja

Postingan Terkait

No comments:

Post a Comment

Formulir Kontak

Name

Email *

Message *