Cara membuat related post atau artikel terkait di blog yang support gambar eksternal

Related Post atau Artikel Terkait di blog merupakan sebuah widget yang berisi kumpulan dari beberapa cuplikan post yang ditampilkan berdasarkan label dan dipilih secara acak serta tampil bergantian.

Widget Related Post

Widget ini dibuat menggunakan script javascript dengan beberapa perintah di dalamnya yang telah diatur sedemikian rupa, yang mana javascript ini nantinya akan mengekstrak data dari JSON Feed blog sehingga dapat menampilkan data-data dari postingan yang sudah dipublish. Isi data yang ditampilkan tergantung pada perintah yang ditulis pada javascript, biasanya hanya berupa judul post, gambar, dan cuplikan artikel.

Terdapat banyak script Related Post yang bertebaran di internet dengan cara penulisan yang berbeda, namun dengan tujuan dan hasil yang hampir sama sehingga kita boleh dengan bebas memilih script mana yang akan kita gunakan.

Gambar tidak muncul di widget Related Post

Akan tetapi, masalahnya adalah beberapa script Related Post tidak mampu menampilkan gambar yang dihost di luar Blogger sehingga ketika script telah dipasang di blog kemudian kita mendapati bahwa beberapa gambar pada widget Related Post ternyata tidak muncul.

Jadi, penyebab gambar thumbnail tidak muncul di cuplikan post Related Post adalah karena gambar tersebut dihost di luar Blogger.

Itu terjadi saat kamu menambahkan gambar ketika membuat postingan karena saat menambahkan gambar, seharusnya kamu memilih upload dari komputer, kemudian setelah terupload, klik gambar untuk memilih, lalu pilih.

Setelah gambar ditambahkan ke postingan, lihat url gambar tersebut dengan cara mengganti tampilan editor postingan ke mode HTML.

Di situ akan ditampilkan url gambar dengan parameter https:// bp. blogspot. com, itu artinya gambar tersebut dihost di Blogger.

Sedangkan apabila url menunjukkan selain itu, misalkan https:// lh. googleusercontent. com, berarti gambar tersebut dihost di Google Photo atau Google Drive.

Atau jika url menunjukkan https:// static flickr. com, itu artinya gambar dihost di situs Flickr.

Kedua contoh url gambar di atas selain contoh pertama artinya gambar dihost di luar Blogger, dan ini berlaku untuk url lainnya, sehingga dengan ini akan menyebabkan gambar thumbnail tidak muncul karena beberapa script Related Post hanya mampu mengambil gambar thumbnail yang dihost di Blogger saja atau istilahnya yaitu gambar internal.

Widget Related Post support gambar eksternal

Berbeda halnya dengan script Related Post yang Blogizty bagikan di postingan ini karena ini merupakan script Related Post spesial.

Disebut spesial karena script Related Post ini selain menampilkan judul, gambar, dan deskripsi atau summary atau snippet, juga dapat menampilkan gambar eksternal atau gambar yang dihost di luar Blogger.

Sebagai catatan

Blogizty telah mengatur widget Related Post menjadi beberapa tampilan yang boleh kamu pilih sesuai selera, namun apabila kamu telah paham sedikitnya tentang cara penulisan CSS maka kamu boleh mengubahnya sesuka hati, yang mana Blogizty juga telah menyediakan satu bundle CSS yang berisi selector dari Related Post Special ini tanpa property dan nilai supaya kamu bisa mengaturnya sendiri.
Script callback dan javascript support untuk semua tampilan, sehingga apabila kamu ingin mengganti tampilan, maka kamu hanya tinggal mengganti script CSS saja dengan script CSS tampilan lainnya.
Untuk membuat Related Post ini bekerja, maka sebelumnya kamu harus pastikan bahwa label untuk postingan telah ditambahkan, di mana untuk menambahkannya yaitu pada saat kamu membuat post di editor post Blogger, kemudian pada pilihan label, tambahkan label.
Tampilan mungkin akan berbeda setelah script dipasang di blog kamu karena itu tergantung dari pengaturan CSS bawaaan yang ada di dalam template blog kamu.

Script Related Post support gambar eksternal

Script Related Post ini terdiri dari 2 script yang harus dipasang, yaitu script utama dan script callback yang berfungsi memanggil script utama.

Script callback

Pasang script callback ini sebelum atau 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 paham mengenai struktur kode HTML template Blogger, maka terserah kamu akan dipasang di mana.

<!--RelatedPosts JellySpecial Blogizty 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>
<!--RelatedPosts JellySpecial Blogizty End-->

Script javascript

Kode javascript untuk tampilan-tampilan ini, boleh kamu letakkan sebelum atau di atas kode </head> atau jika tak ada maka cari kode </head> kemudian simpan di atasnya atau sebelumnya.

<!--RelatedPosts JellySpecial Blogizty 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>
<!--RelatedPosts JellySpecial Blogizty End-->

Modifikasi script Related Post

Untuk mengubah tampilan agar sesuai keinginan masing-masing, maka Blogizty sediakan beberapa panduan sederhana.

Script dasar CSS Related Post

Modifikasi tampilan melalui CSS dari nol boleh kamu coba menggunakan CSS dasar di bawah ini.

/* RelatedPost JellySpecialBlogizty */
#jelly-relpost {}
#jelly-relpost h4 {}
#jelly-relpost .relcontent {}
#jelly-relpost .relimage {}
#jelly-relpost .relimage img {}
#jelly-relpost .reltitle {}
#jelly-relpost .reltitle a {}
#jelly-relpost .reltitle a:hover {}
#jelly-relpost .relsnip {}

Modifikasi script utama javascript Related Post

Modifikasi ini boleh kamu lakukan pada script utama javascript, di antaranya yaitu :

var relmax = 6 ,

Untuk mengubah banyaknya jumlah post yang ditampilkan, kamu boleh mengubah nilainya yang berupa nomor menjadi nomor berapapun, tapi akan lebih baik jika tidak lebih dari 10, dan ubah hanya nomornya saja.

relsnipchars = 150 ,

Adalah untuk mengubah banyaknya karakter pada deskripsi atau snippet atau summary pada cuplikan artikel, kamu boleh mengubah nilai menjadi berapapun, asal tidak melebihi 150 karena nilai maksimumnya adalah 150 karakter.

Modifikasi script callback javascript Related Post

Sedangkan untuk modifikasi di bawah ini, kamu boleh lakukan pada script callback javascript, yaitu :

<h4>Related Posts</h4>

Kamu boleh mengganti tulisan yang menjadi judul widget Related Post dengan tulisan yang kamu mau, misalkan Artikel Terkait, Post Terkait, atau Baca Juga, dan ataupun Artikel yang mungkin kamu suka.

Selamat mencoba, semoga bermanfaat.

Cara membuat related post atau artikel terkait di blog yang support gambar eksternal

Widget Related Post

Gambar tidak muncul di widget Related Post

Widget Related Post support gambar eksternal

Script Related Post support gambar eksternal

Script callback

Script javascript

Related Post berbagai tampilan

Script CSS Related Post tampilan 1 Simple style

Script CSS Related Post tampilan 2 Circle style

Script CSS Related Post tampilan 3 Title style

Script CSS Related Post tampilan 4 Title Disc style

Modifikasi script Related Post

Script dasar CSS Related Post

Modifikasi script utama javascript Related Post

Modifikasi script callback javascript Related Post

Tentang Penulis :

Artikel Menarik Lainnya

Tidak ada komentar:

Posting Komentar

Artikel Terbaru

Paling Banyak Dibaca