Como pode ver na imagem em cima cada artigo relacionado tem um hover com o titulo do mesmo.
Como instalar:
1º- Acesse ao painel do blog a que quer adicionar este widget, clique no separador Modelo » Editar HTML » Continuar procure por ]]></b:skin> e cole logo ACIMA o seguinte código:
/* Related Posts Widget
----------------------------------------------- */
ul
#related-posts{
font-family:Helvetica,Arial,sans-serif !important;
font-size:10px !important;
list-style: none !important;
margin: 20px 0 !important;
padding: 0 !important;
text-transform: none !important;
}
ul
#related-posts li{
float: left !important;
height: auto !important;
margin:0 15px !important;
padding: 2px 1px 4px !important;
}
*html ul
#related-posts li{
margin:0 13px !important;
}
ul
#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
border: 2px solid
#FFFFFF !important;
display: block !important;
height: 72px !important;
position: relative !important;
width: 72px !important;
}
ul
#related-posts li a {
color:
#474C51 !important;
text-decoration: none !important;
text-shadow: 0 1px 0
#FFFFFF !important;
}
ul
#related-posts li .overlay {
height: 66px !important;
line-height: 14px !important;
padding:6px 0 0 6px !important;
position: absolute !important;
width: 66px !important;
z-index: 10 !important;
}
ul
#related-posts li a:hover .overlay {
background:
#fff !important;
display: block !important;
opacity:0.9 !important;
}
ul
#related-posts li img {
bottom: 0 !important;
padding:0px !important;
}
ul
#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
2º- De seguida clique em e procure pelo seguinte código:
<b:includable id= 'backlinks' var = 'post' > |
E substitua-o por:
<b:includable id= 'RelatedPosts' var = 'post' > <!--remove--><b: if cond= 'data:blog.pageType == "item"' > <script type= 'text/javascript' > var defaultnoimage= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhojkdFWxMk7wrlQXgkWPLw2Bt4o3GbjIQjtjjr29IhgxGNG1ZfmEs1YZ9mpwpUEd-8Py2grBSIjW68Mu2pM6I8lVQ2EIq7WLJ0Cby53Hv1D0DRB4r3ZtR_5FFFxwODy_UEoizTz9ISmx/" ; var maxresults=6; </script> <script src= 'http://f.cl.ly/items/0w31321a473E2G0m3S2U/related_post_with_hover.js' type= 'text/javascript' /> <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=6"' type= 'text/javascript' /> </b:loop> <script type= 'text/javascript' > removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs( "<data:post.url/>" ); </script> </b: if > <!--remove--> <div style= 'clear:both' /> </b:includable> <b:includable id= 'backlinks' var = 'post' > |
3º- Agora procure por um destes códigos:
<div class= 'post-footer' > OU <div class= 'post-footer-line post-footer-line-1' > OU <div class= 'post-footer-line post-footer-line-2' > OU <div class= 'post-footer-line post-footer-line-3' > |
E cole logo ABAIXO de um deles o seguinte código:
<b: if cond= 'data:blog.pageType == "item"' > <h3> <span style= 'font-size: x-large;' >Artigos Relacionados:</span></h3> <b:include data= 'post' name= 'RelatedPosts' /> </b: if > |
Personalizações:
1- Se quiser que os artigos relacionados apareçam em todas as páginas do seu blog e não só nos artigos remova o <b:if cond='data:blog.pageType == "item"'> e </b:if> do ultimo código que apresento que cima, ficando assim:
3- Para alterar a emagem predefinida para artigos sem imagens substitua o URL:
https:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhojkdFWxMk7wrlQXgkWPLw2Bt4o3GbjIQjtjjr29IhgxGNG1ZfmEs1YZ9mpwpUEd-8Py2grBSIjW68Mu2pM6I8lVQ2EIq7WLJ0Cby53Hv1D0DRB4r3ZtR_5FFFxwODy_UEoizTz9ISmx/
Creditos:Dicas Box |
0 Comentários:
Postar um comentário
Deixem seus comentarios.