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/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:

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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhojkdFWxMk7wrlQXgkWPLw2Bt4o3GbjIQjtjjr29IhgxGNG1ZfmEs1YZ9mpwpUEd-8Py2grBSIjW68Mu2pM6I8lVQ2EIq7WLJ0Cby53Hv1D0DRB4r3ZtR_5FFFxwODy_UEoizTz9ISmx/

Creditos:Dicas Box

Autor : Unknown ~ Isso Assim - De Louco Falta Pouco

Artigo Artigos Relacionados - Versão 1 Publicado Por Unknown no dia 19 de julho de 2012