Cara Membuat Related Post Material Design di Blogger

Kali ini saya akan kongsikan Cara Membuat Related Post Material Design di Blogger yang cukup ringan..
#free website templates
Cara yang saya kongsikan sama seperti yang saya gundakan di blog ini, anda boleh lihat demonya di dalam blog ini, ataupun gambar di bawa.

Cara Membuat Related Post Material Design di Blogger

Cara untuk memasangnya cukup senang :

Login ke blogger anda dan edit html template anda, Masukan code css berikut ke dalam css style anda

/* Related */
.related-line,.related-line-c{position:relative;margin:10px auto 0 auto}
.related-info-th{z-index:2;position:relative;margin-bottom:20px;color:#000;background:#fff;display:table;padding:5px 10px;margin:0 auto 10px auto;font-size:14px;text-align:center;border:2px solid #f44336}
.related-line-c{text-align:center;margin-bottom:6px}
.related-line:before,.related-line-c:before{z-index:1;content:"";width:100%;height:3px;background:#f44336;position:absolute;top:50%;left:0;margin-top:-1px}
#related_posts{overflow:hidden}
#related_posts h4{letter-spacing:0;line-height:20px;margin:0 0 5px;padding:10px;background:#ff6348;color:#fff}
#relpost_img_sum{margin:0;padding:0;line-height:16px; }
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none;margin:0;padding:0;}
#relpost_img_sum li{width:48%;float:left;margin:5px;padding:0;list-style:none; box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);}
#relpost_img_sum .news-title{display:block}
#relpost_img_sum .news-title a{display:block;font-size:13px;color:#222;padding:5px 10px 0 0}
#relpost_img_sum .news-title a:hover{color:#999}
#relpost_img_sum img{float:left;margin-right:5px;margin-top:-9px;margin-bottom:-4px;margin-left:-4px;padding:4px}
#relpost_img_sum .news-text,.nazren-comment-message p{display:none}
@media only screen and (max-width:768px){
.social{background:#fff;padding:0}
.social a span{display:none}
.social a.linne,.social a.bbbm{display:inline-block}
.social a{display:inline-block;padding-left:0;padding-right:0;padding:10px;white-space:nowrap;font-size:1rem;line-height:0;border-radius:5px;width:36px}
.social a i{padding-right:0}
.social a.whatsapp{display:inline-block}
.social a i{padding:0}
.social a.linne{padding:0;height:42px;overflow:hidden}
.social a.bbbm{padding:0}
#relpost_img_sum li{width:100%}}

Selanjutnya Simpan code di bawah Tepat di bawah code <div class='post-footer-line post-footer-line-3' atau di atas kode  </article>

 <!-- Related Posts Start-->
     <script type='text/javascript'>
            //<![CDATA[
            var relnum = 0;
            var relmaxposts = 6;
            var numchars = 50;
            var morelink = " ";
            var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;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=e.join("")).substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://2.bp.blogspot.com/-0bF5umofbmo/WsqN0eA3bxI/AAAAAAAAN0E/K-aOkz5i4LUUFwmFC5C3LKweX7_JQT69QCLcBGAs/s1600/noimage.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){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(t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow noopener' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),++m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}
            //]]>
         </script>
      <b:if cond='data:blog.pageType == &quot;item&quot;'> 
         <div id='related_posts'>
          <div class='related-line'>
<span class='related-info-th'>
  <b>More From Author</b>
         </span>
</div>
            <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;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/> 
               </b:loop> 
                    <ul id='relpost_img_sum'> 
                           <script type='text/javascript'>relatpost();
            </script> 
            </ul> 
        </div><br/><div style='border-top:1px solid #ccc; margin-bottom:5px;'/>
      </b:if>
      <!-- Related Posts End-->

Sekiranya anda tlah memasang code related post sebelumnya, gantikan cod releted lama anda dengan code di atas, dan cssnya juga.
Setelah selesai mamasang code di atas, simpan template anda dan lihat hasilnya.

Sekiranya ada penambahan ataupun pertanyaan, sila tinggalkan comment anda di dalam ruangan yang disediakan, Sampai disini sahaja posting saya tentang Cara Membuat Related Post Material Design di Blogger Harap posting ini dapat membantu anda, Wasalam dari saya

Thanks,
O4U Team.

Load Comments