Relate posts atau posting terkait adalah widget yang biasanya berada di bawah postingan. Widget ini berfungsi sebagai internal link dan navigasi menuju posting lainnya dalam blog.
Widget Related Post mempunyai peran penting dalam meningkatkan Pageviews terutama. Banyak sekali pilihan model widget related post, Mulaidari yang sederhana hingga menakjubkan. Salah satunya related post berupa judul tulisan yang disertai gambar thumbnail.
1. KODE CSS
Widget Related Post mempunyai peran penting dalam meningkatkan Pageviews terutama. Banyak sekali pilihan model widget related post, Mulaidari yang sederhana hingga menakjubkan. Salah satunya related post berupa judul tulisan yang disertai gambar thumbnail.
Cara Membuat Related Posts dengan Gambar yang Fast Loading
Pertama silahakan masuk pada edit html pada blogger kemudian Copas berikut ini di atas kode ]]></b:skin> atau </style>
/*Related Posts Widget with Image Thumbnail */
#related-posts h3{
border-bottom:4px solid #333333;
font-family:Oswald,arial,Georgia,serif;
font-size:18px;
padding-bottom: 5px;
text-transform: uppercase;}
#related-posts ul {margin-bottom: 20px; padding: 10px 0; }
#related-posts ul li{
float:left;
height:150px; margin:0 10px 10px 0;
width:180px; font-size: 15px;}
#related-posts img{padding:0 0;width:182px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts img:hover{opacity:0.7;}
#related-posts ul li:nth-child(3n+3){margin-right:0;}
#related-posts ul{margin:0;padding:0;list-style:none;}
/*Related Posts Widget with Image Thumbnail */
2. KOE HTML/JAVASCRIPT
/*Related Posts Widget with Image Thumbnail */
#related-posts h3{
border-bottom:4px solid #333333;
font-family:Oswald,arial,Georgia,serif;
font-size:18px;
padding-bottom: 5px;
text-transform: uppercase;}
#related-posts ul {margin-bottom: 20px; padding: 10px 0; }
#related-posts ul li{
float:left;
height:150px; margin:0 10px 10px 0;
width:180px; font-size: 15px;}
#related-posts img{padding:0 0;width:182px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts img:hover{opacity:0.7;}
#related-posts ul li:nth-child(3n+3){margin-right:0;}
#related-posts ul{margin:0;padding:0;list-style:none;}
/*Related Posts Widget with Image Thumbnail */
2. KOE HTML/JAVASCRIPT
Selanjutnya setelah css sudah ditempatkan silahkan Copas kode berikut ini di bawah kode <data:post.body/> atau di bawah kode
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="tb911hborder"><span>Related Posts</span></h3></br>';rn='<h3 class="tb911hborder"><span>No related article available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkpFGl-kJ3JpI2rZwPM5q2DIbxRQjxBbuVuahvAiuOpqehh9M9I0-7Q8uzaTSWa9v1Sc-tQYkN-sOL2JNhplAakMIjZVO_eqFR2dtf44nHozKoGQzkzMEjZSEwYhTM1RNxsPV692VXNQhw/s1600/BS+No+Image.gif '};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
3, Save Template!
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="tb911hborder"><span>Related Posts</span></h3></br>';rn='<h3 class="tb911hborder"><span>No related article available</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkpFGl-kJ3JpI2rZwPM5q2DIbxRQjxBbuVuahvAiuOpqehh9M9I0-7Q8uzaTSWa9v1Sc-tQYkN-sOL2JNhplAakMIjZVO_eqFR2dtf44nHozKoGQzkzMEjZSEwYhTM1RNxsPV692VXNQhw/s1600/BS+No+Image.gif '};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://theblogger911.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
3, Save Template!
Related Post Thumbnail Image Fast Loading How To
4/
5
By
Allysa
