Membuat Related Post atau Artikel Terkait dengan Gambar dan Snippet

Membuat Related Post atau Artikel Terkait dengan Gambar dan Snippet (Penggalan Postingan) - Artikel Terkait atau Related Posts merupakan sebuah widget atau aplikasi yang berfungsi menampilkan sejumlah judul artikel yang berkaitan dengan artikel yang sedang dibuka sesuai dengan label baik itu berbentuk link, thumbnail ataupun link saja dan biasanya terletak di bawah postingan blog. Sebelumnya kita pernah membahas bagaimana cara membuat artikel terkait pada konten yang berjudul Cara Membuat Artikel Terkait di Bawah Postingan Blog. Namun tampilan dari artikel terkait sebelumnya masih sangat sederhana, sederhana dalam artian hanya berupa judul berisi link artikel yang terkait dengan artikel yang sedang dibaca.
Nah pada kesempatan kali ini saya akan share sebuah tutorial sederhana mengenai bagaimana membuat widget artikel terkait atau related posts disertai masing-masing gambar dan snippet (penggalan postingan) dari artikel tersebut. Dengan begitu widget related post akan terlihat lebih mantap dan menarik minat pengunjung atau pembaca untuk meng-klik salah satu artikel yang terdapat didalam widget artikel terkait.
Untuk penampakkan artikel terkait disertai gambar dan snippet ini, anda bisa melihatnya pada gambar berikut. Disitu terlihat cuma ada satu postingan, karena jumlah artikel pada label tersebut hanya satu.

Berikut langkah-langkah pembuatan dan pemasangannya.

Cara Membuat Related Post atau Artikel Terkait dengan Gambar dan Snippet (Penggalan Postingan)

1. Pertama silahkan anda login ke akun blogger anda.
2. Pada dashboard atau menu blogger, silahkan pilih menu Tema atau Template.
3. Backup/cadangkan terlebih dahulu template lengkap anda, lalu close atau tutup.
4. Selanjutnya klik Edit HTML.
5. Temukan kode ]]></b:skin>, gunakan Ctrl+F untuk mempermudah pencarian.
6. Setelah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>.

CSS

/* CSS Related Posts */
#harmansh { background-color:#FFF; margin:10px 0 0 0; padding:10px;border:1px solid #ddd}
#harmansh h4 { color:#fff;font-family:'Arimo';font-size:18px; margin:-10px -10px 10px; padding:10px 3px; text-align:center; font-weight:bold;position:relative; background-color:#374760;}
#harmansh ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#harmansh ul { margin-top:10px }
#harmansh li { float:left; width:100%; margin:0 0 5px}
#harmansh .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#harmansh strong { font-weight:bold;font-family:'Arimo';font-size:15px; line-height:1.1em;color:#222 }
#harmansh p { margin:2px 0 0;font-family:'Arimo';font-size:15px;text-align:justify; }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSHcRKVqluU265cAbbwSAJpFVjqPnTbEeJNHowaqdP1Du2HDCn_P6dlIv_RXoNotucu62U18hhkJgSNEmAAFU0C1Zf_C-sRuAHJ5iGGs8G-5N2hGpwbZN_WwaGwmls9uyRx5ES4JjhrNF5/s1600/bs+loading+dot.gif) no-repeat center; display:block; text-indent:-9999px }
#virelated-posts {margin:20px 20px 20px 0;padding:0;}
ul#virelated-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;}
ul#virelated-summary li:last-child{border-bottom:none;}
ul#virelated-summary li img{display:none;}
ul#virelated-summary li a.relinkjdulx {display:block;font-size:14px;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0;}
#virelated-summary .news-text {display:block;padding:0;font-size:12px;margin-bottom:0;}

7. Jika sudah, cari kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> Gunakan Ctrl+F untuk mempermudah pencarian, biasanya kode ini terdapat lebih dari satu. Pilih kode urutan yang pertama.
8. Letakkan kode berikut ini tepat dibawah kode <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> yang pertama.

HTML

<div id='virelated-posts-mobile'>
                <h3>Related Posts :</h3>
                <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <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=related_results_labels&amp;amp;max-results=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
                </div>

9. Terakhir temukan kode <data:post.body/>.
10. Setelah ketemu, letakkan kode berikut ini tepat di bawah kode <data:post.body/>.

HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='harmansh'/>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:150,relatedTitle:"Related Posts",readMoretext:"Read More",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqf0D45GfpMg3sfpvGQkNx8jH4ArhuiKqBHz_D36Uu1ndYIgHM6OygYnylWLECiGnmnxOoRLZz5ZlisPZjXnPfCi7JZyy0GhVEP3aOusm9rBdDxZoo-ZOfPgc8nKqwfhXb1cjT-6O3so3/s1600/BS+No+Image+White.png",rlt_thumb:70,recentTitle:"Related Post",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="harmansh"></div>');f.containerSelector="#harmansh"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#harmansh-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#harmansh"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="harmansh"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="harmansh-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#harmansh",
maxPosts: 6,loadingClass: "loadingxx",
rlt_thumb: 70
});
//]]>
</script>
<div class='clear'/>
</b:if>

Catatan :

• Tulisan 6 warna merah adalah jumlah link judul yang akan ditampilkan, kalian bisa menggantinya dengan jumlah yang anda inginkan.
• Setiap template biasanya memiliki dua sampai empat buah kode <data:post.body/>.
• Silahkan anda mencoba meletakkan kode diatas, dimulai dari kode <data:post.body/> yang pertama sampai kode <data:post.body/> ke empat. Pada kode template blog saya terletak pada kode <data:post.body/> yang kedua.
• Jika kebetulan anda pernah memasang tombol like and share seperti yang pernahkan saya bagikan pada artikel yang berjudul Memasang Tombol Like Share di Bawah Postingan Blog, silahkan anda letakkan kode diatas tepat dibawah kode tombol like share yang pernah anda pasang dahulu.

11. Jika sudah berhasil dan muncul ditempat yang anda inginkan, silahkan anda klik Save Template atau Tema.

Demikian tutorial sederhana mengenai bagaimana cara membuat related posts atau artikel terkait disertai dengan gambar dan snippet (deskripsi). Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG