Cara Membuat artikel terkait tampil di sidebar blog adalah lanjutannya saja dari postingan kemarin tentang Membuat artikel terkait atau related article[posts] dengan scroll kemarin. Sedang perbedaanya cuman letak artikel terkait itu saja, kalo yang kemarin letaknya di bawah postingan nah widget artikel terkait yang ini letaknya di samping, bisa kiri atau kanan, atau malah di atas postingan, tergantung sidebarnya ada dimana.

Sebagaimana yang tampil di blog cah cikrik ini yaitu pada widget yang tulisannya 'Mungkin Ini Yang Anda Cari'

atau secara gambar yang di paintkan awut2an adalah seperti ini



Nah, Lalu dan kemudian terus cara membuat artikel terkait atau related article atau related artikel atau related posts atau artikel yang berhubungan atau postingan terkait atau artikel yang bersempena minjem bahasanya Bang attayaya agar supaya bisa tampil disidebar adalah sbb : [;-)]

Caranya hampir mirip dengan artikel terkait dibawah postingan, yaitu :

login ke blogger.com, klik tata letak [rancangan], klik edit html, lalu centang kotakkan kecil expand widgetsnya, lalu cari kode </head>

lalu letakkan kode berikut, diletakkan diatas kode head tadi

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>


bila sudah cari kode lagi, kode yang ini

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

kalo udah ketemu, dihapus dan diganti dengan kode yang ini

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Bila sudah diganti, simpan Templet, lalu menuju kepenempatan gadget, mo ditempatkan dimanakah enaknya artikel terkait itu, jadi ya langsung kecara penempatannya. Ehm make gambar langsung saja dari pemilik script dan artikel ini yaitu Mas Doyok [Artikel terkait tampil di sidebar]. Dengan menambah gadget atau widgets anda.[lihat gambar menambah widgets]







dan masukkanlah kode script berikut ke widgets yang akan anda tempatkan tadi


<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

simpan atau tambahkan dan selesai.
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
Reaksi: 

Comments are closed.

Desing Downloaded From Free Blogger Templates | Free Website Templates | Free PSD Graphics
Related Posts Plugin for WordPress, Blogger...