Cara Membuat Menu Navigasi BreadCrumb Di blogger

Diposting oleh Luqman Saputra on Jumat, 06 Januari 2012

Sekarang Manz akan menshare tentang Menu Navigasi  Breadcrumb. Menu Navigasi Breadcrumb adalah kumpulan dari beberapa link yang memunkinkan untuk menumakan link artikel kalian atau disebut juga alamat link artikel pada blog kalian. Breadcrumb ini juga termasuk bagian SEO dan Mbah google pun sangat suka pada blog yang memakai Breadcrumb dan akhirnya blog kita jadi ramai pengunjung deh....
Contohnya seperti di atas blog Manz ini
Langkah Langkah :
1. Kamu harus login kedalam blog kamu atau blogger 
2. Terus kamu klik Rancangan >> Edit HTML >> dan jangan lupa contreng atau centang pada Expnad Template Widget
3. Kemudian kamu cari kode ]]></b:skin> , setelah kamu menemukan kode ]]></b:skin> Copy kode CSS dan Pastekan atau Letakan di atas kode ]]></b:skin> :

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

} 


4. kamu harus cari lagi kode  <b:include data='top' name='status-message'/>, Setelah kamu menemukan kode <b:include data='top' name='status-message'/> Copy kode Script di bawah ini dan pastekan atau letakan di bawah kode <b:include data='top' name='status-message'/> :

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

Kalo kamu sudah di pastekan kode akan bergabung seperti di bawah ini :
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/> 
<data:adStart/>
5.Cari kode <b:includable id='main' var='top'> stelah kamu menemuka kode <b:includable id='main' var='top'> Copy kode Script di bawah ini dan Pastekan kode Script di bawah ini tepat di atas kode <b:includable id='main' var='top'> :

<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 == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable> 


6. Jangan lupa Save Templatenya
.
 Catatan:
kalo kamu kesusahan mencari kode kode berikut saya anjurkan memakai CTRL + F

Selamat mencoba dan Semoga berhasil

{ 0 komentar... read them below or add one }

Posting Komentar