Related Post Grid Responsive [Update]


Related Post Grid Responsive [Update] - Related post biasanya tampil tepat dibawah isi konten atau post dari suatu blog, fungsinya tentu kalian sudah pasti tau jadi saya tidak perlu menjelaskannya lagi bukan? Ok sebelumnya saya sudah share artikel tentang Cara Membuat Unlimited Page Navigation jika tertarik silahkan dibaca.

Ok kita mulai saja langsung cara pembuatan related post grid responsive kali ini

  • Pertama Buka Blogger > Template > Edit HTML, Cari CSS & Javascript Related Post kalian lalu HAPUS
  • Kedua Cari <b:includable id='post' var='post'> Jika masih ada related postnya di atas </article> Hapus, Kalau Sudah silahkan kalian Salin Script dibawah ini & tempel di atas </article> tadi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/* Related Post */
#related-post {margin:0;padding:0;}
#related-post h4{background:#444444;color:#FFF;border-bottom:1px solid rgba(0,0,0,0.14);border-top:1px solid rgba(0,0,0,0.14);padding:0;font-size:14px;margin:10px 0;padding-left:8px;line-height:15px;}
#related-post h4 span{padding:6px;display:inline-block;vertical-align:middle}
.news-text{display:none!important}
.relhead {background:#fff;font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:0;}
ul#related-summary {margin:0;padding:0px;}
ul#related-summary li{position:relative;float:left;list-style:none outside none;margin:6px;padding:0;overflow:hidden;height:145px;width:31.4%;}
ul#related-summary li img{background-color:#f1f1f1;width:100%;height:auto;max-width:100%;margin:0 auto;vertical-align:middle;}
ul#related-summary li a.relinkjdulx{color:#FFF;position:absolute;bottom:45px;left:0;right:0;padding:5px 0;text-align:center;font-size:12px;font-weight:700;z-index:99;background:rgba(0,0,0,0.5);}
ul#related-summary li a.relinkjdulx:hover{color:#000;}
.overlayb {position:relative;max-height:100px;overflow:hidden;}
.overlayb:before{content:&#39;&#39;;background-color:rgba(0,0,0,0.4);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:2;opacity:0;visibility:hidden;transition:all 0.4s linear}
.overlayb:after{content:&#39;\f0c1&#39;;font-family:fontawesome;font-size:1.3rem;color:rgba(255,255,255,.8);position:absolute;top:45%;left:45%;text-align:center;z-index:2;opacity:0;visibility:hidden;transition:all 0.20s linear}
.overlayb:hover:before,.overlayb:hover:after {opacity:1;visibility:visible;}
@media screen and (max-width: 640px){ul#related-summary li{width: 45%;height: auto;display:inline-block;}ul#related-summary li a.relinkjdulx{position:absolute;bottom:0;}}
</style>
<script type='text/javascript'>/*<![CDATA[*/function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgcuplik(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnojudul]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnojudul]=saringtags(postcontent,numchars),"media$thumbnail"in e?postimg=e.media$thumbnail.url:postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF",relgambar[relnojudul]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnojudul]=e.link[n].href;break}relnojudul++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function artikelterkait(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],i=relurls[t],o=relcuplikan[t],s=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=i,relcuplikan[a]=o,relgambar[a]=s}for(var g,m=0,d=Math.floor((reljudul.length-1)*Math.random()),c=d,h=document.URL;relmaxtampil>m&&(relurls[d]==h||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[d]+"' rel='nofollow' target='_top' title='"+reljudul[d]+"'><div class='overlayb'><img src='"+relgambar[d]+"' /></div></a>",g+="<div class='overlaytext'><a class='relinkjdulx' href='"+relurls[d]+"' target='_top'>"+reljudul[d]+"</a></div>",g+="<span class='news-text'>"+relcuplikan[d]+"</span>",g+="</li>",document.write(g),m++,m!=relmaxtampil))&&(d<reljudul.length-1?d++:d=0,d!=c););}var relnojudul=0,relmaxtampil=6,numchars=90,reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1 5(a,b,c){$(a).7(1(){$(0).4({\'3\':$(0).4(\'3\').6(\'/2\'+b+\'-c/\',\'/2\'+c+\'-c/\'),\'8\':c,\'9\':c})})}',13,13,'this|function|s|src|attr|resizeThumb|replace|each|width|height|||'.split('|'),0,{}))
$(document).ready(function() {$('ul#related-summary li img').attr('src', function(i, src) 
{return src.replace( 's72-c', 'w200-h115-c' );});});/*]]>*/</script>
<div id='related-post'>
<div class='relhead'>
<h4><span>Related Post</span></h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
</b:if>
Jika Tidak muncul, penyebabnya terlalu banyak Javascript di atas </head>
Kalau error lainnya silahkan kalian Pisahkan CSS dan Javascript diatas,
silahkan pindahkan CSS ke </style>, Sedangkan Javascript silahkan kalian pindahkan ke atas </head>.
Jika dirasa permasalahannya terlalu rumit silahkan contact saya difacebook.
Sampai jumpa pada tutorial berikutnya, Semoga Bermanfaat & Terima kasih.