dicas blog
Home » , , » Como adicionar artigos relacionados lista hover no blog e blogger

Como adicionar artigos relacionados lista hover no blog e blogger

1
Como  adicionar    Artigos   relacionados   no final  das    postagens  no rodapé do  blog.   faz  com  que  ao  usuários  visitantes  do   nosso  blog   fiquem  mais  tempo  na  pagina   e  se   interessem  por  algo   a  mais.  isso  é    importante  para  blog   no  geral,   se  você   criou   um  blog,  ou  tem  a  um  tempo    isso  pode   ser  útil   para   você.  melhorando a  imagem  do   seu  blog  e  organizados   as   coisas  por   ai esse  estilo  tem  uma  lista  de texto  e  um  efeito  hover,  bem  legal   para   personalizar  o  roda     das  postagens , você  pode  
escolher   cor   e  numero  de   postagens   relacionadas  que  vão  aparecer  no seu  blog   e  a  cor  siga  o  tutorial  abaixo .
Demo

Passo 1. va ao Modelo >> Editar HTML e marque o "Expandir modelos de widgets"
Passo 2. Localize a tag abaixo

</head>

Passo 3. E logo abaixo dele, cole o seguinte código:



<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Artigos relacionados&quot;;
</script>
<script src='https://dl.dropboxusercontent.com/u/261625350/related_posts_bj.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->


procure  por  <div class='post-footer'>  e Logo abaixo , cole o código abaixo


Se  não  encontra  procure  <div class='post-footer-line post-footer-line-1'>


existem  duas  linhas   dessas post-footer-line-1'>,  adicione  abaixo  da   segunda linha abra todas as  setas  pretas do  seu  template blog  para encontrar com  mais  facilidade o  trecho.


<!-- Related Posts Code Start-->
<!--Remove-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->



para  trocar  a  cor  do  hover

background-color: #1399CF;

para trocar  a  cor  da  bordinha  hover  procure

border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}

e  troque  pela  cor  que  preferir

Para trocar  o  numero de   artigos procure  pelo  trecho  abaixo  o   
maxresults=5;
 
Depões  de tudo  feito  ficara  assim

1 comentários:

  1. Deus certo no meu blog ,parabéns pelo artigo procurei em todo lugar e não dava certo ,mas agora deu aqui.

    ResponderExcluir