Related post yaitu 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 dapat disebut juga user freandly alasannya yaitu memudahkan pengunjung menemukan artikel yang terkait, ataupun artikel yang menarik lainnya di blogger anda. Related Post banyak dan aneka macam macam bentuk, ada yang beserta dengan gambar, sejajar ke kana, hanya menampilkan judul saja dll. Related Post yang aku berikan ini berbentuk vertikal mengarah kebawah serta bergambar dan snippet dibawahnya.
Baca Juga :
Screenshoot :
Baca Juga :
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 isyarat ]]></b:skin> atau </style>
2. Copy & Paste isyarat 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/AVvXsEjvlMAap8HcmI5GIvCOGxH1Fn2bQlO0t5SMvBDx3t0IQ5dW0GXdckmlaw2OB8LNgrs8lXRRHBvTtVY4dRf44z-w1Q6Ej6Elu2Ui2Jj42F8_Gp4pK_7M6N1wq20kWrW-9qLjMFkS_h0aysCx/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;}4. Copy&Paste isyarat berikut ini, dan letakkan dibawah isyarat <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 != "true"'/> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&amp;max-results=5"' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div>6. Copy&Paste isyarat berikut ini, dan letakkan dibawah isyarat <data:post.body/>
Wajib Baca :
Biasanya isyarat <data:post.body/> lebih dari satu, silakan anda pilih yang kedua/ketiga.
Jika bab <data:post.body/> tidak bisa, atau tidak muncul widget related post. Anda dapat meletakkan isyarat diatas, tepat dibawah tombol share, atau dibawah about arthor, atau diatas next-previous.
<b:if cond='data:blog.pageType == "item"'> <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/AVvXsEgzlyttREKL9G5tN14AA3hU9RAnCHZC-el3kycp4l3blCguqFBIcRwQsOGLUdS6KF-YNWj0MI8a8apECznN8XVG_7hHxljsnkr1OEDJZBtVFPraofj9B8mA_1rmrbqO7Ieuky7OwBf8vrIt/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="Cara Membuat Related Post Thumbnail&Snippet Responsive"\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt=" Related post yaitu sebagai artikel atau postingan yang masih dalam satu kategori atau is Cara Membuat Related Post Thumbnail&Snippet Responsive" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="Cara Membuat Related Post Thumbnail&Snippet Responsive" 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>Demikian Tutorial Blogger kali ini, Jika terjadi kesalahan silakan jangan sungkan untuk berkomentar niscaya aku akan membantu anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing and Visited : Cara Membuat Related Post Thumbnail& Snippet Responsive.
