3 Cara Membuat Artikel Terkait di Blog



Hallo sobat, kali ini saya akan share Cara Membuat Artikel Terkait/Related post di Blogger. seperti yang kita tahu, jenis script artikel terkait memang berbeda-beda ada yang daftar list biasa, ada yang menggunakan scroll dan ada pula yang menggunakan thumbnails. Oleh sebab itu, saya bermaksud merangkum ke-3 cara tersebut dalam satu posting. Oke, sekarang mari ikuti panduan saya ;

Masuk blogger > Rancangan(Template) > Edit Html > Centang Expand Template Widget
(Jangan lupa backup dulu caranya pilih "Download template lengkap")

1. Cara Membuat Artikel Terkait Biasa (Sederhana)


cari kode </head> (Gunakan Ctrl + F) kemudian letakkan script dibawah ini tepat di atas/sebelum kode</head>


<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>
Kemudian cari kode <data:post.body/></b:if> atau <data:post.body/> lalu letakkan script berikut ini di bawah kode <data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Terakhir simpan template sobat dengan begitu Cara Membuat Artikel Terkait Sederhana selesai.

2. Cara Membuat Artikel Terkait dengan Scroll
(contoh seperti yang dipakai oleh blog ini)

Cari kode <data:post.body/></b:if> atau <data:post.body/> lalu sama seperti cara diatas letakkan script berikut ini di bawah kode <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'> <br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
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;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

angka 9999 menunjukkan jumlah artikel terkait dalam satu label, bisa diganti sesuai yang sobat inginkan. Siipp Cara Membuat Artikel Terkait dengan Scroll Finish!

3. Cara Membuat Artikel Terkait dengan Thumbnails/Gambar (Linkwithin)

Yang membuat beda cara ketiga ini dari cara di atas adalah cara ini tidak menampilkan artikel terkait berdasarkan label melainkan random/acak semua posting dalam blog sobat.

Pertama-tama sobat daftar dulu di www.linkwithin.com




Email     :   Masukkan email
Blog Link     :  Link blog sobat lengkap dengan http://
Platform     :  Pilih Blogger
Width     :  Berapa jumlah artikel yang akan ditampilkan nanti

Pilih Get Widget dan dapatkan script-nya.

Next, cari kode </body> lalu letakkan kode script berikut di bawah atau sebelum kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

kode script yang sobat dapatkan di linkwithin.com

</b:if>
Sekian dan Terima Kasih

Subscribe to receive free email updates:

15 Responses to "3 Cara Membuat Artikel Terkait di Blog"

  1. Salam kenal gan, mampir di blog saya juga ya

    ReplyDelete
  2. makasih kk ilmu nya
    sekarang blog saya lumayan..
    hehehe...

    jangan lupa mampir juga ya kk

    ReplyDelete
  3. thanks buat tutornya gan,,udah berhasil ane pasang di blog
    klo boleh ane mau re-post tutornya,,nanti ane kasih sumbernya.

    ReplyDelete
  4. Apapun info yang dishare disini. saya cuma bisa bilang... GoogLuck...
    Sukses buat webnya :)


    Setiyono
    http://www.jayabhaya.com/2013/09/jayabhaya.html
    princsetiy@yahoo.com
    from : Yogyakarta Special Region

    ReplyDelete
  5. bisa menambah wawasan aku ni soalnya nggak tahu banyak soal blogspot dan script2nya
    nice

    ReplyDelete
  6. sudah dicoba mas yang nmr 2, makasih infonya :)

    ReplyDelete
  7. kereen tutornya mas
    mampir http://animebozs.blogspot.com/

    ReplyDelete
  8. bagus artikelnya :)
    jangan lupa mampir ke blog saya ya.
    http://north-atjeh.blogspot.com/

    ReplyDelete
  9. siip infonya bos, cocok untuk yg newbe seperti saya

    ReplyDelete
  10. salam kenal. mampir ke blog baru ini bos (newbie)

    ReplyDelete
  11. There is a lot of information here that can help any business get started with a successful. Perusahaan Indonesia

    ReplyDelete
  12. Thank you for the information you have provided, I was pleased to read the article in this blog. Visit also my blog ;
    Kata Kata Cinta
    Kata Kata Galau
    Kata Kata Bijak
    and many other interesting articles on my blog that.

    ReplyDelete
  13. terima kasih gan,dari blog agan udah memeberikan informasi yang sangat bermanfaat untuk saya,
    saya banyak belajar dan mendapat ilmu terbaru setelah melihat postingan yang ada di blog agan.
    saya tunggu postingan selanjutnya gan..

    ReplyDelete