Cara Memasang Artikel Terkait di Blog
Artikel Terkait atau yang biasa disebut juga dengan Related Posts merupakan daftar link dari judul-judul artikel di blog kita dengan label yang sama dan biasanya berada di bawah postingan. Adanya widget artikel terkait ini dapat memudahkan pengunjung menjelajahi blog kita terutama untuk artikel yang berkaitan.

Tampilan dari widget artikel terkait ini dapat hanya berupa judul-judul artikel saja atau ada juga yang dengan gambar/thumbnail. Setiap blogger mempunyai selera dan alasan tertentu untuk menggunakan tipe widget yang dia pilih.

Untuk memasang widget artikel terkait seperti yang terpasang di blog ini, Anda bisa mengikuti langkah-langkah pemasangannya di bawah ini.

Masuk ke akun Blogger.
Klik Rancangan.
Klik Edit HTML.
Back-up template dulu untuk berjaga-jaga kalau nanti ada masalah dalam pengeditan.
Beri tanda centang pada Expand Template Widget.
Cari kode HTML seperti di bawah ini.

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

Copy kode HTML di bawah ini dan paste/letakkan tepat di bawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<div class='widget-content related-by-cat'>
<h3>Related Posts / Artikel Terkait :</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro' style='display:none;'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 50;
var maxNumberOfLabels = 40;

maxNumberOfPostsPerLabel = 40;
maxNumberOfLabels = 40;


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>

Klik tombol SIMPAN TEMPLATE.
Bila berhasil akan ada tampilan "Perubahan Anda telah disimpan" dan klik Lihat Blog untuk melihat hasilnya serta coba buka artikel Anda.

11 تعليقات

  1. Perasaan ini kode panjang amat, tapi saya coba dulu...

    ردحذف
  2. @Rosadtea Memang panjang kodenya.. Silakan dicoba gan..

    ردحذف
  3. om ada yang bentuknya scroll box ga? T^T

    ردحذف
  4. @GATRA Kalo mau nambahin scroll box, bisa diliat di sini http://klikmunadi.blogspot.com/2011/09/cara-memberi-scroll-box-pada-artikel.html

    ردحذف
  5. kang gimana cara buat scroll kaya di blog akang ini. tengkyu kang

    ردحذف
  6. @roy.ahmad Coba pelajari di sini gan, http://klikmunadi.blogspot.com/2011/07/cara-membuat-daftar-isi-per-label.html

    ردحذف
  7. cara mengatur banyak link artikelnya gmna

    ردحذف
  8. masih agak bingung nih kak , tolongin dong

    mampir ya http://ioannidis70.blogspot.com/

    ردحذف
  9. غير معرفيناير 03, 2012

    Ini beneran kayak di blog sobat ini kan..!
    kalau gitu secepatnya akan ane coba di "Blog Adexme".! thnks sobat atas inspirasinya..

    ردحذف
  10. Mas bro gimana ni cara mengatur jumlah linknya yang muncul ?

    ردحذف
  11. @Ramzi Ebaz Mohon maaf Mas Bro.. ane juga ngak paham mengenai masalah itu..

    ردحذف

إرسال تعليق

أحدث أقدم