Trick and tips: Related Post dengan Gambar Thumbnail untuk Blogger

Cara membuat Related Post (Posting/Tulisan/Artikel Terkait) dengan Thumbnail Image di bawah posting blog.

RELATED POSTS
adalah salah satu widget blog yang biasa ada di bawah setiap tulisan (posting). Fungsi artrikel terkait ini sebagai navigasi menu dan internal link untuk meningkatkan pageviews dan membuat pengunjung berlama-lama membuka blog kita.

Penampakan Related Posts with Thumbnail Image ini sebagai berikut.

Related Posts atau Posting Terkait model ini cocok buat blog toko online, blog sport, blog foto/video, atau blog apa saja yang ada gambar menarik.

Menurut blogger hero yang menjadi sumber kode ini Features Widget ini a.l.
1. Responsive Design.
2. Fast Loading And SEO Friendly.
3. Shows Post of same category/label/tag.
4. Blog Post Title with Thumbnail.
5. Easy to Install.
6. Decreases Blog Bounce Rate.

Cara Membuat Related Post dengan Gambar Thumbnail

Berikut ini cara mudah membuat related post with thumbnail image yang kodenya sudah saya modif biar lebih keren.

1. Template > Edit HTML
2. Simpan (Copas) kode CSS berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts{float:left;width:auto;border-bottom:3px solid #48d;} #related-posts a{border-right:none} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:16px Oswald;padding:3px;color:#555; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:128px;height:80px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:left;padding:5px;font-size:13px Arial;line-height:15px;height:75px;width:128px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYcIuWcJI1gPxaDm3m79MGqmIh2733iAQGfdrZ2TOBujDlIIq1Z_BtCqSy_Qugvva_X5-KGayLA6tlP9NE-0-S7ph5IswZzsmCHrxpMGMsYHwaZG2PClJ2pNJ-VDNM3g9BZZYOgvdiX4sW/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=30;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYcIuWcJI1gPxaDm3m79MGqmIh2733iAQGfdrZ2TOBujDlIIq1Z_BtCqSy_Qugvva_X5-KGayLA6tlP9NE-0-S7ph5IswZzsmCHrxpMGMsYHwaZG2PClJ2pNJ-VDNM3g9BZZYOgvdiX4sW/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<30&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]></script></b:if>

3. Simpan (Copas) kode HTML & Javascript berikut ini di bawah kode <data:post.body/> atau di atas kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=4; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://blogromeltea.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuGHpEDqdkUCtZH1BmLP3UpkT6qm2N9fgqpe3svfkCqDp-lvHV-UoL4hCcQY31j72Kp4u4lWF2V8t_8WU8KjVbz6avrJalTUHOCuB_Q9mVihshLu5Wkd8QwEZWBvMWt49xlKEKetbV1PSQ/s1600/best+blogger+tips.png'/></a> </b:if> </b:if>

<div style='clear: both;'/>

4. Save Template!

Jika dilakukan sesuai dengan instruksi dan kode-kode di atas cocok dengan template Anda, maka mestinya widget Related Post dengan Gambar Thumbnail sudah muncul di bawah postingan blog Anda

Laman

Wednesday, November 2, 2016

Related Post dengan Gambar Thumbnail untuk Blogger

Cara Membuat Related Post dengan Gambar Thumbnail

Baca juga Trick and Tips Blog Lainya di bawah ini :

No comments:

Post a Comment

Welcome In Creating Website

Contoh Sliding Login Dengan JQuery

Tutorial Blog

Member Login

Not a member yet? Sign Up!