Memasang Related Post (Artikel Terkait) Pada Postingan Blog

Artikel Terkait atau Related Post adalah judul-judul postingan yang berkaitan dengan postingan/artikel yang sedang dibuka/dibaca. Artikel terkait yang akan saya bahas kali ini adalah artikel terkait yang akan muncul di akhir/dibawah sebuah postingan/artikel.

Langkah-langkah memasang Artikel Terkait di sebuah postingan adalah sebagai berikut:

1. Login ke akun blogger
2. Masuk ke Dasbor > Template > Edit HTML "centang Expand Widget untuk Template model lawas".
3. Cari kode <data:post.body/> atau tekan Ctrl+F pada keyboard agar mudah untuk menemukannya. Kode <data:post.body/> biasanya ada lebih dari 1, pilih saja kode yang kedua.
4. Jika sudah ketemu kodenya, "COPAS" kode berikut ini tepat dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='color:#FF0;font-style:bold;text-align:center;'>ARTIKEL TERKAIT</p>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #F00;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
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>
5. Langkah selanjutnya cari kode ]]></b:skin>
6. Kemudian "COPAS" kode berikut ini tepat diatas kode ]]></b:skin>
.rbbox{ border: 1px solid #FF0000; padding: 5px; background-color: #000000; -moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #000000;}
.rbbox ul li {
display : block;
no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #FF0000;}
7. Terakhir tinggal kita Simpan/Save

KETERANGAN KODE:

• ARTIKEL TERKAIT bisa diganti sesuai dengan yang kalian inginkan
• maxNumberOfPostsPerLabel = 50; adalah jumlah judul posting yang ingin ditampilkan pada artikel terkait tersebut. Ganti saja angka 50; jika ingin diganti jumlahnya
• maxNumberOfLabels = 3; adalah jumlah Label terkait yang ingin ditampilkan
• background-color: #000000; adalah warna kotak background, #000000 adalah kode warna hitam
• {background-color: #000000;} adalah warna background jika disorot oleh kursor, "kebetulan sama warnanya hitam". Silahkan saja ganti warna sesuai dengan yang kalian inginkan

CATATAN:
Jika langkah diatas sudah kalian coba dan ternyata Artikel Terkait tersebut tidak muncul pada postingan blog, mungkin ada yang salah langkahnya atau tidak cocok dengan Template blog kalian. Karena setiap Template blog berbeda-beda. Silahkan cari tutorial yang lain jika tidak berhasil. Saya juga demikian, beberapa kali sudah saya coba dan akhirnya cuma langkah ini yang cocok dengan Template blog saya.

Semoga Beermanfa'at

About Blogger

Related Post