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


  • 22 de novembro de 2012

    Widget de artigos populares coloridos

    Recentemente dei um estilo bacana no Gadget de postagens populares que ficou bacana, já havia personalizado antes mas era um modelo muito quadrado então resolvi mudar novamente até chegar neste que uso hoje como pode notar na sidebar do blog, tem efeitos hover nos links e o melhor extremamente fácil de editar o contrário dos modelos comuns que usamos quando precisamos do código /* Variable definitions onde muitos blogueiros iniciantes não tem a facilidade de adicionar em seu blog.

    Recomendo que leia >> Destacar o artigo mais popular do blog


    Vamos ao Tutorial:


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

    #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
    #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
    #PopularPosts1 ul li:first-child:after,
    #PopularPosts1 ul li:first-child + li:after,
    #PopularPosts1 ul li:first-child + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
     Agora salve.

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




    Obs: recomendo que coloque 5 postagem a ser exibida.

    9 comentários:

    1. Olá Juliano,

      parabéns pelo widget, eu tenho um widget similar a essee até adicionei alguns dos efeitos do seu widget em meu blog.

      Parabéns!

      Abraço e sucesso!

      ResponderExcluir
      Respostas
      1. Olá Caudio,

        Mais uma vez é um prazer vê-lo aqui, fico feliz que tenha gostado espero que volte mais vezes.

        Abraços

        Excluir
    2. Muito bom viu parabéns

      ResponderExcluir
    3. Olá Juliano, tudo bem?

      Este widget ficou simplesmente maravilhoso! Adorei!
      Muito elegante, de bom gosto e diferente :) Parabéns pela partilha, sem dúvidas é uma ótima ferramenta para termos em nossos blogs, e com este visual lindo, fica melhor ainda :)

      Grande abraço!

      ResponderExcluir
      Respostas
      1. Sam, concordo com vc muito bonito mesmo o widget, além de destacar ao leitor artigos populares do nosso blog tem também como função deixar o blog com um outro visual.

        Muito obrigado pelo comentário e visita, espero te ver mais aqui em meu blog, grande abraço e boa semana pra você

        Excluir
    4. Amei... mas para o meu template ficou muito apertado, então deixei apenas o título da postagem...gostei mesmo...

      Ps:. você sabe como tirar os marcadores que ficaram ao lado do Gadget? Já tentei quase tudo, menos o que funciona (rs)... até consegui tirar mas alterou o gadget de interação, onde os icones ficaram desparelhos. Se puder ajudar agradeço desde já.

      ResponderExcluir
      Respostas
      1. Olá Jeise,

        Realmente se usarmos apenas o titulo funcionará melhor eu mesmo uso assim aqui no blog,

        Em relação ao problema, deve ser o danado do bug que nós usuários do blogger sofremos, já aconteceu comigo um outro blog era uma imagem que eu usava como marcadores em links na sidebar,

        precisei retirar a imagem para que voltasse ao normal, só que os outros gadgets que usavam também desapareceram, se deseja retirar também basta procurar por .sidebar ul li{ e logo em frente estará a url da imagem.

        caso não seja assim em seu blog entre em contato que tentaremos de outra maneira. ;)

        Grande abraço

        Excluir
    5. Ótimo tutorial, ficou perfeito no meu blog.

      Parabéns.

      ResponderExcluir