 |
| Contoh related post |
Didinelzie.my.id - Related Post pada website adalah daftar atau tautan artikel yang muncul di bawah atau di sekitar sebuah artikel atau postingan yang sedang dibaca oleh pengunjung. Tautan-tautan ini mengarah ke postingan lain yang memiliki relevansi atau kesamaan topik dengan artikel yang sedang dibaca. Tujuannya adalah untuk memberikan saran atau rekomendasi kepada pengunjung tentang konten lain yang mungkin menarik bagi mereka berdasarkan minat mereka pada artikel tersebut.
Fitur "Related Post" biasanya ditemukan di halaman detail postingan, di bawah artikel yang sedang dibaca. Widget atau daftar yang menampilkan postingan terkait ini dapat mencakup judul artikel dan kadang-kadang juga disertai dengan cuplikan atau gambar untuk menarik perhatian pembaca.
Manfaat menggunakan fitur "Related Post" di antaranya adalah untuk meningkatkan keterlibatan pembaca dengan konten lain di situs Anda, meningkatkan waktu kunjungan, dan mengurangi tingkat bouncing (pembaca yang meninggalkan situs setelah membaca satu halaman saja). Ini juga membantu mengarahkan pembaca ke konten lain di situs Anda yang mungkin belum mereka temukan sebelumnya, sehingga dapat meningkatkan page views (jumlah halaman yang dilihat) dan memperluas jangkauan konten Anda.
Fitur "Related Post" biasanya diatur secara otomatis berdasarkan label atau kategori yang terkait dengan artikel yang sedang dibaca. Meskipun demikian, di beberapa platform atau CMS (Content Management System), Anda juga dapat mengatur postingan terkait secara manual dengan menandai artikel tertentu sebagai terkait dengan postingan lainnya.
Secara keseluruhan, fitur "Related Post" adalah cara yang efektif untuk memberikan nilai tambah bagi pembaca dengan menampilkan konten yang relevan dan menarik, serta membantu mereka menavigasi lebih dalam ke dalam situs Anda.
Cara Membuat Widget Related Post Keren Dengan Gambar
- Login ke Blogger dan buka dasbor blog Anda.
- Di dasbor, Pilih Tema >> EDIT HTML
- Setelah masuk ke Edit HTML, cari kode </head> dengan cara tekan CTRL + F
- Setelah itu, pastekan kode berikut diatas </head>
<style>/* Related Posts */ #related-post {display:block; margin:20px 0px; line-height:1.5em;}#related-post h4{ font-size:17px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #related-post h4 span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #related-post h4:before{ content: ''; display: block; position: relative; top:15px; width: 100%; border-top: 2px solid #068488; }#related-summary .news-text {display:none;}ul#related-summary{margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;}ul#related-summary li{list-style:none; width:calc((100% / 3) - 15px); text-align:left; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important;}ul#related-summary li img{ overflow:hidden; line-height:0px; border-radius:4px; }ul#related-summary li:nth-of-type(3n){ margin-right:0px; } ul#related-summary li a{ display:block; }ul#related-summary li img{width:100%; height:117px; transition:all .3s ease; border:0px; margin:0px;}ul#related-summary li:hover img {transform:scale(1.1); filter: brightness(75%); -webkit-filter: brightness(75%);}ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none;margin-top:7px}ul#related-summary li a.relinkjdulx:hover{color:#066;}@media only screen and (max-width:480px){ul#related-summary li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; }ul#related-summary li a img{ height:85px;}ul#related-summary li:nth-of-type(3n){ margin-right:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }}</style><script type='text/javascript'>//<![CDATA[//Related Postvar relnojudul = 0;var relmaxtampil = 6;var numchars = 120;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="https://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<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};//]]></script>
5. Setelah meletakkan kode di atas, cari kode <data:post.body/> kemudian pastekan kode berikut ini di bawahnya.
<!-- Related Posts--><b:if cond='data:blog.pageType == "item"'><div id='related-post'><div class='relhead'><h4><span>Related Posts</span></h4><div class='clear'/><b:loop values='data:post.labels' var='label'><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50"' type='text/javascript'/></b:loop><ul id='related-summary'><script type='text/javascript'>artikelterkait();</script></ul></div></div><div class='clear'/></b:if><!-- Related Posts End-->
Apabila widget gambar thumbnail related postnya buram, silahkan pastekan kode berikut di atas kode </body>
<script type='text/javascript'>//<![CDATA[$(document).ready(function() {$('ul#related-summary li img').attr('src', function(i, src){return src.replace( 's72-c', 's640' );});});//]]></script>
Pastikan Anda menyimpan perubahan yang telah Anda buat pada tema blog Anda. Setelah itu, tinjau blog Anda untuk melihat widget "Related Post" keren dengan gambar yang muncul di halaman postingan Anda.
Sampai disini anda sudah berhasil membuat widget "related post" yang menarik.
Dalam keseluruhan, menggunakan widget "Related Post" adalah cara efektif untuk meningkatkan keterlibatan pembaca, meningkatkan navigasi situs, dan memberikan nilai tambah kepada pengguna yang mencari informasi lebih lanjut di situs Anda. Ini adalah salah satu metode yang umum digunakan oleh banyak situs web populer untuk mempertahankan dan menarik lebih banyak pengunjung.
Posting Komentar