Postagens mais lidas com efeito giratório

em 29 de outubro de 2013

postagens populares com efeito giratorio para blog
Olá, blogueiro!
Você usa em seu blog o gadget Postagens populares?
Este gadget, nativo do Blogger, é muito útil para manter nosso leitor mais tempo em nosso blog.
Também é útil para mostrar quais são as postagens mais acessadas do blog.
E por ser um gadget que aceita muitas personalizações ele se torna também um elemento interessante para compor o design de nosso blog.

Hoje vou mostrar como instalar o gadget Postagens populares em sua forma mais simples, sem personalização alguma.
Mas também vou ensinar como dar à ele uma bossa, inserindo o efeito giratório nas imagens.
Ficará assim:

Para começar você precisa inserir o gadget em seu blog.
Faça assim: acesse o painel administrativo de seu blog e clique na aba Layout.
A seguir clique em Adicionar um gadget e na janela de opções selecione Postagens populares.
Configure o gadget como preferir, altere o título caso opte por exibir as mais acessadas do mês ou da semana e a seguir salve.
Salve novamente e arraste o gadget para onde deseja que ele apareça.

Caso não queira acrescentar o efeito giratório você concluiu.
Mas se quiser o efeito acesse então a aba Modelo e clique em Editar html.
Dentro da caixa de código que abrir tecle Ctrl+F e na barra de busca que expandir cole isso:

]]></b:skin>

Tecle enter para localizar.
Acima da tag localizada cole este código:

#PopularPosts1{
max-width:300px
} 
#PopularPosts1 dd{
float:left;
border-bottom:none;
margin:8px 8px 0 8px;
background:none;
display:block;
padding:0
} 
#PopularPosts1 img{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
padding:4px;
background: #FF3E96;
background: -webkit-gradient(linear, left top, left bottom, from(#FF3E96), color-stop(0.5, #FF3E96), c#4F94CDolor-stop(0.5, #FF3E96), to(#aaa));
background: -moz-linear-gradient(top, #ffffff, #ddd 50%, #FF3E96 50%, #ffffff);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
} 
#PopularPosts1 img:hover{
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}


Dicas extras:
Você pode alterar facilmente as cores de seu gadget.
Sempre que houver um código hexadecimal precedido do sinal # ele se refere a uma cor.
No caso do código, por exemplo, essa é a cor: #ff3e96, que é um rosa forte.
Para trocar mude o código hexadecimal #ff3e96 pelo código da cor que preferir.
Não apague o sinal #, nem aspas, nem nada mais, ok?
Aqui tem uma tabela de cores para você escolher: Tabela de cores

Importante:
Para copiar todos os códigos deste blog pare o mouse sobre ele e clique no primeiro ícone que surgir.
Abrirá uma janela com o código aberto e livre para ser copiado.

Depois de pronto você clica em Salvar modelo.
Viu que simples?

Para te ajudar eu fiz um vídeo mostrando passo a passo como inserir o gadget sem erros em seu blog.
Aperta o play!
Gostou?
Quer se inscrever em meu canal?
Clique em Subscribe!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

24 comentários , comente também!

  1. Oi Elaine

    Mais uma dica ótima! Suas vídeos aulas são muito boas!!!

    Super bjos
    http://www.i-likemovies.com/

    ResponderExcluir
  2. Olá Elaine

    Adorei a sua sua video aula. Muito bem explicada. Ontem mesmo, comentei com meu marido que poucos tem a qualidade de saber explicar que forma sucinta e clara. Parabéns

    AMIGA DA MODA by Kinha

    ResponderExcluir
  3. Mais uma dica com o selo de qualidade by Elaine Gaspareto!!!

    Como sempre a minha preocupação é 'ai, não vai deixar a página muito pesada, não?!?" mas eu fui lá no teste e achei tão fofo...sim, confesso; fiquei passando o mouse várias vezes pra ver a imagem girando kkkk

    Parece um brinquedinho virtual :)

    ResponderExcluir
  4. Oinn mais um tutorial super bacaninha !
    Bem explicado, de fácil entendimento.
    Acabei de fazer, e deu certinho viu,

    www.noseaslinhas.com.br

    Ótima dica,
    Bjins.

    ResponderExcluir
  5. Super Elaine, só entendi a metade, a partir do efeito giratório bagunçou tudo.
    Sá Burrinha, eu sou.
    Beijo

    ResponderExcluir
  6. Oi Elaine!
    Imagina se eu gostei?! Esse efeito giratório é do mesmo estilo das "janelinhas" que você colocou no meu blog! Adooooro!
    Vou tentar fazer (na verdade, tentar fazer meu filho fazer pra mim! kkk) e depois te conto!
    Beijos e adorei a vídeo-aula!
    Cris

    ResponderExcluir
  7. Boa tarde Elaine. Tudo bem com você, espero que sim. Fiz o tutorial e funcionou!!!!! O meu blog ficou mais lindo ainda. Obrigada mais uma vez por compartilhar seus conhecimentos conosco, um grande abraço e fique com Deus sempre.

    ResponderExcluir
  8. Oi Elaine, acabei de fazer no meu e deu super certo... :)
    bjos linda!

    ResponderExcluir
  9. Ola Elaine, tudo bem?
    Achei esse efeito super interessante! Coloquei no meu blog e ficou super fofo!!
    Bjus

    ResponderExcluir
  10. Bacana minha querida! Adorei ver o nome do meu canal em sua postagem rsrsrs.
    Beijos.

    ResponderExcluir
  11. Obrigada por mais essa Elaine fiz no meu e ficou lindo demais. Depois vem ver.
    Beios e sucesso sempre pra você amiga!
    http://dulcineiadesa.blogspot.com

    ResponderExcluir
  12. Coloquei esse efeito no meu blog, Elaine! Amei! <3

    Você é demais!

    ResponderExcluir
  13. Muito legal, valeu mesmo. Sò tive que alterar as cores de borda e de fundo, pq essas dai não "colaram" muito bem no meu site

    ResponderExcluir
  14. Ameiii a dica!!!
    Fiz e deu certinho em meu blog!
    não mudei a cor, porque essa cor ficou super legal e ainda combinou com o meu blog.
    Obrigada por mais uma dica
    bjoooos

    ResponderExcluir
  15. Olá... Amei a sua vídeo aula e já tinha incluído em meu blog, porém recentemente meu blog está aparecendo com 7 postagens populares, mas no gadget, só está macado como 3 (que era como estava antes). Não consigo mudar para 3, o que eu faço?

    ResponderExcluir
    Respostas
    1. Aline, aparentemente o Blogger está alterando por conta própria a quantidade de posts.
      Os meus eram cinco, agora são 7, mesmo mantendo a escolha de 5.
      Não há o que fazer, só esperar que normalize...
      beijossss

      Excluir
  16. olá boa td?
    como colocar curtir facebook como esse seu, (gostou so blog)

    ResponderExcluir
  17. Só tem um problema, não ta dando pra selecionar o código. O blog está bloqueado para copiar o conteúdo, onde consigo o código?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…