Cara Membuat Related Post Dengan Gambar

Cara Membuat Related Post Dengan Gambar - Kini saya akan membahas tutorial mengenai cara membuat related post gambar atau membuat postingan terkait thumbnail. Related post gambar digunakan menampilkan postingan lain yg memiliki label atau tag sama lengkap dengan gambar, sehingga pengunjung blog dapat tertarik untuk mengklik dan membaca postingan lainnya. Membuat Related post gambar juga dapat meningkatkan jumlah hits postingang lama. Bagi yg ingin tahu cara membuat related post gambar, simak tutorial dibawah ini.

CSS Related Post Gambar

• Copy dan pastekan css related post gambar berikut di atas ]]></b:skin>

#related-posts{float:center;text-transform:none;height:20em;min-height:100%;padding-top:5px;padding-left:5px}
#related-posts img{padding:1px;border-radius: 4px;}
#related-posts h4{font-weight:400;text-transform:uppercase;padding:10px;background:#ff5848;color:#fff;border:1px solid #ff5848;border-radius:4px;font-size:14px!important;}
#related-posts a{margin:10px 0 0 0!important;color:#000;height:170px;width:100px;padding:10px;font-size:12px;}
#related-posts a:hover{height:170px;width:100px;color:#fff;background-color:#ff5848}.mobile-date-outer&gt;div{padding-left:10px}

• Klik simpan

Script Related Post Gambar

• Kemudian cari lagi kode </head> dan pastekan script related post gambar berikut di atasnya

<script type='text/javascript'> //<![CDATA[ function related_results_labels_thumbs(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];t.async=true;relatedTitles[relatedTitlesNum]=l.title.$t;try{thumburl[relatedTitlesNum]=l.gform_foot.url}catch(r){s=l.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),thumburl[relatedTitlesNum]=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1WvZSDURUXfHqKjZIX47JL7_UAVoT6wP5k0Iby7Ru8iUL7C3o45NbJqjnNd123z5qgbutlkvj0jgHNPk61gzOI7OiM-TJBfAJP6gmt8KnJTBVR4ajcpxJSm3aci1xvtTiW7diZT4Kphw/s1600/tapike-icon.png"}50<relatedTitles[relatedTitlesNum].length&&(relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...");for(var i=0;i<l.link.length;i++)"alternate"==l.link[i].rel&&(relatedUrls[relatedTitlesNum]=l.link[i].href,relatedTitlesNum++)}}function removeRelatedDuplicates_thumbs(){for(var e=[],t=[],l=[],r=0;r<relatedUrls.length;r++)contains_thumbs(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],t.length+=1,l.length+=1,t[t.length-1]=relatedTitles[r],l[l.length-1]=thumburl[r]);relatedTitles=t,relatedUrls=e,thumburl=l}function contains_thumbs(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printRelatedLabels_thumbs(){for(var e=0;e<relatedUrls.length;e++)relatedUrls[e]!=currentposturl&&relatedTitles[e]||(relatedUrls.splice(e,1),relatedTitles.splice(e,1),thumburl.splice(e,1),e--);var t=Math.floor((relatedTitles.length-1)*Math.random()),e=0;for(0<relatedTitles.length&&document.write("<div id='related-posts'> "),document.write("<ul>");e<relatedTitles.length&&20>e&&e<maxresults;)document.write(' <li><a title="'+relatedTitles[t]+'"'),document.write(' href="'+relatedUrls[t]+'"><img class="related_img" width="100" height="100" src="'+thumburl[t]+'"/><br/><div id="related-title"> '+relatedTitles[t]+"</div> </a></li> "),t<relatedTitles.length-1?t++:t=0,e++;document.write("</ul> </div> "),relatedUrls.splice(0,relatedUrls.length),thumburl.splice(0,thumburl.length),relatedTitles.splice(0,relatedTitles.length)}imgr=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1WvZSDURUXfHqKjZIX47JL7_UAVoT6wP5k0Iby7Ru8iUL7C3o45NbJqjnNd123z5qgbutlkvj0jgHNPk61gzOI7OiM-TJBfAJP6gmt8KnJTBVR4ajcpxJSm3aci1xvtTiW7diZT4Kphw/s1600/tapike-icon.png"],aBold=showRandomImg=!0,summaryPost=400,numposts2=numposts1=summaryTitle=20;var relatedTitles=[],relatedTitlesNum=0,relatedUrls=[],thumburl=[]; //]]> </script>

HTML Related Post Gambar

• Sekarang cari lagi kode <div class='post-footer'> dan pastekan html related post gambar dibawah ini diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=related_results_labels_thumbs&amp;max-results=15&quot;' type='text/javascript'/></b:loop><script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
  </script></div></b:if>

• Kemudian klik simpan

Pengaturan

Tulisan warna merah adalah berapa jumlah postingan secara yg akan ditampilkan, sedangkan tulisan warna biru adalah jumlah Related post gambar yg akan tampil. Jika ingin membuat tampil secara berurut samakan nilai tulisan warna merah dan biru. Sedangkan bila ingin muncul secara acak, nilai tulisan warna merah harus lebih besar dari tulisan warna biru. Demikianlah postingan saya mengenai cara membuat related post gambar atau cara membuat postingan terkait dengan thumbnail. Semoga artikel ini dapat bermanfaat bagi kita semua.