Cara Mudah Membuat Fitur Related Post



Cara Mudah Membuat Fitur Related Post. Google sangat menyukai sebuah blog yang user friendly, blog yang bisa membuat pengunjung menjadi nyaman ketika berselancar pada sebuah blog, pengunjung yang betah berlama-lama menyusuri sebuah blog.

Karena dengan begitu bisa dikatakan bahwa blog tersebut memiliki artikel yang sangat bermanfaat bagi pengunjungnya. Baca juga cara pasang anti copas di blog.

Nah, agar pengunjung yang mengunjungi blog kita tidak langsung kabur setelah membaca salah satu artikel yang ada, alangkah lebih baik menyediakan fitur artikel terkait yang memiliki hubungan atau topik pembahasan yang sama antara satu artikel dengan artikel lainnya.
Dengan memasang related post diblog diharapkan pengunjung akan mengunjungi artikel lainnya yang masih satu pembahasan dengan artikel yang sedang dibaca.

Umumnya template-template baru yang bisa didapatkan di google sudah menyertakan fitur related post. Silahkan baca juga cara cek skor SEO.

Fitur related post ini pada umumnya dipasang di bawah artikel, yang memiliki fungsi memudahkan navigasi dalam blog dan menyuguhkan artikel lain yang mungkin bisa menarik minat pengunjung untuk membacanya.

Jika kebetulan template yang dipakai belum memiliki fitur ini, tenang saja karena fitur ini bisa ditambahkan tanpa peru mengganti template. Lalu bagaimana cara membuatnya?

Langkah Mudah Membuat Fitur Related Post

Setelah mengerti apa yang dimaksud dengan fitur related post dan ingin membuatnya untuk blog atau ingin memodifikasi, maka bisa mengkuti langkah berikut ini :
  • Buka dan Login di akun Blogger.
  • Kemudian pilih menu Template / Edit HTML, kemudian copy dan pastekanlah kode CSS di bawah ini tepat diatas kode ]]></b:skin> :

.related{margin-bottom: 25px;text-align:left;margin-top:10px;float: left;}
.related ul {padding-top: 10px;
     margin: 0 0px;float: left;
     -webkit-padding-start: 0px;}
.related ul li{list-style-type: none!important;
     padding: 5px;
     margin: 0;height: auto;
     margin-bottom:5px;float: left;display: inline;}
span.news-text { font-size: 14px; line-height: 0px; color: #666; }
.related ul li a{display:block}
.related ul li img{float: left;
     width: 85px;
     margin-right: 10px;
     padding: 0px 0px 0px 0px;
     border: 1px #F1F1F1 solid;}
.related ul li a.terkait_title{ display: block;
     margin-bottom: 5px;
     background-image: none;
     text-decoration: none;
     color: #111;font-weight: 500;}
  • Cari kode </head> , kemudian copy dan pastekan kode berikut tepat diatasnya :

/*Related Post with Thumbnail & Summary 1.0 */
var relnojudul = 0; var numpost = 5;
var numchars = 100; var reljudul=new Array();
var relurls=new Array();
var relcuplikan=new Array();
var relgambar=new Array();
function saringtags(g,h){var e=g.split("<");for(var f='0;f<e.length;f++){if(e[f].indexOf("'>")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g='h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content"' in g){postcontent='g.content.$t}else{if("summary"' in g){postcontent='g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail"' in g){postimg='g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var' f='0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function' contains(a,e){for(var f='0;f<a.length;f++){if(a[f]==e){return' true}}return false}function artikelterkait(){var v='new' array(0);var w='new' array(0);var x='new' array(0);var a='new' array(0);for(var u='0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var' u='0;u<reljudul.length;u++){var' b='Math.floor((reljudul.length-1)*Math.random());var' i='reljudul[u];var' s='relurls[u];var' y='relcuplikan[u];var' c='relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var' r='0;var' d='Math.floor((reljudul.length-1)*Math.random());var' z='D;var' q;var t='document.URL;while(r<numpost){if(relurls[D]!=t){q="<li' class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'> <div class='overlayb'></div>
<img src='"+relgambar[D]+"'/></a>";q+="<a class='terkait_title' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+=" </li>
";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){d++}else{d='0}if(D==z){break}}};' //]]></script>
  • Langkah selanjutnya adalah cari kode <div class=’post-footer-line post-footer-line-1'>, kemudian copy dan pastekan kode ini tepat dibawahnya :

<div class='related'>
<h4>Artikel Terkait </h4> <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=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
<ul> <script type='text/javascript'>artikelterkait();</script> </ul> 
</b:if> </b:loop> </b:if> </div>
  • Simpan dan liat postingan artikel di blog. Dan tradaaa fitur artikel terkait sudah muncul.

Demikianlah cara mudah membuat fitur related post agar blog bisa tampil lebih maksimal dan profesional. Semoga bermanfaat.