Cara Menciptakan Related Post Material Design Di Blogger

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

Cara untuk memasangnya cukup bahagia :

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 usang anda dengan code di atas, dan cssnya juga.
Setelah final 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 aku wacana Cara Membuat Related Post Material Design di Blogger Harap posting ini sanggup membantu anda, Wasalam dari saya

Thanks,
O4U Team.
Sumber https://www.onet4u.com/

Bagikan Artikel ini