Cara Membuat Artikel Terkait Blogger Ringan dengan Gambar

Related Post atau artikel terkait bisa juga tergolong sebuah widget merupakan sebuah cara untuk meningkatkan visitor sekaligus memperkecil Bounce Rate di blog, cara kerjanya ialah menampilkan artikel lainnya yang berkaitan dengan label postingan dan ditampilkan dengan acak secara otomatis. Yang tentunya ini juga akan berdampak baik untuk blog di mesin pencari, utamanya google. Biasanya artikel terkait bisa berada dibawah postingan atau otomatis di tengah postingan.

Bounce Rate artinya Rasio Pentalan, maksudnya pengunjung keluar dari blog tanpa melihat artikel menarik lainnya. Intinya setelah melihat satu artikel pengunjung melakukan pentalan atau keluar dari blog yang dibaca.

Sebelumnya telah membuat related post untuk AMP. Lalu ada yang request related post untuk blogger Non-AMP.

Cara Membuat Related post Blogger Bergambar

Related post ini scriptnya hampir sama seperti yang amp. Dan juga tidak menyebabkan render-blocking JavaScript (memblokir rendering di konten) dengan atribut async .

Semua feed label digabung menjadi satu karena script related post menggunakan atribut onload. Jadi reques langsung semua label. Walaupun respon servernya mungkin agak lama, tapi kan tidak ada masalah, karena related post pastinya terletak di bawah artikel. Jadi bisa tampil sebelum di lihat.

Pertama, tampilan artikel terkait ini simpel tidak terlalu keren, tampilan related post diatur dengan CSS berikut.

Active Select All

/*mankoin.com*/#related-post{text-align:left;line-height:1.3em;margin-top:30px}#related-post h4{position:relative;text-align:left;font-size:24px;color:#222;overflow:hidden}#related-post ul li .item-img{float:left;margin-right:10px;padding:0;border-radius:3px}#related-post li{margin:0;border-bottom:1px solid #dfdfdf;padding:10px 0;height:auto;display:inline-block;list-style-type:none}#related-post ul{padding:0;margin:0}#related-post ul li a{text-decoration:none;display:block;color:#15c;font-weight:500;line-height:1em}#related-post ul li:hover a.relinkjdulx{color:#ea4335}.relinkjdulx{font-size:17px;margin-bottom:5px}.item-img{float:right;padding-left:10px}@media only screen and (max-width:480px){.news-text{display:none}}

Related post untuk Non-AMP

Kedua, html dan script diletakkan setelah artikel atau atas komentar, yang penting jadinya menarik. Di sini ada dua versi; yang pertama bagi yang blognya tidak menggunakan AMP, gunakan kode berikut.

Active Select All

<div id='related-post'><h4>Artikel Terkait</h4>&lt;script async=&#39;async&#39; onload=&#39;related_posts()&#39; src=&#39;/feeds/posts/default?v=2&amp;q=<b:loop values='data:post.labels' var='label'>label:"<data:label.name/>"|</b:loop>&amp;alt=json&amp;callback=relatedposts&amp;max-results=100&#39;&gt;&lt;/script&gt;<ul id='related_posts'></ul><script>//<![CDATA[var rj=0,simg="w110-h80-c",mt=5,num=105,reltitle=new Array,relurls=new Array,relcuplikan=new Array,relimage=new Array,uri=document.URL,post=uri.substring(0,uri.indexOf(".html")+5);function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=(e=e.join("")).substring(0,l-1)}function relatedposts(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reltitle[rj]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[rj]=saringtags(postcontent,num),"media$thumbnail"in e&&(postimg=e.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?\//,"/"+simg+"/")),relimage[rj]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[rj]=e.link[n].href;break}rj++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function related_posts(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reltitle[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relimage[t]);reltitle=l,relurls=r,relcuplikan=e,relimage=n;for(t=0;t<reltitle.length;t++){var a=Math.floor((reltitle.length-1)*Math.random()),u=reltitle[t],i=relurls[t],s=relcuplikan[t],o=relimage[t];reltitle[t]=reltitle[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relimage[t]=relimage[a],reltitle[a]=u,relurls[a]=i,relcuplikan[a]=s,relimage[a]=o}for(var g,m=0,c=Math.floor((reltitle.length-1)*Math.random()),d=c,h=post;m<mt&&(relurls[c]==h||(g="<li><a href='"+relurls[c]+"' rel='nofollow' target='_blank' title='"+reltitle[c]+"'><img class='item-img' height='80' width='110' src='"+relimage[c]+"'></a><a class='relinkjdulx' href='"+relurls[c]+"' target='_blank'>"+reltitle[c]+"</a><span class='news-text'>"+relcuplikan[c]+"...</span></li>",document.getElementById("related_posts").innerHTML+=g,++m!=mt))&&(c<reltitle.length-1?c++:c=0,c!=d););}//]]></script></div>

