IKLAN BULAN INI

Saturday, 22 December 2012

Cara Membuat Artikel Terkait dibawah Postingan

Kawan masih ingat dengan Artikel Terkait Gaya BlogBego yang pernah saya posting sebelumnya, sekarangpun saya akan mencoba berbagi tentang Artikel Terkait :y; yang modelnya hampir sama  dan kawanpun bisa mencobanya untuk diterapkan pada Blog kawan  :x;

Untuk kawan blogger pemula yang tidak tahu apa itu Artikel Terkait, tidak ada salahnya saya akan berikan sedikit gambaran, yaitu kurang lebihnya seperti ini, adalah sekelompok artikel yang mempunyai label / katagori sama dengan postingan atau artikel tertentu :w; yang biasanya berada dibawah postingan, dan ada juga yang berada di sidebar Blog kita.

Untuk jelasnya mari kita bahas satu persatu cara pembuatannya dari yang Artikel Terkait biasa, pakai thumbnails / image dan yang ditaruh di sidebar. Sekarang yang akan saya bagikan dengan kawan Artikel Terkait yang berada dibawah postingan. :z;

Cara membuatnya sebagai berikut :
  • Masuk ke account Blogger dengan ID kawan.
  • Pada Dasbor pilih Template – Edit HTML - Lanjutkan
  • Beri tanda ceklist disamping Expand Template Widgets .
  • Cari kode :  <data:post.body/>
  • Jika sudah menggunakan read more / baca selengkapnya pada template kawan, maka akan terdapat 2 kode <data:post.body/> pakai yang pertama
  • Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama. 

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h2>Ingin membaca Artikel Terkait :</h2>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;
maxNumberOfPostsPerLabel = 7;
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>
  • Teks yang berwarna merah Ingin membaca Artikel lainnya dan angka 4, 7, 3 dan 10 silahkan kawan menyesuaikan.
  • Simpan  Template kawan.
  • Lihat hasilnya dengan jalan pilih salah satu postingan kawan, pada single post dibawah artikel / postingan kawan akan tampak seperti contoh berikut






Share This Post →


No comments:

Post a Comment