sexta-feira, 13 de janeiro de 2017

Related post responsive Gambar thumbnail

pemula related post gambar untuk

related post widget responsive gambar

Hoje vamos mostrar como adicionar related post com thumbnails responsive no seu template isso é bom se seu site for responsive ele vai redimensionar o widget para que possa ser visualizado as postagens relacionadas então se deseja adicionar isso no seu template siga os passos abaixo



Adicionando related post responsive Gambar Thumbnail 

Faça login no Blogger então va no menu modelo editar HTML 
com as teclas combinadas CTRL+F busque por </head> então copie e cole o seguinte código acima disso:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-post {margin:0 auto;padding:0;}
#related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
#related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;content:&#39;a0&#39;;background-color:#ccc}
#related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
.relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
#related-summary .news-text {display:none;}
ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:175px;height:170px;transition:opacity .2s ease}
ul#related-summary li a {display:block;}
ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
ul#related-summary li:hover img {opacity:0.96;}
ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
ul#related-summary li a.relinkjdulx:hover{color:#c00;}
@media only screen and (max-width:640px){
ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
ul#related-summary li:last-child{border-bottom:none;}
ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
@media screen and (max-width:384px){
ul#related-summary li img{display:none}}
</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="http://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>
<script type='text/javascript'>
$(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(//s[0-9]+(-c)?//,&quot;/w175-h100-c/&quot;))});
</script>
</b:if>

Agora Substitua o código HTML relacionadas Post Thumbnail Imagens seguintes Responsive sob o código <data: post.body /> o segundo ou terceiro ou acima, ou abaixo do código <div class='post-footer'> ou <div class='post-footer-line post-footer-line-2'> ou <div class='post-footer-line post-footer-line-3'> 


<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>

Então salve o template e pronto.