Sabtu, 08 September 2012

Cara Memasang Breadcrumb di Blogspot

Cara Memasang Breadcrumb di Blogspot
Postingan tentang Cara Memasang Breadcrumb di Blogspot. Tapi sebelum melangkah ke cara pasangnya, saya berikan sedikit pengertian dari breadcrum.

Kalau secara visual, breadcrumb adalah tampilan seperti pada gambar dan yang saya lingkari tersebut.

Kalau pengertiannya breadcrumb adalah sebuah sebuah navigasi yang menyatakan keberadaan kita dalam blog tersebut. Misalnya pada gambar, breadcrum tersebut menyatakan kalau kita sedang membaca postingan yang berjudul Blogger Harus Kreatif yang terletak pada kategori SEO dari blog kawan SEO.

Saya rasa sudah cukup penjelasannya, sekarang saatnya cara memasangnya.

Langkah untuk Memasang Breadcrumb di Blogspot adalah sebagai berikut :
1. Yang pertama pasti masuk ke Blogspot terlebih dahulu.
2. Kemudian pilih Template -> Edit HTML
3. Cari kode <b:include data='top' name='status-message'/>
4. Setelah ketemu, letakkan kode berikut diatasnya kode pada langkah ketiga.
<b:include data='posts' name='breadcrumb'/>
5. Langkah selanjutnya adalah mencari kode <b:includable id='main' var='top'>
6. Letakkan kode berikut diatas kode pada pencarian langkah kelima
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
6. Langkah terakhir adalah klik SIMPAN dan lihat hasilnya.

Sekian dulu postingan tentang  Cara Memasang Breadcrumb di Blogspot kali ini. Semoga bermanfaat buat kawan-kawan semua.

Related Post



0 Responses to “Cara Memasang Breadcrumb di Blogspot”

Posting Komentar

Blogger yang baik selalu meninggalkan jejak.

All Rights Reserved KAWAN SEO | Blogger Template by Bloggermint