Header Ads

Cara Memasang Artikel Terkait di Blog

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 comments:

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

    ReplyDelete
  2. @Rosadtea Memang panjang kodenya.. Silakan dicoba gan..

    ReplyDelete
  3. om ada yang bentuknya scroll box ga? T^T

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

    ReplyDelete
  5. kang gimana cara buat scroll kaya di blog akang ini. tengkyu kang

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

    ReplyDelete
  7. cara mengatur banyak link artikelnya gmna

    ReplyDelete
  8. masih agak bingung nih kak , tolongin dong

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

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

    ReplyDelete
  10. Mas bro gimana ni cara mengatur jumlah linknya yang muncul ?

    ReplyDelete
  11. @Ramzi Ebaz Mohon maaf Mas Bro.. ane juga ngak paham mengenai masalah itu..

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.