Cara membuat widget related post image thumbnail yang support gambar eksternal

Widget Related Post yang Blogizty bagikan kali ini adalah lanjutan dari widget Related Post sebelumnya yaitu Related Post Special support gambar eksternal.

Widget Related Post Image support gambar eksternal

Perbedaannya hanya pada tampilan gambar saja, yang mana ini berukuran lebih besar. Dan ini sangat cocok bila ditempatkan di bagian bawah artikel sebagai ganti dari iklan 'matched content'.

Tapi walaupun demikian, script ini juga boleh digunakan sebagai widget Related Post dengan tampilan biasa, dan tentunya script ini juga mendukung gambar eksternal atau gambar yang di host di luar Blogger sehingga semua gambar thumbnail pada cuplikan Related Post pasti akan muncul, baik itu gambar internal maupun eksternal.

Sebagai catatan

• Bila tampilan gambar pada cuplikan post ukuran besar terlihat buram, itu artinya gambar yang terdapat dalam post yang bersangkutan memiliki resolusi yang kecil atau rendah. Solusinya, apabila tak ingin mengganti gambar dalam post dengan resolusi yang lebih tinggi maka kamu boleh menggunakan script jQuery untuk mengatasi gambar buram.

• Untuk diketahui bahwa minimal resolusi gambar untuk widget Related Post Image ini adalah 600px pada lebar, dan 400px pada tinggi dan harus sudah melalui proses kompresi supaya loading widget menjadi cepat sehingga apabila resolusi gambar melebihi ukuran yang dimaksud maka itu akan lebih baik.

• Tampilan widget Related Post Image ini disertai dengan post snippet atau deskripsi post atau post summary. Apabila ingin menghilangkannya sehingga bagian yang tampil hanya judul dan gambar saja, maka kamu bisa dengan mudah mengaturnya sendiri yang mana caranya terdapat di bagian bawah artikel.

• Tampilan mungkin akan berbeda setelah script dipasang di blog kamu karena itu tergantung pada pengaturan CSS bawaan template.

Script Related Post Image support gambar eksternal

Widget ini terdiri dari 1 script CSS dan 2 script javascript sehingga pastikan kamu memasang ketiganya supaya widget tampil di blog.

Script CSS

Pasang script CSS ini di atas atau sebelum kode </style> atau ]]></b:skin> di dalam template blog.

