POSTING ini "sekadar" menyimpan kode Related Posts Keren dengan Gambar Thumbnail yang dipasang di blog CB.
Kode Posting Terkait untuk Blogger ini bersumber dari kode related post yang CB share sebelumnya di posting Membuat Sendiri Related Post plus Gambar Thumbnail di Blog.
Kode entry terkait atau artikel terkait berikut ini sudah dimodifikasi hingga tampil seperti di ada di bawah tiap posting.
Anda yang blognya belum memasang widget Related Posts, bisa gunakan yang ini. Yang sudah ada, dan mau ganti, hapus dan replace saja kode related postnya dengan yang di bawah ini.
Hanya ada tiga kelompok kode, yaitu CSS, HTML, dan Javascript. CB share dua jenis tampilan related post dengan gambar thumbnail: vertikal dan horizontal.
1. Related Post Gambar Vertikal
Contohnya seperti di blog CB ini dan gambar di atas.KODE CSS:
Disimpan 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:Arial;font-weight:700;}
#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 dashed #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
Simpan di bawah kode <data:post.body/> yang kedua atau ketiga. Bisa juga di bawah kode Social Share Button plus WhatsApp.
<div id='related_posts'>
<h4>Related Posts:</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
KODE JAVASCRIPT
Simpan di atas kode </head> atau </body>
<script type='text/javascript'>
/*<![CDATA[*
/var relnum=0;var relmaxposts=5;var numchars=230;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/AVvXsEiRODNKWLgfVd_3hxWGGbRfBYh1EF8H6WJUJpgccIr4ecvnP4Z2jJkaeChkh3-MuzNC1kjN4y7btEXAIzBUbJxXNoEyh2lZ-ANc7UYEWWOxr3TNHVRbLTzrCIh6IDNNh9TJ-J41pB1PRPgI/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>
Save Template!
2. Related Post Gambar Horizontal
Contohnya seperti gambar di bawah ini:
CARA PASANG:
1. Template > Edit HTML
2. Copas kode berikyt ini di atas kode </head>
<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
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/AVvXsEje17mya5tKjcuVmJIfvSBoLtI80PAu2IOOAW9nHKplkVspcn8o6L7qwUOXb4BhFHKd5UQQ_AtvQsNjEyWjhPX51kZFtcC5HrPNnO7e9T5x4OCAmpc0hMxuwlJt6esPniSVco0fAuXmX3o7/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";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('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&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>
<!--Related Posts with thumbnails End-->
3. Copas di atas kode <div class='post-footer'>
<!-- Related Posts with Thumbnails Start-->
<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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails End-->
Save Template!!!
Demikian cara memasang Kode Related Posts Keren dengan Gambar Thumbnail di Blogger. Muncul di bwah Postingan Blog. Good Luck & Happy Blogging! (http://www.contohblog.com).*
Demikianlah Artikel Kode Related Posts Keren dengan Gambar Thumbnail
Sekian Tutorial dari Blogrenanda Kode Related Posts Keren dengan Gambar Thumbnail, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan dari BlogRenanda.
Kode Related Posts Keren dengan Gambar Thumbnail
Anda sedang membaca artikel Kode Related Posts Keren dengan Gambar Thumbnail dan artikel ini url permalinknya adalah https://blogrenanda.blogspot.com/2016/09/kode-related-posts-keren-dengan-gambar.html Semoga artikel ini bisa bermanfaat.
0 Response to "Kode Related Posts Keren dengan Gambar Thumbnail"
Post a Comment