Coloque no seu blog posts relacionados no final dos artigos com novo estilo e efeito hover que irá impressionar os visitantes.
Leia também
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.
>> Acesse seu Blogger, vá em “Modelo” e depois “Editar HTML”.
>> Logo ABAIXO da tag encontrada, cole o seguinte código:
<!– Script Related Post With Thumbnail –>
<b:if cond=’data:blog.pageType == "item"’>
<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:"Oswald", Arial, Sans-Serif;font-weight:600;font-size:1.5em;padding:0 0 10px;margin:0}#at-gambar a{background:#f8f8f8;font-family:'Oswald',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 = "http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s100/picture_not_available.png"; var maxresults = 4; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "Posts Relacionados :"; </script></b:if>
>> 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 != "true"’> </b:if> <script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"’ type=’text/javascript’/> </b:loop> <script type=’text/javascript’> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div>
>> 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.
