Cara Mudah Membuat Widget Related Post Keren Dengan Gambar (Thumbnail)

Artikel Lain Yang Menarik Untuk diBaca Juga

 Diantara sekian jenis widget di blog, widget related posts 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 memang 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 memang lebih menarik jika disertai dengan gambar (thumbnail) sehingga akan langsung terlihat oleh pembaca blog kita. Namun sayangnya, perubahan 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 artikel kali ini, kita akan belajar mengenai tutorial cara membuat widget related post bergambar dengan style grid keren dan responsive. Tampilan gambarnya juga jelas alias tidak blur jika anda memahami ulasan yang akan saya jelaskan di bawah ini. Langsung saja simak cara pemasangannya berikut ini.

Cara Memasang Widget Related Posts Grid Keren Bergambar

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 tsb pada kode di atas. 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, berarti anda belum membaca artikel saya yang ini (Cara Mengatasi Gambar Tidak Muncul di Beberapa Widget Blog). 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.

Terima kasih Telah membaca Blog saya, semoga bermanfaat bagi pembaca yang budiman