Skip to main content

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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB