CARA MEMBUAT ARTIKEL TERKAIT THUMBNAIL RESPONSIVE

By snack1

Tuesday, April 18, 2017

Halo sobat blogger , masih dalam episode membuat related post atau artikel terkait tentunya, namun untuk kali ini admin akan share related post keren dan responsive ya? dari segui tampilannya memang keren ,cocok untuk blog responsive,seperti apakah tampilannya mari kita lihat cuplikannya berikut ini;

Cara Membuat Related Post Thumbnail& Snippet Responsive

1. Masuk di www.blogger.com mengunakan akun sobat.

2. Setelah masuk dasboard lihat menu bilah kiri pilih > theme > EDIT HTML

3. Setelah editor template terbuka sobat cari kode ]]></b:skin> atau </style> setelah kode tersebut sudah di temukan silahan sobat copy kode dibawah ini lalu taruh tepat 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:left; font-weight:bold;position:relative; background-color:rgb(44,83,158);}
#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/AVvXsEh4QHF8c1A81mkYEu0KgkSluyl4B6KnGHTS_8JYy3ayUD0-TgZhe8Zq6cpzfJC6-tFNpiPnOJ2-aDcJO7q1EHwhnJh0dcDX_w9YDLB4DbbK_0yxT5pRBI29UB7i4AgquaiWKCcu1eqpJUN5/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. Berikutnya cari kode yang persis seperti dibawah ini ( dalam template saya kode tersebut jumlah ada 2 , maka pilih yang pertama)

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'

Setelah kode diatas sudah sobat temukan silahkan copy kode dibawah ini lalu simpan dibawahnya kode nomor 3

<div id='virelated-posts-mobile'>
<h3>Artikel Terkait :</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>

4. Langkah yang ke empat ini sobat cari kode dibawah ini ;

<div class='post-footer-line post-footer-line-3'>---------</div>

Setelah sobat temukan silahkan copy kode dibawah ini dan pastekan dibawah kode nomor 4 setelah </div>

<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/AVvXsEjuj8M6xiZ5V67BtWmqprzlWfjkpaQjT-mQPmmiOXNn1XW4PBIMHiEcewPJFfpWG4mxuxhZLcLiZVU3T3-XLep0P06gUdVuws6k5BY-olT9X4kh7um2yxIgwjLqCVgBHtEtv1jK6utiZUIM/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>

5. Langkah terakhir simpan templat.

CAMILAN