09 April, 2014

Cara Membuat Breadcrumb Trail Pada Blog

Cara Membuat Breadcrumb - Breadcrumb Trail adalah navigasi menu untuk mempermudah pengunjung web/blog melacak/ mencari lokasi dalam dokumen dan juga dapat mempermudah pengunjung kembali ke menu utama. Breadcrumb biasanya terletak dibawah header.

Cara Membuat Breadcrumb Trail Pada Blog
Contoh Breadcrumb Trail Pada Blog
Apasi fungsi kita membuat Breadcrumb dalam web/blog kita?
  1. Menunjukan lokasi/path dari halaman web yang dikunjungi.
  2. menyediakan fitur one-clik acces kelevel halaman diatasnnya, dan menghindari pengunjung nyasar karena terlalu banyak menjelajahi blog kita.
Nah langsung saja nih saya kasih tahu caranya:
  • Menuju ke layout > edit HTML dan check box Expand Widget
  • Carilah kode ]]></b:skin> (untuk lebih cepat dalam mencarinya silahkan gunakan Ctrl + F)
  • Setalah ketemu silahkan letakan kode berikut 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;}

  • Kemudian cari lagi kode seperti dibawah
<b:includable id='main' var='top'>

  •  Setelah ketemu ganti kode diatas dengan kode dibawah:

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


  • Kemudian tinggal anda save
  • sekarang didalam blog anda sudah terpasang breadcrumb.
Demikian informasi saya dalam membuat breadcrumb semoga bermanfaat.

Cara Membuat Breadcrumb Trail Pada Blog Rating: 4.5 Diposkan Oleh: ris woto

0 comments: