Membuat jQuery Breadcrumb di Blog

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

www.junioriqfar.com, Membuat jQuery Breadcrumb di Blog. Alhamdulillah saya telah kembali untuk mengupdate blog saya ini. Setelah kemaren mendapat pesan dari sobat blogger lainnya, untuk menanyakan bagaimana caranya membuat jQuery Breadcrumb yang saya punya. Dan sekarang saya akan membuat tutorialnya buat sobat blogger lainnya juga. Untuk itu silahkan ikuti tutorial saya langkah demi langkah.

Demo jQuery Breadcrumb di BlogKlik disini untuk melihat demo jQuery Breadcrumb di Blog

Memasang jQuery Breadcrumb di template blog

1. Masuk ke akun blogger sobat
2. Kemudian masuk ke Rancangan, Edit HTML
3. Centang Expand Template Widget
Expand Template Widget
4. Carilah kode ini (tekan CTRL + F)

]]></b:skin>

5. Salin kode CSS di bawah ini

.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://i766.photobucket.com/albums/xx310/Ikhfar/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://i766.photobucket.com/albums/xx310/Ikhfar/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://i766.photobucket.com/albums/xx310/Ikhfar/ChevronOverlay.png') no-repeat 100% 0;
  width: 13px;
  height: 20px;
}

6. Dan letakkan sebelum kode

]]></b:skin>

7. Carilah kode yang ini (tekan CTRL + F)

</head>

8. Salin javascript di bawah ini

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

9. Letakkan sebelum kode

</head>

10. Kemudian cari lagi kode ini (tekan CTRL + F)

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

11. Setelah ketemu, lalu salin kode ini

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

12. Letakkan di atas kode 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'>

13. Setelah selesai, kemudian sobat sisipkan kode ini pada nomor 12

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

14. Sehingga kode nomor 12 menjadi seperti 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'>

15. Simpan blog sobat
16. Silahkan cek blog sobat, apakah sudah berhasil apa belum

Mengatur jQuery Breadcrumb di blog

1. Lihatlah kode nomor 5, kemudian baris 31. Maka akan terlihat kode ini

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

2. Yang bisa sobat ganti dari CSS breadcrumb adalah
• Lebar dari jQuery breadcrumb ini

width: 508px;

• Warna garis untuk jQuery breadcrumb ini

border: solid 1px #dedede;

• Warna latar belakang dari jQuery breadcrumb ini

background: #fff;

Bila sobat kesulitan untuk menemukan kode warna, silahkan sobat membaca artikel saya tentang Kode HTML Warna.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait