Postagens Relacionadas no Blogger com Data, Comentários e Efeito Hover

Postagens Relacionadas com Data, Comentários e Efeito Hover
Coloque postagens relacionadas no final dos artigos com um design completo de informações.

A finalidade de conter postagens relacionadas em seu blog vai além do limite de deixa-lo chamativo. Sua importância tornou-se muito grande nos dias de hoje sendo um dos códigos mais procurados e mais solicitados entre o meio da blogosfera. Aqui no blog, já falamos muito a respeito, mas não é demais continuar a tocar nesse ponto. Quando o blog contém a opção de mostrar artigos relacionados àquele visitado, a tendência é de gerar cliques em mais postagens além daquela visitada.

E, nesse momento trazemos mais um sensacional código. Postagens relacionadas com as opções de data, número de comentários e para complementar um efeito bem elegante ao passar o mouse. Como você pode notar na imagem de apresentação, as opções se encaixam em quadrados, e ao passar o mouse nos mesmos, ficarão com o efeito transition/opacity, efeito esse que dá a impressão de uma sombra escura e clareando o quadrado quando tocado.

Se interessou e gostaria de ver em funcionamento em seu blog? Veja a seguir como é simples de fazer.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog."


Instalando em seu blog


>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código do template, pressione "CTRL+F" e pesquise por </head>

>> Logo ACIMA da tag encontrada cole o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
* Caso seu blog já possuir a biblioteca jquery instalada, desconsidere essa parte.

>> Pesquise agora por <div class='post-footer'>
* Você poderá encontrar dois trechos como este, caso encontre opte pelo segundo.

