Cara Membuat Related Post Thumbnail&Snippet Responsive

Related post adalah sebagai artikel atau postingan yang masih dalam satu kategori atau istilahnya artikel terkait. Related post tidak hanya menambah keren blog anda, tetapi juga membantu pageview bertambah. Related bisa disebut juga user freandly karena memudahkan pengunjung menemukan artikel yang terkait, ataupun artikel yang menarik lainnya di blogger anda. Related Post banyak dan berbagai macam bentuk, ada yang beserta dengan gambar, sejajar ke kana, hanya menampilkan judul saja dll. Related Post yang saya berikan ini berbentuk vertikal mengarah kebawah serta bergambar dan snippet dibawahnya.

Baca Juga :

Cara Membuat Related Post Yang Paling Simple, dan Aman!

Screenshoot :

Cara Membuat Related Post Thumbnail& Snippet Responsive

Cara Pertama :

1. Buka Blogger - Kemudian login
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* CSS Related Posts */
#maycyberrelated { background-color:#FFF; margin:10px 0 0 0; padding:10px;border:1px solid #ddd}
#maycyberrelated 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;}
#maycyberrelated ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#maycyberrelated ul { margin-top:10px }
#maycyberrelated li { float:left; width:100%; margin:0 0 5px}
#maycyberrelated .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 }
#maycyberrelated strong { font-weight:bold;font-family:'Arimo';font-size:15px; line-height:1.1em;color:#222 }
#maycyberrelated 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/AVvXsEirbWmYvmunAecUyprk_84ZlEI5_TdetQ1ZkDyKtHHaTQTQwCUyzvZlrHk9Khftouu_R0i5cmWauJbyaLwjx6zNpSrLLcLM9yrcwlDF4bt5h3o3i9VjrL7bCByZ0peLj9FHiqJp7zJ2pvB_/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;}

3. Jika sudah? Temukan lagi kode <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
4. Copy&Paste kode berikut ini, dan letakkan dibawah kode <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>

Wajib Baca : kode <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> biasanya lebih dari satu, silakan anda pilih yang pertama.

<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>

5. Terakhir, Temukan kode <data:post.body/>
6. Copy&Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

Wajib Baca :

Biasanya kode <data:post.body/> lebih dari satu, silakan anda pilih yang kedua/ketiga.
Jika bagian <data:post.body/> tidak bisa, atau tidak muncul widget related post. Anda bisa meletakkan kode diatas, tepat dibawah tombol share, atau dibawah about arthor, atau diatas next-previous.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='maycyberrelated'/>
<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/AVvXsEi2olsvTTxVixDDX0OXC1FTXx4FukpQ2ZXLbt_3LBC2wJDoZjc2HYAp8shBMYGjgZEEp5Sej6646bdC2SO24uHEQ8XYb9BN3mcCnutZAWkE6h48EiVlOf9lJEGQgG285WxyNu_QUJL7-4PH/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="maycyberrelated"></div>');f.containerSelector="#maycyberrelated"}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("#maycyberrelated-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!="#maycyberrelated"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="maycyberrelated"></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="maycyberrelated-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: "#maycyberrelated",
maxPosts: 6,loadingClass: "loadingxx",
rlt_thumb: 70
});
//]]>
</script>
<div class='clear'/>
</b:if>

7. Simpan Template.

Demikian Tutorial Blogger kali ini, Jika terjadi kesalahan silakan jangan sungkan untuk berkomentar pasti saya akan membantu anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing and Visited : Cara Membuat Related Post Thumbnail& Snippet Responsive.