Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 28 de outubro de 2012

    Botão de paginação estilo youtube

    Bom galera hoje vou encinar a vocês como personalizar o botão de paginação do seu blog,  esse estilo é muito elegante e são usados no Youtube, no Blogger e atpe mesmo no Google+  e agora usado também aqui no TB, tem efeitos CSS, bordas arredondadas, sombra e etc..., veja a imagem de exemplo abaixo:



    OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.

    Vamos o Tutorial:



    1º- Clique em Editar HTML e expandir modelos de widgets.
    2º- Aperte Ctrl + F e procure por ]]></b:skin> e cole antes o  seguinte código.

    /*Botones en los enlaces de Navegación*/
    a.home-link, a.blog-pager-newer-link, a.blog-pager-older-link {
    display:inline-block;
    border:1px solid #DDD;
    border-radius:3px;
    text-shadow:0 1px 1px #fff;
    text-decoration:none;
    font: bold 11px Sans-Serif;
    padding:6px 10px;
    white-space:nowrap;
    vertical-align:middle;
    color: #666;
    background: #F1F1F1;
    }
    a.home-link:hover, a.blog-pager-newer-link:hover, a.blog-pager-older-link:hover, a.home-link:focus, a.blog-pager-newer-link:focus, a.blog-pager-older-link:focus {
    border-color: #999;
    background: -webkit-linear-gradient(top, white, #E0E0E0);
    background: -moz-linear-gradient(top, white, #E0E0E0);
    background: -ms-linear-gradient(top, white, #E0E0E0);
    background: -o-linear-gradient(top, white, #E0E0E0);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    }
    a.home-link:active, a.blog-pager-newer-link:active, a.blog-pager-older-link:active {
    border: 1px solid #AAA;
    border-bottom-color: #CCC;
    border-top-color: #999;
    -webkit-box-shadow: inset 0 1px 2px #aaa;
    -moz-box-shadow:inset 0 1px 2px #aaa;
    box-shadow:inset 0 1px 2px #aaa;
    background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);
    background:-moz-linear-gradient(top, #E6E6E6, gainsboro);
    background:-ms-linear-gradient(top, #E6E6E6, gainsboro);
    background:-o-linear-gradient(top, #E6E6E6, gainsboro);
    }

    Visualize e se tiver certinho salve.

    0 comentários:

    Postar um comentário