Cara Memasang Related Post Di Tengah Postingan Blog

Cara Memasang Related Post Di Tengah Postingan Blog - Hei sobat blogger, memasang related post di tengah artikel atau postingan merupakan salah satu cara untuk menarik minat pengunjung agar mau berlama-lama di blog sobat.

Kenapa bisa seperti itu dan apa hubungannya?

Karena related post atau bisa juga disebut artikel terkait ini akan menampilkan link yang akan menuju ke halaman lain yang memiliki topik serupa dengan artikel yang sedang dibaca oleh pengunjung tersebut.

Tentu saja related post akan memiliki peran penting atau berfungsi secara maksimal apabila sobat blogger memiliki dan membuat konten yang berkualitas sehingga pengunjung semakin penasaran dan tertarik untuk membuka halaman-halaman lain. Nah itulah manfaat related post.

Seperti halnya penempatan iklan adsense yang membutuhkan posisi yang strategis, related post juga seperti itu.

Letak paling strategis dalam memasang related post adalah di posisi dimana pembaca akan melihat elemen tersebut, seperti halnya di tengah artikel atau di akhir artikel. Tetapi untuk kali ini ShareKu akan membahas peletakan artikel terkait di tengah postingan/artikel.

Sebelum mulai memasang related post sebaiknya sobat backup template dahulu untuk menghindari apabila terjadi kesalahan dalam peletakan script yang akan mengakibatkan error.

Apabila masih bingung cara backup dan restore template, sobat bisa baca juga pada artikel saya sebelumnya tentang  Cara Backup Template Dan Mengembalikannya Pada Blog Dengan Mudah.

Cara pasang Related Post di tengah postingan

Style 1:

Seperti biasanya, langkah yang harus kamu lakukan adalah:
1. Login ke Blogger
2. Klik Theme/Tema terus Edit HTML
3. Cari kode </head> (gunakan CTRL+F untuk mempermudah pencarian)
4. Copy kode dibawah ini, kemudian paste diatas kode </head> tersebut

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style type="text/css">
/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>

<script type="text/javascript">
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=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];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;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]=relatedTitles[i];}}
relatedTitles=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((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('
<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>
');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>
');document.write();};
//]]>
</script>
</b:if>

5. Cari kode seperti dibawah ini atau yang mirip karena setiap template berbeda-beda

<b:if cond="data:blog.pageType == &quot;item&quot;">
<data:post .body=""></data:post></b:if>

Catatan: untuk lebih mudahnya cari kode <data:post.body/> dan lihat yang mirip seperti diatas biasanya ada di bagian yang kedua atau seperti gambar contoh dibawah ini

6. Ganti kode tersebut diatas (pada cara nomor 5) dengan kode dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<!-- Related posts tengah -->
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Related Post</h4>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <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> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
<!-- Related posts tengah end -->
</div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Catatan:
- Tulisan Related Post warna merah bisa sobat ganti dengan Baca Juga atau Artikel Terkait atau terserah keinginan sobat.
- Untuk angka [3] [0] [0] merupakan letak related post, semakin tinggi nilainya maka akan semakin kebawah posisi dari related post tersebut

7. Klik Simpan

Style 2

Untuk gaya tampilan yang lain, sobat bisa menggunakan script berikut ini:

1. Letakkan kode berikut ini diatas kode ]]></b:skin>

/* Related Posts Tengah Artikel */
.RelatedMiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}
.RelatedMiddle .judul {color:#10a74f; font-size:120%; font-weight:600; text-transform:uppercase}
.RelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
.RelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
.RelatedMiddle ul li:first-child {padding-top:0px; !important;}
.RelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
.RelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;}

2. Letakkan kode berikut ini tepat dibawah kode <data:post.body/>. Biasanya ada banyak kode, cari yang kedua atau seterusnya, karena setiap template berbeda letaknya.

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    // Related Posts Tengah Artikel
    var jumlah = 4;
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('c a=["\e\d\s\Q\f\C","\d\s\f\h\W","\B\d\d\I","\V\f","\f\k\f\e\d","\e\k\s\S","\h\d\e","\r\e\f\d\h\s\r\f\d","\C\h\d\B","\h\r\s\I\F\U","\B\e\F\F\h","\m\O\e\l","\T\h\k\f\d","\m\e\k\l\m\r\K\C\h\d\B\P\w","\w\K\f\k\f\e\d\P\w","\w\l","\m\D\r\l\m\D\e\k\l","\m\D\O\e\l"];c g=x y();c v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]][b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|x79|removeRelatedDuplicates|false|while|||||||||break|BacaJuga|else|true|jumlah'.split('|'),0,{}));
  //]]></script>
  <div class='RelatedMiddle'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:view.isPost'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
        </b:if>
      </b:loop>
    </b:if>
    <span class='judul'><span>Baca Juga</span></span>
    <script> //<![CDATA[
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('L b=["\i\p\e\i\a\c\K\a\c\m\d\a\h\J\i\h\h\c\a","\p\a\d\S\c\a\s\a\e\d\j\v\r\R\c\m\j\j\t\m\s\a","\x\n\f\j\d\y\o\f\h\r\u\o\k\Q\u\x\n\f\j\d\y\o\f\h\r\u\n","\P\D\a\k\r\w\a\c\a\E\d\f\k\F\c\c","\c\a\e\p\d\G","\e\f\h\a\t\m\s\a","\C","\i\e\j\a\k\d\v\a\H\f\k\a","\n\m\k\a\e\d\t\f\h\a","\e\a\I\d\w\i\o\c\i\e\p"];O();(N(){A q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|function|BacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));
    //]]> </script>
  </div>
</b:if>

3. Simpan.

Itulah tips dari saya tentang cara memasang related post di tengah postingan pada blog. Dengan menempatkan related post di blog sobat maka diharapkan pageview semakin meningkat. Sekian dari ShareKu. Terima kasih.

Berbagi :

Anda mungkin menyukai postingan ini :

• 
  Cara Memasang Kotak Penelusuran Sitelink Di Blog
• 
  Related Post Grid Dengan Thumbnail Di Bawah Postingan
• 
  Cara Mudah Memasang Tombol Share Keren Di Blog
• 
  Cara Memperkecil Ukuran Gambar Untuk Mempercepat Blog