21 de mar de 2013

Widget de postagens populares colorido com efeito nas imagens





Mais uma maneira de personalizar o widget de postagens populares, deixando o widget colorido e as imagens menores e com efeito de transição.


Vá até o modelo de seu blog e clique em "Personalizar"









/*Popular Post CSS ------------------------------------------------------------------------------*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:91%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:88%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:85%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:82%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:79%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:76%}
#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:73%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{background:#EDB0EE;width:70%}
#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:#C0C0FF;width:67%}
#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:#C0C0C0;width:64%}
#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 +li + li + li + li +li{background:#C0C0C0;width:61%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after{content:"11"}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li  + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{ float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}

#PopularPosts1 ul li a{ font-size:12px;color:#444;text-decoration:none}
#PopularPosts  ul  li {list-style-type:none; }

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts1 img{width: 40px; height:40px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-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);}



10 comentários:

  1. Oi Elke já é a terceira vez que visito o seu blog e hoje segui a sua super dica da "Widget de postagens populares colorido com efeito nas imagens"_ficou muito legal nos meus blogs(coloquei em três kkkk)__
    Tambem estou estudando e ralando com HTML e CSS mexendo bastante com o Photoshop,Corel Draw,Fireworks e agora depois de experimentar o Artisteer estou ralando para fazer um template no Dreamwever___que dureza_mas estou na luta__muito obrigado e bjos_Carlos

    ResponderExcluir
    Respostas
    1. Obrigada Carlos. É isso menino, quando começamosa mexer nestes códigos é um rala só, mas ao fim, assim que aprendemos e entendemos é muito satisfatório. Abraço.

      Excluir
  2. Elke muito obrigado, esse Gadget fica show no Template do Blogger, além de dar uma aparência mais profissional.

    Gracias:

    By : JoãoMello

    ResponderExcluir
  3. EI cara como voce fez, essa imagem postadas girarem quando colocar o Mouse encima?? e nas Postagens Populares???

    ResponderExcluir
    Respostas
    1. Isso faz do jeito que está no tutorial, depois vai em Layout, configurações de postagens populares, dai você marca a quantidade de postagens que você quer aparecer no blog. depois marca a caixinha ( Miniatura de Imagem ) ok, visualizar Blog.

      Excluir
  4. fiz exatamente como o tuto, mas sequer apareceu algo na página. O que deve ser?

    ResponderExcluir
  5. Poxa, não funcionou! =((
    Mas obrigada por compartilhar!

    ResponderExcluir
  6. Passando para agradecer pela ajuda. Muito obrigado mesmo, por disponibilizar essa ótima ferramenta.

    Caso alguém queira ver o resultado, segue o link

    http://www.rockdown13.com

    Abraço.

    Fui

    ResponderExcluir
  7. Estou tendo um problema aqui estou fazendo conforme ensinado acima mais ao aplicar no blog o botão de aplicar no blog não está acendendo assim não aplicando o código. o que devo fazer ?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube