Selasa, 16 Oktober 2012

Cara membuat Artikel Terkait Berdasarkan Label


Artikel Terkait,related article,Artikel Terkait blogger, blogger related article,blogger.related,article,blog

Memasang fitur artikel terkait atau related article di blog akan memudahkan pengunjung blog kita dalam mencari informasi yang memiliki keterkaitan dengan postingan yang sedang mereka baca. Fitur artikel terkait yang sedang saya share kali ini, memiliki sedikit perbedaan dengan artikel terkait yang sebelumnya saya berikan. Berikut ini perbedaan di antara Artikel Terkait Berdasarkan Label dengan Artikel Terkait Dengan Scrolling Bar :

Artikel Terkait Berdasarkan Label
Artikel Terkait Dengan Scrolling Bar
1.       Menggunakan Bullet list
2.       Menampilkan satu Label saja
3.       Tidak menggunakan Scrolling Bar
4.       Menggunakan satu kode JavaScript
1.       Tidak menggunakan Bullet List
2.       Menampilkan label lebih dari Satu
3.       Menggunakan Scrolling Bar
4.       Menggunakan kode JavaScript + CSS

Cara buat artikel terkait berdasarkan label :
  • Login di blogger.com
  • Dari menu drop down, klik Template (Backup terlebih dahulu template sobat)
  • Klik Edit Template
  • Klik Proceed dan kasih tanda centang pada Expand Widget Template
  • Mamfaatkan CNTRL + F untuk mencari kode <data:post.body/>
  • Kalau sudah ketemu kode <data:post.body/> letakkan kode berikut tepat di bawahnya :
<!-- lenterablogger.blogspot.com Related Post javascripts start from here-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts :</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>
<!-- lenterablogger.blogspot.com Related Post javascripts End here-->
  • Terakhir, save template

Tambahan :
Kalau sobat blogger sudah memasang fitur Auto Readmore, kode tersebut harus diletakkan setelah kode Readmore.

0 komentar:

  © Blogger templates The Transformers by Blog Tips And Trick 2009