Related Post Blogger, Daftar Skrip Yang Aman Untuk Blog Anda

Related posts blogger widget merupakan fitur penting yang sebaiknya ada di blog anda. Dengan fitur ini pembaca anda akan mendapatkan informasi bahwa anda tidak asal-asalan membuat artikel yang dibaca oleh pengunjung.

Dengan memberikan fitur related posts di setiap postingan yang anda terbitkan maka blog anda akan memiliki pageview yang cukup tinggi. Selain itu, anda bisa mengukur bagaimana interaksi pengunjung di setiap artikel yang anda terbitkan. Jika anda memberikan artikel yang terkait satu sama lain tentu pengunjung akan betah berlama-lama di blog anda.

Kedua hal tersebut akan memberikan sinyal kepada mesin pencari bahwa blog anda memiliki otoritas yang tinggi untuk topik dengan kata kunci yang diketikkan oleh pengunjung di mesin pencari.

Oleh karena itu hampir setiap template blogger yang saya temukan di internet memberikan fitur related posts. Posisi umum related post blogger widget berada dibawah laman artikel yang sedang dikunjungi oleh seorang pengunjung.

baca: Cara Membuat Template Blog Sendiri Online (Sebuah Studi Kasus)

Posisi fitur related posts yang dapat anda lihat di beberapa blog lain adalah ditengah-tengah artikel atau berada di antara beberapa paragraf yang sedang dibaca oleh pengunjung.

Jika anda menggunakan template bawaan blogger maka anda harus melakukan modifikasi atau memberikan tambahan kode related post blogger widget sendiri. Sebaliknya jika anda menggunakan template blogger yang sudah dimodifikasi maka anda tidak perlu lagi repot-repot melakukan modifikasi.

Tapi bagaimana jika fitur related posts widget blogger menampilkan artikel orang lain? Tentu anda sebagai blogger akan merasa heran dan juga was-was. Heran karena muncul artikel yang sama sekali tidak anda kenali di dalam blog anda dan was-was pengunjung anda akan pergi dan tak kembali.
Kasus diatas saya temukan pada skrip related posts dari template blogger yang bernama simini v.2. Dari kode Jquery yang diberikan (dan dengan pemahaman saya yang minim terhadap bahasa pemograman ini) saya menemukan akar permasalahan dari kasus related posts widget yang tidak menampilkan artikel di blog yang menggunakan template simini.

Blogger pengguna template simini v.2 tersebut kini telah mengganti template karena kasus related posts yang saya sampaikan tadi, jika blogger tadi mau belajar html saya kira ia bisa menggunakan template tersebut dengan mengubah skrip related posts blogger widget yang bermasalah.

Dengan mengetahui hal-hal teknis yang menjadi dasar blog di blogspot/blogger maka anda dapat menganalisa

  • apa skrip related posts blogger widget yang digunakan dan 
  • bagaimana cara memodifikasi skrip yang bersangkutan 
  • bagaimana jika mengganti skrip yang sudah ada dengan skrip lain yang lebih aman
Setelah itu anda tinggal mencari skrip related post blogger widget yang aman. 

Related Posts Blogger Widget versi Helplogger

Blog helplogger.com dalam artikelnya berjudul How To Add Related Posts Widget To Blogger with Thumbnails memberikan panduan untuk membuat widget related post untuk platform blogger. Fitur related post tersebut akan mempunyai format judul artikel, dan gambar.

Cara mengaplikasikan kode related post dari helplogger ini sebagai berikut:

  1. copas kode berikut ini
  2. <!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; } #related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;} </style> <script type='text/javascript'> //<![CDATA[ var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)} //]]> </script> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

  3. Kode diatas harus diletakkan di atas tag penutup </head>
  4. Temukan kode <div class="post-footer">. Setelah menemukan kode post-footer anda tempelkan kode berikut ini. 
    <!-- Related Posts with Thumbnails Code Start--><b:if cond="data:blog.pageType == &quot;item&quot;">
    <div id="related-posts">
    <b:loop values="data:post.labels" var="label">
    <b:if cond="data:label.isLast != &quot;true&quot;">
    </b:if>
    <script expr:src="&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;" type="text/javascript"></b:loop>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </b:loop></div>
    <div class="clear">
    <div style="float: right; font-size: 9px; margin: 5px;">
    <a href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" style="font-size: 9px; text-decoration: none;">Related Posts Widget</a></div>

    </div>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->
  5. Langkah terakhir adalah menyimpan perubahan yang telah anda lakukan di template.

Tips: Jika anda memperhatikan dengan seksama kode related post dari helplogger.com akan menyematkan kode link back ke situs yang bersangkutan. Nah seperti yang saya sebutkan di artikel sebelumnya tentang related post, anda dapat menghapus kode tersebut dari blog anda.

Sejauh pemahaman saya yang masih cetek tentang template blogger jika anda menghapus kode link back yang ternyata nyantol di kode related post, tidak akan mempengaruhi performa widget related post tersebut.

Related Posts Blogger Widget versi Linkwithin

Jika anda tidak masalah dengan memberikan backlink untuk pembuat skrip related posts dan anda merasa agak susah dengan melakukan modifikasi dengan edit html, anda dapat menggunakan layanan dari related posts dari situs link within.
Yang harus anda lakukan hanya
  1. menuju situs link within
  2. mengisi form (seperti gambar dibawah) 
  3. klik tombol get widget
  4. memberikan alamat rss blog anda
  5. menambahkan widget related posts blogger di akun blog yang anda miliki
skrip related posts blogger widget linkwithin

baca: cara pindah (migrasi) hosting dari blogger.com ke wordpress selfhosting

Catatan: Jika anda menggunakan link within untuk membuat widget related post, pastinya anda akan kesulitan untuk menghapus link back ke situs tersebut. Jadi mau gak mau anda harus memberikan link back ke situs yang bersangkutan.

Kesimpulan

Widget related post mempunyai manfaat yang sangat besar untuk sebuah blog. Dengan widget ini anda akan memberikan pengunjung blog artikel-artikel terkait yang terdapat di blog untuk disajikan kepada pengunjung blog anda.

Jika anda tidak mulai belajar JQuery atau Java Script dan membuat kode widget related post sendiri untuk blogger maka pilihan etisnya adalah memberikan link back ke situs yang bersangkutan.

Semoga dua daftar skrip related post yang aman untuk widget blogger anda ini bermanfaat.

Advertisements

Leave a Reply