New Apps

Kode Related Post with Thumbnail Image Summary

Cra Memasang Kode Related Post with Thumbnail Image & Summary (Posting Terkait denga Gambar Thumbnail dan Ringkasan) di Bawah Posting Blog. SEO Friendly & Fast Loading. Keren pula!

Demonya? Ada di bawah posting ini: Related Posts.


KODE JAVASCRIPT
Di atas kode </head>

<script type=text/javascript>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";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 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisK5BXX4EnuTTk1CI7v2wd0PyNGW68AqXFBDxlojudqkM7QwfhIEERjf0rNW4i8i_BAUbcc1SbpfXT4TCOm5ZAIQS3OSQ_4k5tswuNjdG85UJ87lVTS3sm30nnt1qzV6qC-ZD3_8nYF_K9/d/noimagethumb.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(var 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 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++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

KODE CSS:
Di atas kode ]]></b:skin> atau </style>

#related_posts{margin-top:15px}
#related_posts h4 {color:#FD4646;margin: 0px 0px 5px;font-size: 130%;font-family: &#39;Oswald&#39;,Arial;font-weight: 500;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:left;font-weight:400;text-transform:none;color:#333;font-size:12px;line-height:16px}
#related_img img{float:left;margin-right:7px;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}

KODE HTML/XML:
Posisi Related Posts. Di bawah <data:post.body/> atau di atas <div class=post-footer> atau di mana saja antara kode <b:includable id=post var=post/> dan <b:includable id=mobile-post var=post/>

<b:if cond=data:blog.pageType == &quot;item&quot;>
      <div id=related_posts>
        <h4>Related Posts:</h4>
        <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=related_img>
          <script type=text/javascript>relatpost();</script>
        </ul>
      </div>
</b:if>

Anda bisa membuat sendiri Kode Related Post with Thumbnail Image & Summary ini di sumbernya: DTE.*

Available link for download