Cara Membuat Related Post

Saat kita sudah banyak menulis tentang sebuah artikel dalam blog kita, biasanya kita juga ingin mempromosikan kembali artikel yang sudah lama kita buat tersebut agar mendapat kesempatan untuk dibaca oleh pengunjung. Bagaimana caranya melakukan hal itu?

 

Mudah, kita cukup menggunakan fasilitas related post untuk menampilkan artikel lama kita. Selain bersifat mempromosikan, hal ini juga akan memberikan akses lebih mudah kepada pembaca yang ingin mengetahui informasi yang berhubungan dengan informasi yang sedang dia baca dengan informasi lainnya lewat tampilan artikel yang berkaitan yang telah kita sajikan. So, menempatkan fitur artikel yang berkaitan di blog kita ini cukup memberikan manfaat bukan? Karena itu, yuk mari kita bahas bersama bagaimana cara membuat related post atau artikel yang berhubungan ini.

Pertama, tentu saja kita harus log ini dulu ke akun blogger kita.
Klik fitur rancangan.
Klik edit HTML.
Klik atau contreng expand template widget.
Masukan kode HTML di bawah ini tepat di bawah kode <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

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

maxNumberOfPostsPerLabel = 100;
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>
</b:if>

Klik simpan template. Sekarang artikel berkaitan di blog kita sudah jadi!

Keterangan :
  • Gunakan tombol Ctrl + F pada keyboard untuk mempermudah pencarian kode HTML yang diinginkan.
  • Sebelum melakukan edit HTML, harap download template kita sebelumnya sebagai backup untuk berjaga-jaga jika terjadi kegagalan saat proses edit terjadi.
  • Ganti tulisan related post dengan kalimat yang kita sukai.
  • Ganti angka var maxNumberOfPostsPerLabel = 4; untuk mengubah jumlah artikel berkaitan yang ingin ditampilkan.

Bagaimana? Cukup mudah bukan? Yuk dipraktikan!
Kalau ada yang ingin ditanyakan silakan komen di kotak komentar di bawah ini ya kawan..
Salam blogger!

8 komentar:

  1. brow, mau tanya dunk. mohon masukannya ya.

    saya baru belajar membuat blog. untuk menambahkan artikel dan entri sih ga masalah. tetapi saya menemukan masalah ketika menambahkan tab baru, misalnya; HOME, PROFILE, ABOUT US, dll.

    tab nya sudah jadi, tapi bagaimana cara mengisi datanya? misalkan saya ingin menambahkan tulisan keterangan di tab ABOUT US. saya tidak tau caranya. trims untuk ilmunya. salam. tarra.

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. Bro, setelah ane CTRL + F ternyata tulisan 'data:post.body' ada 3 di template blog ane.. itu bisa lebih detail lagi ga yg mana, takut salah nih.. sory ngrepotin..

    BalasHapus
  5. Barusan saya nyoba di 3 tempta tersebut dan tidak ada yang bisa T.T kira-kira penyebabnya apa ya??

    BalasHapus
  6. jika template blog kita sudah diberi read more, maka gunakan yang pertama. intinya gunakan satu saja, jangan ke-3nya diberi semua.

    BalasHapus
  7. iya mas saya nyoba di 3 tempat itu satu per satu bkn sekaligus, ternyata ga ada yg bisa nih..

    BalasHapus
  8. mungkin related post ini tidak kompatibel dengan templatenya. bagaimana kalau menggunakan link within sebagai widget related postnya?

    http://www.panduanbelajarblog.com/2011/04/membuat-related-post-dengan-linkwithin.html

    BalasHapus