 |
| Related Post Image Anti Penyot |
PeluangSukses.Com - Responsivenes adalah kemampuan sebuah website untuk menyesuaikan diri sesuai dengan ukuran layar, jendela atau resolusi. Pada tahun 2019, internet lebih banyak diakses dari perangkat seluler daripada desktop dan laptop.
Sebagai pengembang web, Anda tidak dapat mengabaikan statistik ini. Dengan 5 miliar perangkat seluler aktif di seluruh dunia, daya tanggap telah menjadi persyaratan utama dalam industri pengembangan web. Jadi, pertanyaannya, seberapa sulit mengembangkan situs web yang responsif atau mengonversi yang sudah ada?
Langsung saja bagi kamu yang sedang menginginkan related post dengan image yang bisa menyesuaikan dan responsive anti penyot maka kamu semua bisa mencoba menerapkan koding-koding yang tersedia dibawah.
Tapi sebelumnya kamu bisa download template blogmu agar jika terjadi kegagalan atau kesalahan copast dan penempatan koding tidak terlalu merepotkan dengan mengupload ulang template lama.
Tempatkan kode berikut dalam CSS utama atau diatas ]]></b:skin>:
/* -- ARTIKEL TERKAIT -- */.artikelterkait { width: 100%;}
.related-img { overflow: hidden; border-radius: 5px; box-shadow: 0 1px 4px rgb(0 0 0 / 36%);}
.relited {height: 240px; float: left; width: 46%; margin: 10px;}
#related-posts { float:left; width:auto;}
#related-posts h2 { margin-top: 10px;font-size: 20px; background:none;padding:3px;}
#related-posts .related_img { }
#related-title {line-height: 1.2; color: #515150; margin: 10px; text-align: left; width: 100%; font-weight: bold; font-family: Montserrat, Arial, Helvetica Neue, Helvetica, sans-serif;}
#related-posts .related_img:hover{ opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7}
#related-title:hover { text-decoration: underline;}
Tempatkan kode dibawah ]]></b:skin>
Kemudian untuk menyesuaikan tampilan mobile baik itu android maupun iphone masukan kode css berikut dibawah ]]></b:skin> atau masukan bersama kelompok CSS postingan dibawah kode berikut <b:if cond='data:blog.pageType == "item"'>:
<b:if cond='data:blog.pageType == "item"'>@media screen and (max-width:414px) {#related-posts {float: none;width: auto;overflow: auto;position: relative;overflow-x: auto;display: flex;flex-wrap: nowrap;}.artikelterkait {width: auto;flex-wrap: nowrap;display: flex;}.relited {float: left;width: 200px;margin: 10px;}</b:if>
Tempatkan kode CSS diatas diluar kode CSS utama diluar atau dibawah ]]></b:skin> karena setiap kode CSS itu memberi perintah sendiri-sendiri dalam tiap tampilan.
Setelah itu cari kode skrip dibawah ini:
</head>
Lalu kemudian masukan kode dibawah ini:
<!--Related Posts with thumbnails Scripts and Styles Start--><b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>//<![CDATA[imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBHuueg_RlSlBllQ7xivInMTT44CiPiNBehSuNu8TYu-39yBJ0WGuQYai8UuKFq8Ky4Q_8JegF9rRFBxLJ6iqPlEHmKZs_pplvfRdcRVWpvhDedhzfMADMiCSiaNWfpj9jJ25WhWIiVtx1/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;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/AVvXsEiBHuueg_RlSlBllQ7xivInMTT44CiPiNBehSuNu8TYu-39yBJ0WGuQYai8UuKFq8Ky4Q_8JegF9rRFBxLJ6iqPlEHmKZs_pplvfRdcRVWpvhDedhzfMADMiCSiaNWfpj9jJ25WhWIiVtx1/s1600/no-thumbnail.png'}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('<div class="artikelterkait"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a class="relited');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><div class="related-img" style="height: 140px;"><img class="related_img" src="'+thumburl[r]+'"/><br/></div><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 Scripts and Styles End-->
Terakhir cari kode dibawah
<data:post.body/>
Lalu masukan kode dibawah ini di bawah kode diatas:
<!-- Related Posts with Thumbnails Code Start--><b:if cond='data:blog.pageType == "item"'><b>Artikel Terkait:</b><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=6"' type='text/javascript'/></b:if></b:loop><script type='text/javascript'>var relatedpoststitle="<b>Related Posts:</b>";var currentposturl="<data:post.url/>";var maxresults=4;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div></b:if><!-- Related Posts with Thumbnails Code End-->
Kemudian klik save/simpan template.
Koding diatas sudah diuji coba pada blog ini dan berhasil jika terjadi kesalahan coba perhatikan lagi susunan HTML pada blog agan, jika terjadi tumpang tindih kode perintah bisa saja tidak work. Maka untuk image atau gambar coba cari kode CSS yang menggunakan kode misalkan (.post img) baik itu di class utama atau id CSS coba ganti dengan auto atau hapus lebar dan tinggi gambarnya (width dan height).
