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

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

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'/>
<divclass='breadCrumbHolder module'>
<b:includedata='posts' name='breadCrumb'/>
</div>
<divclass='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><aexpr: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

0 Comment:

Posting Komentar