Membuat Widget Related Post Keren Dengan Thumbnail



Related Posts atau Posting Terkait merupakan sebuah widget blogspot yang cukup efektif dalam mengantisipasi agar pengunjung tidak langsung keluar setelah membaca sebuah artikel dari halaman blog kita. Keterkaitan beberapa artikel yang ditampilkan oleh widget ini akan semakin membuat rasa penasaran pembaca untuk menggali lebih dalam apa saja konten yang ditawarkan oleh blog kita.

Widget yang biasanya diletakkan di bagian bawah postingan ini bervariatif dan yang lebih menarik jika disertai dengan gambar (thumbnail) sehingga akan terlihat langsung oleh pembaca blog kita. Seiring dengan update blogger terkait format gambar postingan membuat tampilan gambar di beberapa widget bergambar menjadi bermasalah, termasuk widget related post ini. Gambar menjadi blur atau bahkan tidak muncul.

Pada tutorial kani ini akan dijelaskan bagaimana cara membuat widget related post bergambar dengan style grid keren dan responsive. Tampilan gambarnya juga jelas alias tidak blur. Langsung saja simak cara pemasangannya berikut ini.

Cara Memasang Widget Related Posts  
1. Buka akun blogger anda. 
2. Klik menu thema dan edit html. 
3. Cari kode </head> dan letakkan kode berikut ini di atasnya.
 
<style> /* Related Posts Santos Blog*/ #related-post {display:block; margin:20px 0px; line-height:1.5em;} #related-post h4{ font-size:17px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #related-post h4 span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #related-post h4:before{ content: &#39;&#39;; display: block; position: relative; top:15px; width: 100%; border-top: 2px solid #068488; } #related-summary .news-text {display:none;} ul#related-summary{margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;} ul#related-summary li{list-style:none; width:calc((100% / 3) - 15px); text-align:left; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important;} ul#related-summary li img{ overflow:hidden; line-height:0px; border-radius:4px; } ul#related-summary li:nth-of-type(3n){ margin-right:0px; } ul#related-summary li a{ display:block; } ul#related-summary li img{width:100%; height:117px; transition:all .3s ease; border:0px; margin:0px;} ul#related-summary li:hover img {transform:scale(1.1); filter: brightness(75%); -webkit-filter: brightness(75%);} ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none;margin-top:7px} ul#related-summary li a.relinkjdulx:hover{color:#066;} @media only screen and (max-width:480px){ ul#related-summary li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; } ul#related-summary li a img{ height:85px;} ul#related-summary li:nth-of-type(3n){ margin-right:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }} </style> <script type='text/javascript'> //<![CDATA[ //Related Post var relnojudul = 0; var relmaxtampil = 6; var numchars = 120; var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}}; //]]> </script>

4. Jika ingin menampilkannya di bawah postingan, cari kode <data:post.body/> kemudian pastekan kode berikut ini di bawahnya.
 
<!-- Related Posts Santos Blog--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-post'> <div class='relhead'> <h4><span>Related Posts</span></h4> <div class='clear'/> <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;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related-summary'> <script type='text/javascript'>artikelterkait();</script> </ul> </div> </div> <div class='clear'/> </b:if> <!-- Related Posts End-->

5. Simpan template.
 
Mengatasi Gambar Blur (Buram) di Widget
 
Agar gambar (thumbnail) di widget related postsnya tidak blur, copy javascript berikut ini dan letakkan di atas kode </body>
 
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() {$('ul#related-summary li img').attr('src', function(i, src) {return src.replace( 's72-c', 's640' );});}); //]]> </script>

Kode di atas juga bisa untuk mengatasi gambar blur di widget-widget lain yang menyertakan gambar seperti widget recent post, random post, dll.
 
Caranya yaitu dengan menambahkan kode pengaturan CSS img untuk widget tersebut. Contohnya seperti berikut ini:
 
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() {$('ul#related-summary li img, #recent-posts img').attr('src', function(i, src) {return src.replace( 's72-c', 's640' );});}); //]]> </script>

Keterangan:
  • yang ditandai warna merah adalah contoh pengaturan CSS img untuk widget recent posts.
  • Sesuaikan dengan penulisan kode CSS img widget di blog anda.

Jika gambar masih blur, silahkan buka menu postingan, buka artikel pada mode html (bukan compose). Selanjutnya cari kode img src untuk gambar di postingan tersebut. Contohnya seperti di bawah ini:

<img src="https://1.bp.blogspot.com/-l0HR8uvfOZ4/XyK8JGL7Y9A/AAAAAAAAI0c/k0uYo-PkgGIZowsFKugwJuGj8iku2wPTwJGcKAAsWQQ/w640-h360/gambar.jpg"/>

Kalau sudah ketemu, ganti menjadi seperti berikut ini:

<img src="https://1.bp.blogspot.com/-l0HR8uvfOZ4/XyK8JGL7Y9A/AAAAAAAAI0c/k0uYo-PkgGIZowsFKugwJuGj8iku2wPTwJGcKAAsWQQ/s640/gambar.jpg"/>

Yang diganti hanya format gambarnya saja, yaitu:

w640-h360 (w...-h... )
 
Cukup diubah menjadi:

s640 (s... )
 
Untuk perubahan format gambar postingan terbaru yang kini mulai menggunakan kode blogger.googleusercontent.com, contoh cara penerapannya adalah seperti berikut ini:

src="https://blogger.googleusercontent.com/img/a/AVvXsEjzvCkgSNGU7lxl5Bd7wBtVQZidg4na2XVJSmgjvkgBiYlxwmd0epj9P-6cUtb2uJVRxq8qPgNsmJ_Oa4eky0kTZFx_o0Ae4BKGBkEbQvkOC40gv-LPD_l_vRpQkYfQEDqkB0RffuKJjpjhMv4rlLIy3BeRcJY7zXkYxGUxxWmaIiHByQiD2RjL_1cT=w640-h454"

Ganti menjadi seperti berikut ini:

src="https://blogger.googleusercontent.com/img/a/AVvXsEjzvCkgSNGU7lxl5Bd7wBtVQZidg4na2XVJSmgjvkgBiYlxwmd0epj9P-6cUtb2uJVRxq8qPgNsmJ_Oa4eky0kTZFx_o0Ae4BKGBkEbQvkOC40gv-LPD_l_vRpQkYfQEDqkB0RffuKJjpjhMv4rlLIy3BeRcJY7zXkYxGUxxWmaIiHByQiD2RjL_1cT=s640"

Hampir sama seperti sebelumnya. Kode width (w) dan height (h) cukup diganti dengan s.... agar widget dapat mengindeks gambar postingan tersebut dengan baik. Semoga bermanfaat.
Nughazi Media

Nughazi Media adalah media publikasi berbagai aplikasi ilmu pengetahuan, pendidikan dan agama dalam berbagai format digital.

Post a Comment

Peraturan berkomentar :
1. DILARANG melakukan SPAM pada KOMENTAR blog ini.
2. DILARANG memberikan komentar yang melanggar hukum Indonesia.
3. DILARANG memberikan komentar diluar pembahasan/OOT(Out of Topic).
4. DILARANG melakukan PROMOSI/IKLAN.
5. DILARANG menyebarkan informasi palsu/Hoax.

Previous Post Next Post