Cara Mudah Membuat Fitur Related Post. Google sangat menyukai sebuah blog atau website yang ramah pengunjung atau user friendly. Blog dengan tatanan yang rapi dan enak dilihat akan dapat membuat betah pengunjung dalam menyelami artikel demi artikel.
Terlebih disaat sekarang ini dimana pengguna smartphone semakin meningkat setiap harinya dan mereka ini aktif berinternet dengan menggunakan smartphone-nya tersebut. Dengan demikian tampilan blog juga harus memperhatikan dari sisi mobile. Jika tampilan blog acak-acakan saat diakses melalui smartphone, tentu pengunjung akan segera menutup blog tersebut kan?
Lain hal nya jika blog sudah mendukung mobile friendly sehingga tampilan akan tetap menarik meskipun diakses melalui laptop, tablet maupun smartphone.
Related Post
Selain tampilan blog, konten blog juga sangat penting untuk diperhatikan. Blog dengan konten artikel yang unik dan bermanfaat akan dapat mengundang minat pengunjung untuk lebih berlama-lama berada di blog. Untuk lebih mempermudah pengunjung dalam menemukan artikel-artikel yang sesuai dengan yang diharapkannya, maka dalam blog sebaiknya terpasang fitur related post yang dapat menghubungkan satu artikel ke artikel lain yang masih berhubungan.
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. Baca juga cara pasang anti copas di blog.
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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-
script&callback=relpostimgcuplik&max-results=50"' 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.