>> Logo ABAIXO do trecho encontrado cole o seguinte código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var _0x5db5=["C 2j(a){(C(e){2 f={15:\x22\x22,V:5,1l:5,17:5,E:\x22\x22,6:14,13:\x22\x22,12:\x221O\x22,N:\x22\x22,19:\x222x 1i\x22,1d:\x221H://1.2y.1J.20/-2a/2r/2u/2v/2w/2B.2C\x22,1k:1I,1m:[\x221K\x22,\x221L\x22,\x221N\x22,\x221P\x22,\x221Q\x22,\x221R\x22,\x221S\x22,\x221T\x22,\x221U\x22,\x221W\x22,\x221X\x22,\x221Y\x22],1a:\x2225 1i\x22,16:\x22\x22,1o:2s};f=e.2t({},f,a);2 k=0,b=14,g=14;3(!f.E){1n.1G(\x27\x3CA Z=\x22F-R\x22\x3E\x3C/A\x3E\x27);f.E=\x22#F-R\x22}2 c=C(x,n){k++;3(x.U.W){J(2 o=0;o\x3Cx.U.W.z;o++){2 u=x.U.W[o];2 q=\x22\x22;J(2 m=0;m\x3Cu.18.z;m++){3(u.18[m].1e==\x2224\x22){q=u.18[m].L;28}}2 p=u.2i.$t.O(0,10);2 l=p.O(0,4);2 w=p.O(5,7);2 s=p.O(8,10);2 r=f.1m[1f(w,10)-1];2 y=u.2z$2A.$t;2 t=u.X.$t;3(\x221j$1c\x22Y u){2 v=u.1j$1c.11.T(/\x5C/s[0-9]+\x5C-c/g,\x22/s\x22+f.1k+\x22-c\x22)}K{2 v=f.1d}3(1M.L.1r()!=q.1r()){i(q,t,v,l,s,y,r)}}}3(k\x3E=f.6.z){g.G(\x22B\x22,\x22\x22);e(\x22#F-P-1g\x22,b).1h();3(f.V\x3E0){e(\x22Q:1V(\x22+(f.V-1)+\x22)\x22,g).1h()}}};2 i=C(p,v,w,l,t,x,r){2 q=e(\x22Q\x22,g);J(2 o=0;o\x3Cq.z;o++){2 u=e(\x22a\x22,q.H(o));2 s=j(u);3(u.G(\x22L\x22)==p){h(u,++s);J(2 n=o-1;n\x3E=0;n--){2 m=e(\x22a\x22,q.H(n));3(j(m)\x3Es){3(o-n\x3E1){q.H(n).1Z(q.H(o))}M}}3(o\x3E0){q.H(0).21(q.H(o))}M}}g.22(\x27\x3CQ\x3E\x3Ca B=\x2223\x22 L=\x22\x27+p+\x27\x22 X=\x22\x27+(f.N?f.N.T(\x22\x5Cd\x22,1):\x22\x22)+\x27\x22\x3E\x3CD B=\x2226\x22\x3E\x3C27 1b=\x22\x27+v+\x27\x22 29=\x22\x27+w+\x27\x22/\x3E\x3C/D\x3E\x3C1p\x3E\x27+v+\x27\x3C/1p\x3E\x3C/a\x3E\x3CA B=\x222b\x22\x3E\x3CD B=\x222c\x22\x3E\x27+t+\x22 \x22+r+\x22 \x22+l+\x27\x3C/D\x3E\x3CD B=\x222d\x22\x3E\x3Ca L=\x22\x27+p+\x27#2e-2f\x22 2g=\x222h\x22\x3E\x27+x+\x22\x3C/a\x3E\x3C/D\x3E\x3C/A\x3E\x3C/Q\x3E\x22)};2 j=C(l){2 m=1f(l.G(\x221q\x22));M m\x3E0?m:1};2 h=C(l,m){l.G(\x221q\x22,m);3(f.N){l.G(\x22X\x22,f.N.T(\x22\x5Cd\x22,m))}3(f.16){l.G(\x22B\x22,f.16+m)}};2 d=C(){3(f.E!=\x22#F-R\x22){2 l=e(f.E);3(l.z!=1){M}b=e(\x27\x3CA Z=\x22F-R\x22\x3E\x3C/A\x3E\x27).I(l)}K{b=e(f.E)}3(!f.6){f.6=[];e(\x27a[1e=\x222k\x22]:2l(\x27+f.1l+\x22)\x22).2m(C(){2 n=e.2n(e(2o).2p().T(/\x5Cn/g,\x22\x22));3(e.2q(n,f.6)==-1){f.6[f.6.z]=n}})}3(f.6.z==0\x26\x26!f.1a){M}3(f.6.z==0){e(\x22\x3CS\x3E\x22+f.1a+\x22\x3C/S\x3E\x22).I(b)}K{3(f.19){e(\x22\x3CS\x3E\x22+f.19+\x22\x3C/S\x3E\x22).I(b)}}3(f.13){e(\x27\x3CA Z=\x22F-P-1g\x22\x3E\x27+f.13+\x22\x3C/A\x3E\x22).I(b)}g=e(\x22\x3C1s \x22+(f.12?\x27B=\x22\x27+f.12+\x27\x22\x27:\x22\x22)+\x22\x3E\x3C/1s\x3E\x22).I(b);3(f.6.z==0){e.1t({11:f.15+\x22/1u/P/1v/\x22,1w:{\x221x-1y\x22:f.17,1b:\x221z-Y-1A\x22},1B:c,1C:\x221D\x22,1E:1F})}K{J(2 m=0;m\x3Cf.6.z;m++){e.1t({11:f.15+\x22/1u/P/1v/\x22,1w:{2D:f.6[m],\x221x-1y\x22:f.17,1b:\x221z-Y-1A\x22},1B:c,1C:\x221D\x22,1E:1F})}}};3(f.1o){e(2E).2F(d)}K{e(1n).2G(d)}})(2H)};","|","split","||var|if|||tags|||||||||||||||||||||||||||||length|div|class|function|span|containerSelector|related|attr|eq|appendTo|for|else|href|return|relevantTip|substring|posts|li|postsx|h4|replace|feed|maxPosts|entry|title|in|id||url|loadingClass|loadingText|null|blogURL|postScoreClass|maxPostsPerTag|link|relatedTitle|recentTitle|alt|thumbnail|rlpBlank|rel|parseInt|loadingtext|remove|Posts|media|rlt_thumb|maxTags|rlt_monthNames|document|onLoad|strong|score|toLowerCase|ul|ajax|feeds|summary|data|max|results|json|script|success|dataType|jsonp|cache|true|write|http|70|blogspot|Jan|Fev|location|Mar|loadingnya|Abr|Mai|Jun|Jul|Ago|Set|gt|Out|Nov|Dez|after|com|before|append|jdlunya|alternate|Recent|gmbrrltd|img|break|src|htG7vy9vIAA|infonya|dt|jkmt|comment|form|target|_blank|published|relatedPostsWidget|tag|lt|each|trim|this|text|inArray|Tp0KrMUdoWI|false|extend|AAAAAAAABAU|e7XkFtErqsU|s1600|Related|bp|thr|total|grey|gif|category|window|load|ready|jQuery","","fromCharCode","replace","\x5Cw+","\x5Cb","g"];eval(function (_0xd509x1,_0xd509x2,_0xd509x3,_0xd509x4,_0xd509x5,_0xd509x6){_0xd509x5=function (_0xd509x3){return (_0xd509x3<_0xd509x2?_0x5db5[4]:_0xd509x5(parseInt(_0xd509x3/_0xd509x2)))+((_0xd509x3=_0xd509x3%_0xd509x2)>35?String[_0x5db5[5]](_0xd509x3+29):_0xd509x3.toString(36));} ;if(!_0x5db5[4][_0x5db5[6]](/^/,String)){while(_0xd509x3--){_0xd509x6[_0xd509x5(_0xd509x3)]=_0xd509x4[_0xd509x3]||_0xd509x5(_0xd509x3);} ;_0xd509x4=[function (_0xd509x5){return _0xd509x6[_0xd509x5];} ];_0xd509x5=function (){return _0x5db5[7];} ;_0xd509x3=1;} ;while(_0xd509x3--){if(_0xd509x4[_0xd509x3]){_0xd509x1=_0xd509x1[_0x5db5[6]]( new RegExp(_0x5db5[8]+_0xd509x5(_0xd509x3)+_0x5db5[8],_0x5db5[9]),_0xd509x4[_0xd509x3]);} ;} ;return _0xd509x1;} (_0x5db5[0],62,168,_0x5db5[3][_0x5db5[2]](_0x5db5[1]),0,{}));
//]]>
</script>
<div id='artikelterkaitmkr'>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Artikel Terkait",
recentTitle: "Posts Relacionados",
containerSelector: "#artikelterkaitmkr",
blogURL: "http://SEUBLOG.blogspot.com.br/",
maxPosts: 4,
maxPostsPerTag:4,
rlt_thumb: 120
});
});
//]]>
</script>
</div>
</b:if>
<br/>
Configuração, ajuste a seu gosto!
maxPosts: 4, quantidade de postagens que aparecerão.
maxPostsPerTag:4, quantidade de postagens por categoria.
http://SEUBLOG.blogspot.com.br/, substitua pelo link do seu blog.