Related post untuk AMP

Yang kedua untuk blog AMP. Jika menggunakan code yang bukan AMP 👆 gambar tidak di defer. Jika bertepatan blognya amp, gambar akan lebih baik jika menggunakan amp-img supaya bisa di defer, tentunya ini hanya digunakan untuk halaman dekstop.

Active Select All

<div id='related-post'><h4>Artikel Terkait</h4>&lt;script async=&#39;async&#39; onload=&#39;related_posts()&#39; src=&#39;/feeds/posts/default?v=2&amp;q=<b:loop values='data:post.labels' var='label'>label:"<data:label.name/>"|</b:loop>&amp;alt=json&amp;callback=relatedposts&amp;max-results=100&#39;&gt;&lt;/script&gt;<ul id='related_posts'></ul><script>//<![CDATA[var rj=0,simg="w110-h80-c",mt=5,num=105,reltitle=new Array,relurls=new Array,relcuplikan=new Array,relimage=new Array,uri=document.URL,post=uri.substring(0,uri.indexOf(".html")+5);function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=(e=e.join("")).substring(0,l-1)}function relatedposts(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reltitle[rj]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[rj]=saringtags(postcontent,num),"media$thumbnail"in e&&(postimg=e.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?\//,"/"+simg+"/")),relimage[rj]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[rj]=e.link[n].href;break}rj++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function related_posts(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reltitle[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relimage[t]);reltitle=l,relurls=r,relcuplikan=e,relimage=n;for(t=0;t<reltitle.length;t++){var a=Math.floor((reltitle.length-1)*Math.random()),u=reltitle[t],i=relurls[t],s=relcuplikan[t],o=relimage[t];reltitle[t]=reltitle[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relimage[t]=relimage[a],reltitle[a]=u,relurls[a]=i,relcuplikan[a]=s,relimage[a]=o}for(var g,m=0,c=Math.floor((reltitle.length-1)*Math.random()),d=c,h=post;m<mt&&(relurls[c]==h||(g="<li><a href='"+relurls[c]+"' rel='nofollow' target='_blank' title='"+reltitle[c]+"'><amp-img class='item-img' height='80' width='110' src='"+relimage[c]+"'></amp-img></a><a class='relinkjdulx' href='"+relurls[c]+"' target='_blank'>"+reltitle[c]+"</a><span class='news-text'>"+relcuplikan[c]+"...</span></li>",document.getElementById("related_posts").innerHTML+=g,++m!=mt))&&(c<reltitle.length-1?c++:c=0,c!=d););}//]]></script></div>

Cara Menggunakan: kode url w110-h80-c untuk mengatur ukuran gambar atau thumbnail, 5 untuk jumlah maksimum item related post yang ditampilkan, 105 untuk jumlah hurup pada deskripsi, dan Artikel Terkait bisa di ganti sesuai keinginan, seperti baca juga. Dan untuk kode 80 dan 110 adalah kode tinggi dan lebar gambar yang bisa disesuaikan dengan kode url w110-h80-c. Setelah menerapkan related post ini bisa di test apakah ada yang error atau tidak.

Kelebihan lain: Bagi blogger pemula pastinya artikel masih sedikit dan di item related post akan muncul item untuk halaman yang sedang dibaca, tapi item pada artikel terkait ini tidak muncul untuk halaman artikel yang sedang dibuka.

Update:

26-06-2018: Perbaikan error untuk label dengan dua kata.