Cara Menciptakan Related Post Vertikal Dan Snippet Responsive

Baca Juga

Membahas related post kemarin aku juga sempat menciptakan artikel yang sama. Namun untuk related post kali ini berbeda yaitu menampilkan artikel secara vertikal atau kebawah. Related post ini juga aku gunakan pada template ini alasannya yaitu berdasarkan aku related post ini sangat fast loading. Related post ini sudah tidak absurd lagi di kalangan Blogger, dimana fungsi related post ini yaitu menampilkan artikel yang terkait dengan yang kita baca.

Baca Juga :

• Cara Membuat Related Post Seperti Matched Content Google Adsense

Jika anda membaca postingan aku sebelumnya, dimana disitu aku menjelaskan bahwa related post ini sangat user freandly. Yap!, alasannya yaitu memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama, jadi pengunjung sanggup membaca artikel selanjutnya dengan topik yang sama alasannya yaitu diakhir postingan related post ini muncul. Dengan memasang related post kemungkinan sanggup meningkatkan pageview blog anda meningkat.

Screenshoot :

Cara Membuat Related Post Vertikal dan Snippet Responsive

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema/Template.
3. Pilih Edit HTML.

Proses Pembuatan :

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

/* CSS Related Posts */ #related-post{background-color:#fff;margin:10px 0 0 0;padding:10px;border:1px solid #374760;border-radius:4px} #related-post 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} #related-post ul,#related_posts li{overflow:hidden;padding:0;margin:0;list-style:none} #related-post ul{margin-top:10px} #related-post li{float:left;width:100%;margin:0 0 5px} #related-post .img-post{background-color:#fff;float:left;margin:0 5px 0 0;padding:3px;border:1px solid #000;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px} #related-post strong{font-weight:bold;font-family:'Arimo';font-size:17px;line-height:1.1em;color:blue} .js-loading{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} .clear{clear:both} .clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}

3. Jika sudah Temukan lagi kode <data:post.body/> atau <div class='sharepost'>

Catatan : -

Untuk instruksi <data:post.body/> biasanya instruksi ini lebih dari satu, silakan anda pilih yang kedua atau yang ketiga jangan yang pertama. Untuk kode <div class='sharepost'> anda sanggup meletakannya di bawah instruksi tersebut, kalau di Template anda sudah tersedia Tombol Share silakan anda cari kodenya dan letakkan instruksi berikut ini sempurna dibawahnya.

<div style='clear: both;'/>  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-post'/> <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 POSTS :",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related-post"></div>');f.containerSelector="#related-post"}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("#related-post-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 Vertikal dan Snippet Responsive"\d",1):"")+'"><span class="img-post"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt=" Membahas related post kemarin aku juga sempat menciptakan artikel yang sama Cara Membuat Related Post Vertikal dan Snippet Responsive" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="Cara Membuat Related Post Vertikal dan 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!="#related-post"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related-post"></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="related-post-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: "#related-post", maxPosts: 6,loadingClass: "js-loading", rlt_thumb: 70 }); //]]> </script> <div class='clear'/> </b:if>

4. Simpan Template!

Demikian, bila anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Related Post Vertikal dan Snippet Responsive