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!!!


  • 5 de janeiro de 2013

    estilo no gadget de postagens populares com CSS

    Artigos populares é um dos gadgets importantes em um blog, o estilo padrão nem é tão agradável  mas temos várias formas de personalização e com a ajuda do grandioso CSS podemos dar estilos muito bacana, já mostrei algumas delas nos seguintes artigos.
    1. Destacar o artigo mais popular do blog
    2. Widget de artigos populares coloridos 
     E no artigo de hoje aprenderemos mais uma forma simples e fácil de personalização.



    Na imagem acima temos o resultado final assim que aplicamos o estilo, e para conseguir este feito basta seguir os passos abaixo.

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

    popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: transparent
    url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwtwfLD7sG1bsI30K2MVC-lb1Rl4u-CzWX7k3HEfapE2rZbeG3bLDCHzCX7DXSguIFUwKooBaQuKDjJXiAswnuQJyVbcKkO3YYb2PxyJ4z_hfbK2RAyHe719JfhCFoiaNsbzfsHx-ldvm/s128/popular.jpg) no-repeat scroll 0px 2px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 2px solid #094c74;
    border-radius:10px;/* radio del borde */
    -moz-border-radius:10px;/* radio del borde */
    -webkit-border-radius:10px;/*  radio del borde  */
    }
    .popular-posts ul li:hover {
    border:2px solid #094c74;/* color de borde al pasar en cursor */
    }
    .popular-posts ul li a:hover {
    text-decoration:none;
    }

    3º-  Agora temos que instalar o Gadget de artigos populares, para isso vá em Layout  > Adicionar um Gadget e adiciona Postagens populares.

    OBS: Para que funcione corretamente precisamos desmarcar a opção miniatura de imagem como foi mostrada na imagem anterior

    Gostou? Compartilhe mas não esqueça de deixar seu comentário.

    5 comentários:

    1. Olá Juliano.

      Excelente este estilo para o gadget de postagens populares que você desenvolveu. Gostei muito ficou muito legal.

      Abraços!

      ResponderExcluir
      Respostas
      1. Herlan, muito obrigado pelo comentário fico feliz em saber que gostou ;)
        Grande abraço.

        Excluir
    2. Olá Juliano,

      muito bom o estilo das postagens populares, realmente é uma ótima opção de personalização.

      Abraço e sucesso!

      ResponderExcluir
      Respostas
      1. Olá Claudio,

        Dar estilos nas postagem é ótima forma para chamar atenção do leitor e existe várias estilos elegantes e fácil de edição e vê-lo novamente aqui no TB é uma honra, :D

        Grande Abraço e tenha uma ótima semana. ;)

        Excluir