Nova Versão! Posts Relacionados com Efeito Hover no Blogger

Coloque no seu blog posts relacionados no final dos artigos com novo estilo e efeito hover que irá impressionar os visitantes

As mudanças visuais são constantes na web atual, prova disso, podemos notar nos principais e mais conhecidos sites e também nas redes sociais. Até consideravelmente exageradas porém necessárias, essas “adequações” são pertinentes devido ao exigente público que constantemente acessam as páginas e prezam pela eficiência, profissionalismo e beleza.

Como sempre exaltamos aqui, ferramentas e widgets com design destacado “ajuda” seu blog a estar entre os preferidos. E, para ajudá-lo a personalizar seu blog de maneira eficiente trazemos aqui mais um código que é imprescindível com relação a sua função e com design de nível elevado que se ajusta a qualquer que seja o tipo de blog.


Posts relacionados pode fazer toda a diferença!

Widget posts relacionados para colocar no final das postagens do blog, esse que tanto é visto em praticamente todos os blogs e com efeito hover, ao passar o mouse, transição de cores e um belíssimo contorno com borda inferior que o deixa muito mais completo e elegante. Mas não é só beleza, como você deve já estar informado, posts relacionados ajudam seu blog a realizar um propósito bastante almejado por todo blogueiro que é manter o visitante por mais tempo possível em suas páginas e “mostrando” aos buscadores que seu site é confiável.

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

Colocar Posts Relacionados com Efeito Hover no Final dos Artigos do Blogger

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

>> Clique no código do template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ABAIXO da tag encontrada, cole o seguinte código:

<!-- Script Related Post With Thumbnail -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#at-gambar{background:#f2f2f2;padding:12px;margin:6px 0 0;border:1px solid #f2f2f2;overflow:hidden;}#at-gambar h2{font-family:&quot;Oswald&quot;, Arial, Sans-Serif;font-weight:600;font-size:1.5em;padding:0 0 10px;margin:0}#at-gambar a{background:#f8f8f8;font-family:&#39;Oswald&#39;,Verdana,Sans-serif;color:#4b4b4b;box-shadow:0px 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;font-weight:400;border:1px solid #f8f8f8;text-decoration:none;margin:0 11px 5px 0;padding:6px;float:left;}#at-gambar a img{width:100px;height:98px;}.box-related{width:100px;padding-left:3px;height:50px;border:0px none;margin:0 0 5px;padding:0pt;line-height:normal;font-stretch:normal;}#at-gambar a:last-child{margin-right:0px;}#at-gambar a:nth-child(1):hover{box-shadow:0px -3px 0px#E50700 inset;}#at-gambar a:nth-child(2):hover{box-shadow:0px -3px 0px #0084C5 inset;}#at-gambar a:nth-child(3):hover{box-shadow:0px -3px 0px #6CAC00 inset;}
#at-gambar a:nth-child(4):hover{box-shadow:0px -3px 0px #00C3B7 inset;}
#at-gambar a:nth-child(5):hover{box-shadow:0px -3px 0px #FF8168 inset;}#at-gambar a:hover{box-shadow:0px -3px 0px#FF8168 inset;}#at-gambar a:nth-child(1):hover,#at-gambar a:nth-child(2):hover,#at-gambar a:nth-child(3):hover,#at-gambar a:nth-child(4):hover,#at-gambar a:nth-child(5):hover,#at-gambar a:hover{background:#fff;}#at-gambar img{width:100%;margin:0;padding:0}
#posting{width:auto !important;max-width:100%;margin:15px 20px 15px 0px;}
</style>
<script> var defaultnoimage = &quot;http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s100/picture_not_available.png&quot;; var maxresults = 4; var splittercolor = &quot;#d3d3d3 &quot;; var relatedpoststitle = &quot;Posts Relacionados :&quot;; </script>
<script src='http://yourjavascript.com/1376828511/terkait-v8.js' type='text/javascript'/>
</b:if>

Configuração das Cores e Estilos

Destacado em VERDE, cor de fundo da área dos posts relacionados.

Destacado em AZUL, cor de fundo dos posts relacionados quando estáticos.

Destacado em VERMELHO, cores das sombras inferiores dos posts relacionados ao passar o mouse.

Destacado em ROSA, cor de fundo dos posts relacionados ao passar o mouse.

Destacado em AMARELO, ajuste para a quantidade de posts que desejar que apareça.

Destacado em LARANJA, título do widget (altere caso desejar).

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

>> Logo ABAIXO do trecho encontrado, cole o seguinte código:

<div id='at-gambar'>
    <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=999&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
    </div>

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

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


Com a conclusão do tutorial, imediatamente serão exibidos posts relacionados com efeito hover em todas as postagens de seu blog. Porém, como em todo código que utiliza scripts há a possibilidade de conflitos com outras funcionalidades, principalmente em templates que hajam muitas personalizações. Contudo, experimente em um blog de testes antes de aplicar a seu blog principal e, em caso de dúvidas, comente nessa postagem.

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