Cara Memasang Menu BreadCrumb jQuery

Cara Memasang Menu BreadCrumb jQuery pada Blogger » Pada kesempatan kali ini saya akan membahasa tentang tutorial blogger mengenai cara memasang menu BreadCrumb jQuery pada blog. Nah tampilan kali ini akan semakin keren dengan efek slider/sliding. Hal ini memungkinkan untuk mempersingkat apabila link-link pada Menu BreadCrumb jQuery terlalu panjang. BreadCrumb jQuery ini memiliki efek slider memanjang dan memendek. Dan tampilan berbeda saat di Search Engine/Google, Maksudnya, artikel yang terindex di google akan memunculkan judul blog » label. Dengan BreadCrumb jQuery ini akan menghasilkan tampilan menu yang rapi dan indah serta unik.

Berikut contoh gambar Breadcrumb jQuery

Tampilan lebih menarik dan minimalis

Berikut cara dalam membuat Menu BreadCrumb jQuery pada blog.

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 == "true"'>
<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.

Sekian tutorial pada kesempatan kali ini mengenai Cara Memasang Menu BreadCrumb jQuery ini. Semoga artkel ini bermanfaat atau hanya sekedar info.

Terima kasih.

4.5

Blog Geisha

Cara Memasang Menu BreadCrumb jQuery

Related Post:

0 komentar:

Posting Komentar

Ads Best Android Games

Category

Arsip Blog