/* RelatedPostsImageBlogizty */
#jelly-relpost {display:block;margin:30px 0}
#jelly-relpost h4 {margin:0 0 10px;padding:5px 1%;color:#5c5c5c;font-size:16px;font-family:'Roboto',sans-serif;font-weight:600;box-shadow:0 1px 1px -1px rgba(0,0,0,.5);-webkit-box-shadow:0 1px 1px -1px rgba(0,0,0,.5);-moz-box-shadow:0 1px 1px -1px rgba(0,0,0,.5)}
#jelly-relpost .relcontent {width:32%;display:inline-block;overflow:hidden;vertical-align:top;margin:10px .66% 0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#jelly-relpost .relimage {position:relative;padding-top:66.66%;overflow:hidden;border:1px solid rgba(0,0,0,.1)}
#jelly-relpost .relimage img {position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;object-fit:cover;margin:0 auto}
#jelly-relpost .reltitle {font-size:15px;font-family:'Roboto',sans-serif;font-weight:500;margin:0;padding:5px 0}
#jelly-relpost .relsnip {font-size:15px}
@media (max-width:650px){
#jelly-relpost .relcontent {width:48%;margin:10px 1% 0}}
@media (max-width:425px){
#jelly-relpost h4 {margin:0 0 20px;padding:5px 0}
#jelly-relpost .relcontent {width:100%;display:block;margin:10px auto 20px}}

Script javascript

Selanjutnya, letakkan kode javascript ini sebelum atau di atas kode </head> atau &lt;!--</head>--&gt;&lt;/head&gt;.

<!--RelatedPostsImageBlogizty Start-->
<script>
//<![CDATA[
var relpostimage=6;
var relsnipchars=150;
var jelNum=0,jelTitle=new Array,jelUrl=new Array,jelSnip=new Array,jelImage=new Array;function removetags(text,length){var jelSum=text.split("<");for(var i=0;i<jelSum.length;i++){if(jelSum[i].indexOf(">")!=-1){jelSum[i]=jelSum[i].substring(jelSum[i].indexOf(">")+1,jelSum[i].length)}}jelSum=jelSum.join("");jelSum=jelSum.substring(0,length-1);return jelSum}function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function jellyRelImage(json){var entry,postimg,jelContent;for(var i=0;i<json.feed.entry.length;i++){entry=json.feed.entry[i];if(i==json.feed.entry.length){break}jelTitle[jelNum]=entry.title.$t;jelContent="";if("content"in entry){jelContent=entry.content.$t}else if("summary"in entry){jelContent=entry.summary.$t}jelSnip[jelNum]=removetags(jelContent,relsnipchars);try{postimg=entry['\x6d\x65\x64\x69\x61\x24\x74\x68\x75\x6d\x62\x6e\x61\x69\x6c']['\x75\x72\x6c']['\x72\x65\x70\x6c\x61\x63\x65'](/\/s72\-c\//,'\x2f\x73\x36\x30\x30\x2f');}catch(_0x14b042){s=entry['\x63\x6f\x6e\x74\x65\x6e\x74']['\x24\x74'],a=s['\x69\x6e\x64\x65\x78\x4f\x66']('\x3c\x69\x6d\x67'),b=s['\x69\x6e\x64\x65\x78\x4f\x66']('\x73\x72\x63\x3d\x22',a),c=s['\x69\x6e\x64\x65\x78\x4f\x66']('\x22',b+0x5),d=s['\x73\x75\x62\x73\x74\x72'](b+0x5,c-b-0x5);if(a!=-0x1&&b!=-0x1&&c!=-0x1&&d!='')postimg=d;else postimg='\x68\x74\x74\x70\x73\x3a\x2f\x2f\x6c\x68\x33\x2e\x67\x6f\x6f\x67\x6c\x65\x75\x73\x65\x72\x63\x6f\x6e\x74\x65\x6e\x74\x2e\x63\x6f\x6d\x2f\x2d\x68\x4a\x5f\x45\x2d\x79\x36\x45\x71\x4c\x55\x2f\x58\x38\x74\x50\x34\x4e\x48\x49\x5f\x70\x49\x2f\x41\x41\x41\x41\x41\x41\x41\x41\x41\x42\x34\x2f\x4d\x63\x4d\x2d\x65\x70\x64\x45\x4c\x65\x63\x71\x33\x4e\x2d\x44\x75\x78\x73\x51\x54\x79\x65\x55\x6f\x30\x34\x4d\x48\x5f\x34\x41\x51\x43\x4c\x63\x42\x47\x41\x73\x59\x48\x51\x2f\x68\x37\x32\x30\x2f\x4a\x65\x6c\x6c\x79\x25\x32\x42\x47\x6c\x61\x73\x73\x25\x32\x42\x42\x6c\x6f\x67\x69\x7a\x74\x79\x25\x32\x42\x4e\x6f\x49\x6d\x61\x67\x65\x2e\x6a\x70\x67';}jelImage[jelNum]=postimg;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){jelUrl[jelNum]=entry.link[k].href;break}}jelNum++}}function showrelimage(){var tmp=new Array(0),tmp2=new Array(0),tmp3=new Array(0),tmp4=new Array(0);for(var i=0;i<jelUrl.length;i++){if(!contains(tmp,jelUrl[i])){tmp.length+=1;tmp[tmp.length-1]=jelUrl[i];tmp2.length+=1;tmp2[tmp2.length-1]=jelTitle[i];tmp3.length+=1;tmp3[tmp3.length-1]=jelSnip[i];tmp4.length+=1;tmp4[tmp4.length-1]=jelImage[i]}}jelTitle=tmp2;jelUrl=tmp;jelSnip=tmp3;jelImage=tmp4;var def=0,r=Math.floor((jelTitle.length-1)*Math.random()),rels=r,dirURL=document.URL,output;while(def<relpostimage){if(jelUrl[r]!=dirURL){output='\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x27\x72\x65\x6c\x63\x6f\x6e\x74\x65\x6e\x74\x27\x3e',output+='\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x27\x72\x65\x6c\x69\x6d\x61\x67\x65\x27\x3e\x3c\x61\x20\x68\x72\x65\x66\x3d\x27'+jelUrl[r]+'\x27\x20\x72\x65\x6c\x3d\x27\x6e\x6f\x66\x6f\x6c\x6c\x6f\x77\x27\x20\x74\x61\x72\x67\x65\x74\x3d\x27\x5f\x74\x6f\x70\x27\x20\x74\x69\x74\x6c\x65\x3d\x27'+jelTitle[r]+'\x27\x3e\x3c\x69\x6d\x67\x20\x73\x72\x63\x3d\x27'+jelImage[r]+'\x27\x20\x61\x6c\x74\x3d\x27\x27\x2f\x3e\x3c\x2f\x61\x3e\x3c\x2f\x64\x69\x76\x3e',output+='\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x27\x72\x65\x6c\x74\x69\x74\x6c\x65\x27\x3e\x3c\x61\x20\x68\x72\x65\x66\x3d\x27'+jelUrl[r]+'\x27\x20\x74\x61\x72\x67\x65\x74\x3d\x27\x5f\x74\x6f\x70\x27\x3e'+jelTitle[r]+'\x3c\x2f\x61\x3e\x3c\x2f\x64\x69\x76\x3e',output+='\x3c\x73\x70\x61\x6e\x20\x63\x6c\x61\x73\x73\x3d\x27\x72\x65\x6c\x73\x6e\x69\x70\x27\x3e'+jelSnip[r]+'\x3c\x2f\x73\x70\x61\x6e\x3e',output+='\x3c\x64\x69\x76\x20\x73\x74\x79\x6c\x65\x3d\x27\x63\x6c\x65\x61\x72\x3a\x62\x6f\x74\x68\x27\x3e\x3c\x2f\x64\x69\x76\x3e\x3c\x2f\x64\x69\x76\x3e',document['\x77\x72\x69\x74\x65'](output),def++;if(def==relpostimage)break;}r<jelTitle['\x6c\x65\x6e\x67\x74\x68']-0x1?r++:r=0x0;if(r==rels)break;}};
//]]>
</script>
<!--RelatedPostsImageBlogizty End-->

Script javascript callback

Terakhir, pasang script callback ini di atas kode <div class='post-footer-line post-footer-line-3'> di dalam template blog yang letaknya berada di dalam tag <b:includable id='post' var='post'> bukan di dalam tag <b:includable id='mobile-post' var='post'>, atau jika kamu sudah paham mengenai struktur template Blogger, maka terserah kamu akan dipasang di bagian mana.

<!--RelatedPostsImageBlogizty Start-->
<b:if cond='data:view.isPost'>
<div id='jelly-relpost'>
  <h4>Related Posts</h4>
  <div style='clear:both'></div>
          <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=jellyRelImage&amp;max-results=100&quot;'/>
          </b:loop>
     <script>showrelimage();</script>
</div>
<div style='clear:both'></div>
</b:if>
<!--RelatedPostsImageBlogizty End-->

Modifikasi script Related Post Image

• Pada script callback, kamu boleh ubah judul dalam tag h4.

  <h4>Related Posts</h4>

  Ini adalah nama yang akan menjadi judul widget Related Post di blog, kamu boleh mengubahnya dengan nama apapun seperti misalnya Baca Juga :, Artikel menarik lainnya :, dan sebagainya.

• Sedangkan pada script javascript, kamu boleh mengubah nilai pada bagian-bagian berikut ini.

  var relmax = 6 ,

  Adalah jumlah cuplikan post yang akan ditampilkan pada widget Related Post. Dan sebagai rekomendasi, usahakan untuk tidak lebih dari 10 dan ubah hanya nomornya saja.

  relsnipchars = 150 ,

  Untuk menampilkan jumlah karakter post snippet atau deskripsi atau summary, ubah hanya nomornya saja dan maksimal nomor adalah 150.

  Apabila tidak ingin menampilkan post snippet, maka ubah nomor menjadi 0, tapi akan lebih baik lagi jika menonaktifkannya di pengaturan CSS, caranya yaitu kamu harus mengubah kode CSS berikut ini :

  #jelly-relpost .relsnip {font-size:15px}

  Kemudian ubah menjadi seperti ini :

  #jelly-relpost .relsnip {display:none}

Semoga bermanfaat.

© Blogizty