Sabtu, 23 November 2013




Pada kesempatan kali ini saya akan memberikan trik tentang Cara Membuat Breadcrumb Navigation sebagai Pengganti Label.

Cara Membuat Breadcrumb Navigation sebagai Pengganti Label pada Blogspot :

  • Login pada Blogger
  • Masuk mode Rancangan, kemudian Edit HTML
  • Centang Expand Widget Templates
  • Klik Download Template Lengkap untuk mengbackup.
  • Cari kode ]]></b:skin>
  • Letakan kode berikut sebelum kode tadi
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3;
  • Selanjutnya cari kode
<b:include data=top name=status-message/>
  • Ganti kode tadi dengan kode berikut
<b:include data=top name=status-message/>
<b:include data=posts name=breadcrumb/>
  • Selanjutnya cari lagi kode
<b:includable id=main var=top>
  • Ganti kode tadi dengan kode Optimized HTML berikut

<b:includable id=breadcrumb var=posts> <b:if cond=data:blog.homepageUrl == data:blog.url> <!-- No breadcrumb on home page--> <b:else/> <b:if cond=data:blog.pageType == &quot;item&quot;> <p class=breadcrumbs> <span class=post-labels>Results found at &gt; <a expr:href=data:blog.homepageUrl rel=tag>Home</a> <b:loop values=data:posts var=post> <b:if cond=data:post.labels> <b:loop values=data:post.labels var=label>&gt; <a expr:href=data:label.url rel=tag><data:label.name/></a> <b:if cond=data:label.isLast == &quot;true&quot;>&gt; </b:if> </b:loop> <b:else/> &gt; </b:if> <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond=data:blog.pageType == &quot;archive&quot;> <!-- breadcrumb for the label archive and search pages - blogspot seo friendly breadcrumbs by http://www.uc1n.com--> --><p class=breadcrumbs> <span class=post-labels> <a expr:href=data:blog.homepageUrl>Home</a> &gt; Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond=data:blog.pageType == &quot;index&quot;> <p class=breadcrumbs> <span class=post-labels> <b:if cond=data:blog.pageName == &quot;&quot;> <a expr:href=data:blog.homepageUrl>Home</a> &gt; All posts <b:else/> <a expr:href=data:blog.homepageUrl>Home</a> Posts filed under &gt;<data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id=main var=top>
  • Jika sudah, Simpan
Tambahan :
Jika ingin judul posting di akhiri breadcrumb Anda memuat link seperti di blog ini, silahkan ganti kode
<span><data:post.title/></span>

Dengan kode berikut
<b:if cond=data:post.url> <a expr:href=data:post.url><span><data:post.title/></span></a></b:if>


Silahkan Simpan Template dan selesai
Demikian blogger tutorial mengenai Cara Membuat Breadcrumb Navigation sebagai Pengganti Label. 

Semoga bermanfaat dan semoga berhasil. 
Terima Kasih ^_^

0 komentar:

Posting Komentar

Subscribe to RSS Feed Follow me on Twitter!