Cara Membuat Related Post Vertikal dan Snippet Responsive

Membahas related post kemarin saya juga sempat membuat artikel yang sama. Namun untuk related post kali ini berbeda yaitu menampilkan artikel secara vertikal atau kebawah. Related post ini juga saya gunakan pada template ini karena menurut saya related post ini sangat fast loading. Related post ini sudah tidak asing lagi di kalangan Blogger, dimana fungsi related post ini adalah menampilkan artikel yang terkait dengan yang kita baca.

Baca Juga :

• Cara Membuat Related Post Seperti Matched Content Google Adsense

Jika anda membaca postingan saya sebelumnya, dimana disitu saya menjelaskan bahwa related post ini sangat user freandly. Yap!, karena memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama, jadi pengunjung dapat membaca artikel selanjutnya dengan topik yang sama karena diakhir postingan related post ini muncul. Dengan memasang related post kemungkinan dapat 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 kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></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/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}
.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 kode <data:post.body/> biasanya kode ini lebih dari satu, silakan anda pilih yang kedua atau yang ketiga jangan yang pertama. Untuk kode <div class='sharepost'> anda bisa meletakannya di bawah kode tersebut, jika di Template anda sudah tersedia Tombol Share silakan anda cari kodenya dan letakkan kode berikut ini tepat 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/AVvXsEi2olsvTTxVixDDX0OXC1FTXx4FukpQ2ZXLbt_3LBC2wJDoZjc2HYAp8shBMYGjgZEEp5Sej6646bdC2SO24uHEQ8XYb9BN3mcCnutZAWkE6h48EiVlOf9lJEGQgG285WxyNu_QUJL7-4PH/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="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="img-post"><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!="#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

Share this post

Related Post