Artigos Relacionados - Versão 1

Todos nos, blogueiros temos a consequência de que os artigos relacionados são imensamente importantes, pois com eles você dá mais visibilidades aos seus artigos anteriores, fazendo com que o leitor ganhe mais interesse pelo seu blog relacionando os muitos artigos do seu blog. Os artigos relacionados são um gadget que costuma ser adicionado no footer (final) dos seus artigos e contem as imagens e os títulos de um ou vários artigos que estam relacionados com o que o leitor está a ler no momento.

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/AVvXsEh6h2CPjQP4LVhyphenhyphenBhAZlAC0-bDMv6mIbMdg0DjCnGTv8g_yRRWgejGt7W537MtWuT5DP7awkwI6XmvJyOxsC25RfW56_uYSOVihb4HkPvKgsu_V43Uls_DXFmUhZwLHYbdmv_-O3Jk0Va3b//"; 
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:

2- Para editar o numero de artigos relacionados que apresenta o widget basta alterar var maxresults=5; e mudar o "5" para o numero que pretende

3- Para alterar a emagem predefinida para artigos sem imagens substitua o URL:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6h2CPjQP4LVhyphenhyphenBhAZlAC0-bDMv6mIbMdg0DjCnGTv8g_yRRWgejGt7W537MtWuT5DP7awkwI6XmvJyOxsC25RfW56_uYSOVihb4HkPvKgsu_V43Uls_DXFmUhZwLHYbdmv_-O3Jk0Va3b// 

Espero que tenham gostado e até ao próximo artigo!