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 berdasarkan aku related post ini sangat fast loading. Related post ini sudah tidak ajaib lagi di kalangan Blogger, dimana fungsi related post ini ialah menampilkan artikel yang terkait dengan yang kita baca.
Baca Juga :
Jika anda membaca postingan aku sebelumnya, dimana disitu aku menjelaskan bahwa related post ini sangat user freandly. Yap!, alasannya memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama, jadi pengunjung sanggup membaca artikel selanjutnya dengan topik yang sama alasannya diakhir postingan related post ini muncul. Dengan memasang related post kemungkinan sanggup meningkatkan pageview blog anda meningkat.
Screenshoot :
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema/Template.
3. Pilih Edit HTML.
Proses Pembuatan :
1. Temukan isyarat ]]></b:skin> atau </style>
2. Copy & Paste isyarat berikut ini, dan letakkan diatas isyarat ]]></b:skin> atau </style>
Catatan : -
Untuk isyarat <data:post.body/> biasanya isyarat 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 isyarat tersebut, jikalau di Template anda sudah tersedia Tombol Share silakan anda cari kodenya dan letakkan isyarat berikut ini sempurna dibawahnya.
Baca Juga :
Jika anda membaca postingan aku sebelumnya, dimana disitu aku menjelaskan bahwa related post ini sangat user freandly. Yap!, alasannya memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama, jadi pengunjung sanggup membaca artikel selanjutnya dengan topik yang sama alasannya 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 isyarat ]]></b:skin> atau </style>
2. Copy & Paste isyarat berikut ini, dan letakkan diatas isyarat ]]></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/AVvXsEgcp7OX0Fj_zbuin7_uxKc2OVL5txuG_KEoxt44b1McusjEMKpy7ScByFuW5PEZnKDWB7AmJ9nAnxg5j-TuVFiZcl4lEyH3HnbCXIs2Bt7yVXfYZ3KKzophCj57UMumca6fQjfIB-EMf_T8/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}Catatan : -
Untuk isyarat <data:post.body/> biasanya isyarat 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 isyarat tersebut, jikalau di Template anda sudah tersedia Tombol Share silakan anda cari kodenya dan letakkan isyarat berikut ini sempurna dibawahnya.
<div style='clear: both;'/> <b:if cond='data:blog.pageType == "item"'> <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/AVvXsEht3KLcaXVyUge8Cc99PJxexlXN74BbEq22PEXsPQ6ECfuY3awdH1mCxVTdeMrUudVQ8njnJruRPFLLQh30uV8edW6bMj2vskkDZFen-8McEdApk59mMkn6Es3L1C315Dy0LlA0Y8snvVOo/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
Komentar