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.
Integrasi jQuery BreadCrumb pada Template Blogger
Langkah 1Login 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 6Cari 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'/>Langkah 8
<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>
Cari kode dibawah ini:
<b:includable id='main' var='top'>Langkah 9
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:
<b:includable id='breadCrumb' var='posts'>Langkah 10
<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>
Sisipkan kode dibawah ini pada kode langkah 8:
<div class='breadCrumbHolder module'>sehingga kode menjadi seperti dibawah ini:
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
<b:includable id='main' var='top'>Langkah 11
<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'>
Simpan template dan preview blog anda...
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; }
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 == "true"'>Sehingga yang tersisa hanya kode dibawah ini:
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
<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'>Selamat mencoba dan semoga berhasil. Happy Blogging :)
<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'>
<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 == "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>
Special thanks to CompareNetworks.com
