Berikut cara dalam membuat Menu BreadCrumb jQuery pada blog.

kali ini saya akan mengajarkan anda para pembaca blog untuk bisa membuat menu breadcrumb 

Berikut cara dalam membuat Menu BreadCrumb jQuery pada blog.selamat mencoba

Tahap 1

Login ke Blogger Anda,
Masuk ke Template » Pilih Edit Template,
Pilih Edit HTML » Ceklist Expand Template Widget.

Tahap 2
Silahkan cari kode di bawah ini

]]></b:skin>

Tahap 3
Copy Paste kode di bawah ini, lalu letakan di atas kode pada tahap 3

.module:after{clear:both;content:".";display:block;height:0;visibility:hidden} * html .module{height:1%;overflow:visible} * + html .module{min-height:1%} .breadCrumbHolder{font-size:12px;line-height:21px;color:#444;font-family:Arial, Helvetica, sans-serif;font-style:normal;font-variant:normal;font-weight:400;margin:15px 0 5px} .breadCrumbHolder a{color:#0E82C7;font-size:inherit;font-weight:inherit;text-decoration:none} .breadCrumb{float:left;display:block;height:21px;overflow:hidden;width:508px;border:solid 1px #dedede;background:#fff;margin:0;padding:5px} .breadCrumb ul{height:21px;display:block;margin:0;padding:0} .breadCrumb ul li{display:block;float:left;position:relative;height:21px;overflow:hidden;line-height:21px;font-size:.9167em;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OE19eRfI/AAAAAAAAEeI/oQSb_A5WIGY/s800/Chevron.gif) no-repeat 100% 0;margin:0 6px 0 0;padding:0 10px 0 0} .breadCrumb ul li div.chevronOverlay{position:absolute;right:0;top:0;z-index:2} .breadCrumb ul li span{display:block;overflow:hidden} .breadCrumb ul li a{display:block;position:relative;height:21px;line-height:21px;overflow:hidden;float:left} .breadCrumb ul li.first a{height:16px!important;text-indent:-1000em;width:16px;margin-top:2px;overflow:hidden;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OFFVF1kI/AAAAAAAAEeQ/Dr3dADHxd6M/s800/IconHome.gif) no-repeat 0 0;padding:0} .breadCrumb ul li.first a:hover{background-position:0 -16px} .breadCrumb ul li.last{background:none;margin-right:0;padding-right:0} .chevronOverlay{display:none;background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/TH5OFOpTroI/AAAAAAAAEeM/GxOgEVpiMPY/s800/ChevronOverlay.png) no-repeat 100% 0;width:13px;height:20px}

Tahap 4
Silahkan cari kode di bawah ini

</head>

Tahap 5

Copy Paste kode di bawah ini, lalu letakan di atas kode pada tahap 5

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://plugins.jquery.com/files/jquery.easing.1.2.js.txt' type='text/javascript'/>
<script src='http://nurulimaminfo.googlecode.com/files/jquery.jBreadCrumb.1.1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery("#breadCrumb").jBreadCrumb();
});
//]]>
</script>

Tahap 6
Silahkan cari kode di bawah ini

<b:includable id='main' var='top'>
<div class='blog-posts hfeed'><b:include data='top' name='status-message'/><data:defaultAdStart/><b:loop values='data:posts' var='post'>

Tahap 7


Copy Paste kode di bawah ini, letakan di atas kode tahap 6

  <b:includable id='breadCrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadCrumb module' id='breadCrumb'> <ul> <li><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></li> <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"'> <li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li> </b:if> </b:loop> <li><data:post.title/></li> </b:if> </b:loop> </ul> </div> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <div class='breadCrumb module' id='breadCrumb'> <ul> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li> <li>Arsip untuk <data:blog.pageName/></li> </ul> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadCrumb module' id='breadCrumb'> <ul> <b:if cond='data:blog.pageName == ""'> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li> <li>Seluruh Artikel</li> <b:else/> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li> <li>Artikel Pada Kategori <data:blog.pageName/></li> </b:if> </ul> </div> </b:if> </b:if> </b:if> </b:if> </b:includable>

Tahap 8

Silahkan sisipkan kode di bawah ini pada tahap 7

<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>

Sehingga kodenya seperti di bawah ini

<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>

Tahap 9 

Pilih Simpan Template

Catatan :
Untuk menampilkan semua label pada BreadCrumb, silahkan cari kode di bawah ini

<b:if cond='data:label.isLast == &quot;true&quot;'><li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li></b:if>

Silahkan edit dan hilangkan sehingga seperti di bawah ini

<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>

Selesai.