Cara Memasang Artikel Terkait di tengah Postingan

Apasih gunanya artikel terkait ?
Artikel terkait adalah suatu artikel yang berhubungan dengan tags, kategori atau label yang bersangkutan.

Gunanya, Misalnya postingan kamu berlabel / kategori trik gratis maka artikel terkait yang ditampilkan adalah artikel yang berkategori trik gratis juga.

Cara Memasang Artikel Terkait di tengah Postingan

Bagi seorang blogger, memasang artikel terkait sesuai kategori label memang sangat membantu SEO blog itu sendiri.
Pengunjung dapat dengan mudah menemukan artikel menarik lainnya bahkan bisa jadi dia tertarik dan mengunjungi link tersebut.

Rata rata artikel terkait pada umumnya ditaruh di bawah postingan.
Seperti pada blog ini.

Lalu bagaimana jika kita menaruhnya diantara / ditengah postingan ?
Ya tinggal menambahkan sedikit javascript ke dalam template anda.
Hasilnya kurang lebih seperti ini :



Tertarik ?
Simak tutorialnya berikut ini

Cara memasang artikel terkait di tengah postingan

1. Memasang script peletak artikel terkait

Buka Blogger > Template > Klik tombol Edit HTML > Tambahkan kode script peletak artikel terkait di bawah ini sebelum tag </head>

script peletak artikel terkait :

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script type='text/javascript'> 
//<![CDATA[ 
var relatedSimply = new Array(); 
var relatedSimplyNum = 0; 
var relatedUrls = new Array(); 
function related_results_labels(json) { 
  for (var i = 0; i < json.feed.entry.length; i++) { 
    var entry = json.feed.entry[i]; 
    relatedSimply[relatedSimplyNum] = entry.title.$t; 
    for (var k = 0; k < entry.link.length; k++) { 
      if (entry.link[k].rel == 'alternate') {
      relatedUrls[relatedSimplyNum] = entry.link[k].href; 
      relatedSimplyNum++; 
      break;
      }
    }
  }
} 

function removeRelatedDuplicates() { 
  var tmp = new Array(0); 
  var tmp2 = new Array(0); 
  for(var i = 0; i < relatedUrls.length; i++) { 
    if(!contains(tmp, relatedUrls[i])) { 
      tmp.length += 1; 
      tmp[tmp.length - 1] = relatedUrls[i]; 
      tmp2.length += 1; 
      tmp2[tmp2.length - 1] = relatedSimply[i];
    }
  } 
relatedSimply = tmp2; relatedUrls = tmp;
} 

function contains(a, e) { 
for(var j = 0; j < a.length; j++) if (a[j]==e) return true; 
return false;
} 

function printRelatedLabels() { 
  var r = Math.floor((relatedSimply.length - 1) * Math.random()); 
  var i = 0; document.write('<ul>'); 
  while (i < relatedSimply.length && i < 20) { 
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); 
  if (r < relatedSimply.length - 1) { 
    r++; 
  } 
  else {
   r = 0;
  } 
  i++;
} 
document.write('</ul>');
} 
//]]> 
</script> 
</b:if>

2. menaruh script artikel terkait

Taruh script artikel terkait berikut ini dibawah <data:post.body/> pada tag kondisi halaman post.
Biasanya ada beberapa kode dan yang berfungsi pada tag kondisi halaman post biasanya pada kode yang kedua
Jika ada lebih dari 2 dan hasil akhir tidak muncul, coba ditaruh dibawah kode satu persatu sampai kode mana yg benar

Script artikel terkait :

<div expr:id='&quot;post1&quot; + data:post.id'/> 
<div class='related-simplify'> 
  <b:if cond='data:post.labels'> 
    <b:loop values='data:post.labels' var='label'> 
      <b:if cond='data:blog.pageType == &quot;item&quot;'> 
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/> 
      </b:if> 
    </b:loop> 
  </b:if> 
  <h4>Baca Juga</h4> 
  <script type='text/javascript'> 
  removeRelatedDuplicates(); 
  printRelatedLabels(); 
  </script> 
</div> 
<div expr:id='&quot;post2&quot; + data:post.id'>
  <p><data:post.body/></p>
</div> 
<script type='text/javascript'> 
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); 
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); 
var s=obj1.innerHTML; 
var t=s.substr(0,s.length/2); 
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); 
if(r&gt;0) {
  obj0.innerHTML=s.substr(0,r);
  obj1.innerHTML=s.substr(r+4);
} 
</script>

3. Menambahkan CSS

Untuk merapikan tampilannya, silahkan tambahkan css berikut ini.

Kode css :

/* Artikel terkait www.colongan.com */ 
.related-simplify {
position: relative;
padding:20px 12px 12px 12px;
margin:32px auto 24px auto;
width:93%;
border:4px double rgba(0,0,0,0.2)
} 
.related-simplify h4 {
background:#fff;
padding:8px 10px;
position:absolute;
margin:0;
font-size:17px;
font-weight:700;
color:#000;
top:-21px;
left:2.5%
} 
.related-simplify ul { 
margin:0;
padding:0
} 
.related-simplify ul li {
position:relative;
list-style:none;
padding:9px 0;
margin:auto;
line-height:1.4em;
transition:all .3s
} 
.related-simplify ul li:before {
content:'\f0c8';
font-family:fontawesome;
position:absolute;
margin:0 5px 0 2px;
color:rgba(0,0,0,0.5);
overflow:hidden;
font-size:60%;
left:10px;
transition:all .3s
} 
.related-simplify ul li:hover:before{
content:'\f0c8';
font-family:fontawesome;
color:#0383d9;
} 
.related-simplify a{
color:#000;
font-size:14px;
margin:0 0 0 30px;
} 
.related-simplify a:hover{
color:#0383d9;
} 
.related-simplify ul li:nth-child(n+4) {
display:none;
} 

Sesuaikan dengan selera dan kemampuan skill anda dalam mengolah css.

jika ada yang kurang jelas maupun bla bla bla... silahkan coret-coret di kolom komentar.

mungkin juga kamu tertarik untuk membaca ini :

Terima kasih, salam Colongan !

Bantu kami lebih baik lagi.
Apa Reaksi anda tentang blogger :
"Cara Memasang Artikel Terkait di tengah Postingan" ?