Membuat Artikel Terkait Bergambar Responsive Di Bawah Postingan Blog

Artikel terkait atau lebih dikenal dengan nama Related Post banyak kita jumpai pada web atau blog yang kita kunjungi, widget ini terletak di simpulan kalimat atau di bawah postingan Blog. Menariknya, widget ini dapat membantu menaikan pageview alasannya ialah melalui related post pengunjung dapat menemukan dan membaca artikel-artikel kita lainnya.

Artikel yang akan ditampilkan pada related post per label, widget ini mempunyai fitur diataranya:

Gambar mempunyai effect blur
Fast loading
Effect hover pada subtittel
Responsive

Terkait :

Widget yang sedang kita bahas ini mempunyai tampilan menyerupai pada Related post yang ada pada blog saya ini, untuk pemasangannya Anda dapat mengikuti langkah-langkahnya dibawah ini ;

1. Log-in keakun Blogger

2. Pilih Template, kemudian klik Edit HTML

3. Selanjutnya Anda cari kode ]]></b:skin>, untuk memudahkan pencarian gunakan tombol CTRL+F, kemudian copy code CSS dibawah ini dan pastekan diatasnya

/*---Related postaak---*/
@media (max-width:700px) {
width:100% !important;}
#related_posts{padding:0;overflow:hidden;display:inline;}
#related_posts h4{padding-left:1px;padding-bottom:10px;color:#333;font-family:cursive;font-size:20px;line-height:23px;text-align:left; letter-spacing:normal;}
ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}
ul#relpost_img_sum li{list-style:none;padding:3px;margin:0;width:335px;height:159px;float:left;display:inline;}
ul#relpost_img_sum li a{display:block}
ul#relpost_img_sum li img{float:left;width:450px;height:120px;margin-right:15px;padding:0 auto;border:none;filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}
ul#relpost_img_sum li a.relinkjdulx{display:block;overflow:hidden;margin-top:105px;background-color:rgba(32, 32, 32, 0.77);font-weight:normal;font- size:14px;width:329px;line-height:20px; float:left;text-align:center;position: absolute;padding: 5px 0px 2px 5px;}
ul#relpost_img_sum li img:hover {float:left;width:460px;height:130px;margin-right:15px;border:none;filter:alpha(opacity=25); - moz-opacity:0.3; opacity:0.3;}
ul#relpost_img_sum li a.relinkjdulx:hover{display:block;overflow:hidden;margin-bottom:3px;background-color:rgba(98, 112, 119, 0.35);font-weight:normal;font size:14px;width:329px;line-height:20px; float:left;text-align:center;}
@media screen and (max-width:700px){u#relpost_img_sum li{padding:3px;margin:0;width:335px;height:170px;}ul#relpost_img_sum li img{min width:100%;float:left;border:none;!important;width:650px;height:150px;margin-right:15px;!important}ul#relpost_img_sum li a.relinkjdulx{min-width:100%;float:left;text align:center;display:block;overflow:hidden;background-image:none;font-weight:normal;!important; margin-bottom:3px;font-size:14px;width:300px;line-height:20px;!important;}}

4. Langkah berikutnya, Anda cari aba-aba <data:post.body/> , kemudian Anda copy aba-aba dibawah ini dan pastekan dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;var numpost = 4;var numchars = 0;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrsTjJFAUnJcqWJhcqTe_w5soQ3xJFU3q2gG0vDR9hFV6LakKFRsvuNoIgPwVrh2pb1qS1Y4BEbTdZHhBfV65cpJcfdRRyZyG6QBtSGiJPYiCfZIFJTn8xJjdOCOxtvak8qtJr8HUQrc/s1600/grey.png"}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<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><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==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
<div style='@media (max-width:810px){width:100% !important;}width:800px;height:320px; margin-bottom:10px; margin-top:15px; @media screen and (max-width:810px {width:800px;height:510px; margin-bottom:10px; margin-top:15px;}}'>
<div id='related_posts'>
<h4>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=19"' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
</b:if>

5. Simpan Template

Penjelasan:

4 ialah pengaturan jumlah postingan yang ditampilkan

Demikian saya sampaikan tutorial membuat Artikel Terkait Bergambar Responsive di Bawah Postingan Blog, terimakasih sudah berkunjung dan supaya bermanfaat.

Sumber http://www.websiteedukasi.com/