Membuat widget related post baca juga di antara paragraf postingan

Umumnya, widget related post atau baca juga yang disisipkan di tengah postingan Blogger bentuknya adalah berupa daftar, dan sangat jarang sekali ada yang membagikan script widget related post yang disisipkan di antara paragraf postingan untuk Blogger atau kadang disebut sebagai multi related post, kecuali mereka melakukannya dengan manual.

Adapun itu, kebanyakan script yang beredar di internet adalah milik Arlina. Bahkan jikapun script telah di-obfuscate, itu tetap terlihat sebagai script yang sama.

Script yang dimaksud tersebut memang bagus dan sudah hampir sempurna, dalam arti sesuai dengan kebutuhan. Namun, script tersebut tampaknya jarang digunakan karena tidak mendukung beberapa perangkat lawas khususnya perangkat handphone. Itu dikarenakan di dalam script menggunakan metode ES6 (ECMAScript 6). Sehingga widget tidak akan muncul jika dibuka di perangkat lawas, baik itu melalui browser Google Chrome maupun Mozilla Firefox.

Sedangkan di artikel ini, Blogizty sediakan script related post di antara paragraf postingan yang juga didukung oleh perangkat lawas. Itu dikarenakan di dalam script menggunakan metode ES5 yang dapat dibaca oleh banyak perangkat lawas.

Tanpa adanya "Copyright Infringement" terhadap siapapun, Blogizty informasikan bahwa script ini adalah hasil modifikasi dari script related post biasa dengan metode ES5 yang didapat dari forum Stackoverflow dan Mozilla Developer Network dan terinspirasi dari Arlina.

Catatan :

• Untuk membuat widget ini bekerja, maka label postingan harus sudah diaktifkan.

• Tampilan mungkin berbeda setelah script dipasang di blog. Itu tergantung dari pengaturan CSS bawaan template.

• Widget hanya akan muncul apabila di postingan terdapat tag P dan atau BR.

Cara memasang widget related post di antara paragraf postingan

Bila kamu ingin menggunakan script dari Blogizty, silakan gunakan script di bawah ini :

Script CSS

Pasang kode CSS ini sebelum kode </style> atau ]]></b:skin>.

.blue-relpost {display:block;margin:8px 0}
.blue-relpost .reltext {display:block;margin:0;font-weight:600}

Script JavaScript Related Post

Kode ini boleh kamu pasang di atas atau sebelum kode </head>

<!--RelatedPosts InParagraf Blogizty Start-->
<script>
//<![CDATA[
var maxRel=4,titleRel='Baca juga :',relTitle=new Array(),relNum=0,relUrl=new Array();function containsRelated(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function blueRelTitle(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];if(i==json.feed.entry.length){break}relTitle[relNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relUrl[relNum]=entry.link[k].href;break}}relNum++}}
function showreltitle(BlueJelly){var fetchTag=document['\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72\x41\x6c\x6c']('\x2e\x70\x6f\x73\x74\x2d\x62\x6f\x64\x79\x20\x62\x72\x2c\x20\x2e\x70\x6f\x73\x74\x2d\x62\x6f\x64\x79\x20\x70'),m=maxRel+0x1,f=fetchTag['\x6c\x65\x6e\x67\x74\x68']/m,arr=Array['\x61\x70\x70\x6c\x79'](0x0,{'\x6c\x65\x6e\x67\x74\x68':maxRel})['\x6d\x61\x70'](Number['\x63\x61\x6c\x6c'],Function('\x69','\x72\x65\x74\x75\x72\x6e\x20\x69\x2b\x31'));for(var a=0x0;a<arr['\x6c\x65\x6e\x67\x74\x68'];a++){var x=arr[a],t=parseInt(f*x),postTag=fetchTag[t],blueRel=document['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']('\x73\x70\x61\x6e');blueRel['\x63\x6c\x61\x73\x73\x4e\x61\x6d\x65']='\x62\x6c\x75\x65\x2d\x72\x65\x6c\x70\x6f\x73\x74',postTag['\x6e\x6f\x64\x65\x4e\x61\x6d\x65']=='\x50'?postTag['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](blueRel,postTag['\x6e\x65\x78\x74\x53\x69\x62\x6c\x69\x6e\x67']):postTag['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](blueRel,postTag['\x6e\x65\x78\x74\x53\x69\x62\x6c\x69\x6e\x67']);};var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relUrl.length;i++){if(!containsRelated(tmp,relUrl[i])){tmp.length+=1;tmp[tmp.length-1]=relUrl[i];tmp2.length+=1;tmp2[tmp2.length-1]=relTitle[i]}if(relUrl[i]==BlueJelly){relUrl.splice(i,1);relTitle.splice(i,1)}}relTitle=tmp2;relUrl=tmp;var r=Math.floor((relTitle.length-1)*Math.random()),def=0,relPost=document.querySelectorAll('.blue-relpost'),dirURL=document.URL;while(def<relTitle.length&&def<relPost.length){if(relUrl[r]!=dirURL){for(var z=0;z<relPost.length;z++){relPost[z].innerHTML='<span class="reltext">'+titleRel+'</span><a href="'+relUrl[r]+'" title="'+relTitle[r]+'">'+relTitle[r]+'</a>';def++;if(r<relTitle.length-1){r++}else{r=0}}}};relUrl.splice(0,relUrl.length);relTitle.splice(0,relTitle.length)};
//]]>
</script>
<!--RelatedPosts InParagraf Blogizty End-->

Script JavaScript Callback

Pasang script ini di bagian post-footer. Tapi jika di template kamu tidak ada, maka kamu boleh meletakkannya di dalam blok kode post-body, tepatnya di atas atau sebelum tag </div> penutup post-body.

<!--RelatedPosts InParagraf Blogizty Start-->
<b:if cond='data:view.isPost'>
    <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=blueRelTitle&amp;max-results=100&quot;'/>
    </b:loop>
	  <script>showreltitle(&quot;<data:post.url/>&quot;);</script>
  </b:if>
  <!--RelatedPosts InParagraf Blogizty End-->

Modifikasi script

Pada script utama, kamu boleh ubah beberapa nilai dari variabel berikut :

var maxRel=4,

Adalah jumlah post yang akan ditampilkan, ubah hanya nilainya saja.

titleRel='Baca juga :'

Sedangkan ini adalah judul widget related post, kamu boleh ubah dengan kata apapun.

Kekurangan dan kelebihan

Script Blogizty tidak dapat dipelajari karena sebagian di-obfuscate. Tapi mendukung beberapa perangkat lawas seperti Android OS 4.4 KitKat dan yang lebih lawas, baik itu menggunakan browser bawaan, Google Chrome maupun Mozilla Firefox. Juga perangkat Apple iOS dan BlackBerry 10 dengan browser Mobile Safari versi 7 (Webkit), serta Opera Mini Android versi 7.6 (Presto 2.12).

© Blogizty