>> Pesquise agora por ]]></b:skin>

>> Logo ACIMA do trecho encontrado cole o seguinte código:
/* ----- CSS POSTS RELACIONADOS HOVER ----- */
#related-postsx h4{margin:0;padding:2px 5px;font-size:14px}
#related-postsx ul,#related-postsx li{list-style:none;margin:0;padding:0;overflow:hidden}
#related-postsx ul.loadingnya{width:100%;height:50px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqcxX5OARsopTPBd4OFGYq750FJw2sPmCn1hNpayQWkgpZNFD68D_8nXkiAMb31YhLyXtGjCEkYmmzUxdJFRj5DWl-M5LZ5pn57Ayz2ip6O2ERqatulPkv7PqTf1Ah26Gwf0KHYNNMA0/s1600/loading-32-v1.gif) no-repeat 50% 50%}
#related-postsx li{position:relative;float:left;width:24%;margin:0.5%;height:130px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height: 15px}
#related-postsx img,#related-postsx .gmbrrltd{width:100%;height:100%;display:block}
#related-postsx strong,#related-postsx img{-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s}
#related-postsx img{-khtml-opacity:0.3;-moz-opacity:0.3;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3}
#related-postsx li:hover img{-khtml-opacity:0.8;-moz-opacity:0.8;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(opacity=80)&quot;;filter:alpha(opacity=80);opacity:0.8}
#related-postsx strong{position:absolute;z-index:2;left:0;top:0;padding:0 5px;height:100%;color:white}
#related-postsx .gmbrrltd{background:black}
#related-postsx .jkmt a{position:absolute;z-index:2;bottom:5px;right:5px;padding:0 20px 0 0;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxI1cOy6pPRARtmADm5EMW8dmiDW_tzoSeK18XEZsmaWf5fpk1SiQrZhPdOE7ZAJKygXoIdtQVtK5vjBU5A59lsRBPUjDnIW7RFNXd-KkeBqE0mideGdam680O2KQCcpqkijI7rAV42c/s20/comment.png) no-repeat 100% 0;line-height:20px}
#related-postsx .dt{position:absolute;bottom:5px;z-index:3;left:5px;color:white;line-height:20px}
* Em VERMELHO, estilo do título "Posts Relacionados".

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN