Membuat jQuery BreadCrumb ~ Belajar Blog

Bismillah... Pada artikel sebelumnya Blogger TuneUp pernah membahas "Membuat Breadcrumbs - Navigasi Blogger". Sekarang kita akan memberikannya sentuhan efek jQuery yang dibantu plugin jQuery UI yang membuat BreadCrumb kali ini menjadi lebih indah dengan efek slidelong (slide memanjang) dan slideshort (slide memendek). Ketika link-link yang tampil pada breadcrumb terlalu panjang maka jQuery akan mengatur panjang total breadcrumb dengan memendekan beberapa link. Dan ketika kita mengarahkan pointer mouse pada salah satu link BreadCrumb maka jQuery akan menampilkan link tersebut. jQuery BreadCrumb ini akan membuat navigasi menjadi lebih rapi dan indah dari pada harus membuat BreadCrumb menjadi dua baris.

Demo jQuery BreadCrumb

Integrasi jQuery BreadCrumb pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:

.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}

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:

<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='URL_ANDA/jquery.jBreadCrumb.1.1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery("#breadCrumb").jBreadCrumb();
});
//]]>
</script>

Langkah 8
Cari kode dibawah 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'>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:

<b:includable id='breadCrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 == &quot;true&quot;'>
<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 == &quot;archive&quot;'>
<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 == &quot;index&quot;'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<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>

Langkah 10
Sisipkan kode dibawah ini pada kode langkah 8:

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

sehingga kode menjadi seperti dibawah 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'>

Langkah 11
Simpan template dan preview blog anda...

Source Code jQuery BreadCrumb

Keterangan:
Untuk mengatur BreadCrumb perhatikan kode dibawah ini (lihat langkah 5):

.breadCrumb{ float:left; display:block; height:21px; overflow:hidden; width:508px; border:solid 1px #dedede; background:#fff; margin:0; padding:5px; }

1. width:508px; ubah nilai 508 untuk mengatur lebar BreadCrumb
2. background:#fff; ubah nilai #fff untuk mengatur warna latar
3. border:solid 1px #dedede; ubah nilai #dedede untuk mengatur warna border

Update 16 September 2010

Untuk menampilkan semua kategori/label pada jQuery Breadcrumb, cari kode dibawah ini (lihat langkah 9 baris 11, 12 dan 13):
Buanglah kode pada baris 1 dan 3 (sisakan yang di blok):

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

Sehingga yang tersisa hanya kode dibawah ini:

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

Secara total kode yang digunakan seperti dibawah ini (sebagai pengganti kode pada langkah 9):

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

Selamat mencoba dan semoga berhasil. Happy Blogging :)
Special thanks to CompareNetworks.com

Belajar Blog

Saturday, September 4, 2010

Membuat jQuery BreadCrumb

Integrasi jQuery BreadCrumb pada Template Blogger

Update 16 September 2010

SITE SEARCH

Popular Posts

Category

Blog Archive