Membuat Related Post Di Bawah Postingan

Membuat Related Post Di Bawah Postingan

Salah satu sarana untuk menyarankan agar pengunjung membaca postingan kita yang lainnya yaitu dengan Membuat Related Post Di Bawah Postingan. Ada banyak macam related post atau artikel terkait baik yang beserta thumbnailnya maupun tidak dengan thumbnailnya. Namun khususnya saya lebih memilih related post yang tanpa thumbnail karena dengan related post seperti ini memuat cukup banyak related post, sehingga memberikan lebih banyak alternatif kepada pengunjung blog kita.

Untuk demo Membuat Related Post Di Bawah Postingan, silahkan Anda lihat di bagian bawah postingan ini. 

Cara Membuat Related Post Di Bawah Postingan silahkan simak langkah-langkahnya di bawah ini:

1. Login ke blog anda.
2. Masuk menu Layout >> Edit HTML >> Centang kotak 'Expand Widgets Template' >> Cari kode ini <data:post.body/> (gunakan CTRL + F di keyboard untuk memudahkan pencarian).
3. Letakkan script berikut ini di bawah kode <data:post.body/> tadi.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<h3>Baca Juga Artikel Terkait Lainnya:</h3>

<div style='overflow: auto;border: 1px #000000 solid; background-color:#414141; margin: 0px auto; padding: 5px; height: 200px;width: 98%;text-align: left;'>
<div class='widget-content'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

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

maxNumberOfPostsPerLabel = 20;
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;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>

</div>
</b:if><br/>

Anda bisa mengganti tulisan 'Baca Juga Artikel Terkait Lainnya' dengan kalimat lain misalnya 'posting terkait', 'artikel terkait', dll. 

#414141 untuk warna background kotaknya, silahkan sesuaikan dengan warna template Anda. Jika memerlukan kode warna silahkan pilih di sini.

20 menunjukan banyaknya jumlah postingan per lebelnya.

4. Simpan template. Selesai.

Demikian postingan Membuat Related Post Di Bawah Postingan kali ini mudah-mudahan bermanfaat.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments