dicas blog
Home » , , » Como colocar efeito hover no inicio postagens recentes postagens antigas

Como colocar efeito hover no inicio postagens recentes postagens antigas

0
nesse tutorial  vamos  ver   como  personalizar  os botões home do blog  e  postagens  mais  antigas  e  postagens  mais  recentes, esses   são  os  botões  que  ficam no final  das  postagens  blog.  os originais  tem  um formato  bem  simples,  somente  com  link mas  hoje  vamos  personalizar com efeito hover  e transformar  eles em  botões  chamativos . para  deixa  mais do seu  jeito o Blogger  Para ficar  mais fácil  aos  visitantes  a encontrarem  paginas  e  postagens  Mais  antigas  e recentes  e  voltar   ao inicio do  blogger. Se você  gosta  de  personalização  cores  e tem seu  próprio  estilo,  essa  dica é ótimo  Para  os negócios, Bom vamos indo ao que interessa é fácil  de  fazer  isso basta procurar Por esse trecho   #blog-pager {  e  logo  abaixo dele  cole  o código abaixo.


/* Navegação com efeito hover degradê - http://nempareceblog.blogspot.com.br */
    #blog-pager {
    clear:both;
    text-align: center;
    margin:0px auto;
    padding:10px;
    }
    #blog-pager a:link, #blog-pager a:visited{
    color: #ffffff; /* cor da fonte */
    font-size: 16px; /* tamanho da fonte */
    padding:5px;
    background-color: #8BC2C9; /* cor do fundo */
    -moz-border-radius:10px; /* bordas arredondas, apague se não quiser */
    -khtml-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    }
    #blog-pager a:hover{
    color: #ffffff; /* cor da fonte hover*/
    padding:5px;
    background: #BFCED5; /* fundo hover, apague o código abaixo até } se não quiser degradê */
    background: -webkit-gradient(linear, left top, left bottom, from(#BFCED5), to(#8BC2C9));/* webkit browsers */
    background: -moz-linear-gradient(top, #BFCED5, #8BC2C9);/* firefox3.6+ */
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BFCED5', EndColorStr=' #8BC2C9');/* IE */
    }
    #blog-pager-newer-link {
    float: left;
    }
    #blog-pager-older-link {
    float: right;
    }

Caso  encontre dificuldades o  código  vai   abaixo  disso } como na imagem abaixo no meu caso.

Bom era  isso  até a  próxima   duvidas é  só perguntar.

0 comentários:

Postar um comentário