sábado, 20 de junho de 2015

New Popular post widget

Tags


new-popular-post-widget-2015


Hoje vamos apresentar um widget diferenciado aqui no blogger, sempre precisamos renovar nosso blogger afim de poder ajudar nossos visitantes, nada melhor do que usar a criatividade para que isso venha chamar a atenção éssa a proposta do widget popular post, para ajudar o visitante a encontrar o que as pessoas estao lendo com mais frequencia então vamos aos passos para adicionar esse widget ao seu blogger.


Como Adicionar
Primeiro faça login no seu blogger
procure no menu modelo >> logo em seguida editar html desdobre todo codigo
pressione CTRL+ F para buscar e procure por:  ]]></b:skin>

Logo acima dessa tag copie o codigo abaixo e cole acima da  mesma:


#PopularPosts1 ul{list-style-type:none;margin:0;padding:0;width:100%;max-width:300px;float:left}
#PopularPosts1 ul li{width:83%;borderbottom:1px solid #eee;float:left;margin:0;padding:5px 0 5px 65px;position:relative;list-style:none;height:40px;overflow:hidden}
#PopularPosts1 ul li img{height:40px}
#PopularPosts1 ul li:first-child{width:83%;padding:5px 0 5px 65px;border-top:1px solid #eee;border-bottom:1px solid #eee}
#PopularPosts1 ul li:first-child:after{content:"1";background:#f88c00}
#PopularPosts1 ul li:first-child+li:after{content:"2";background:#1ba1e2}
#PopularPosts1 ul li:first-child+li+li:after{content:"3";background:#ffd700}
#PopularPosts1 ul li:first-child+li+li+li:after{content:"4";background:#20b2aa}
#PopularPosts1 ul li:first-child+li+li+li+li:after{content:"5";background:#3b5d9c}
#PopularPosts1 ul li:first-child+li+li+li+li+li:after{content:"6";background:#2fa700}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li:after{content:"7";background:#cd2122}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li:after{content:"8";background:#f59095}
#PopularPosts1 ul li:first-child+li+li+li+li+li+li+li+li:after{content:"9";background:#c7f25f}
#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{position:absolute;top:0;left:0;border-radius:0;padding:10px 0;width:54px;height:30px;line-height:1em;text-shadow:1px 1px 0 #555;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li a{color:#555;font-size:14px;line-height:1.2em;font-family:Oswald;text-decoration:none;list-style:none;float:left}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts2 .item-snippet{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

Clique em salvar e pronto duvidas estamos aqui a lhe ajudar.

Blogger
Disqus
Escolha o Sistem de Comentario

2 comentários

Adorei esse CSS. Gostaria que ele tivesse até 10. O máximo foi 9. Tentei adicionar, mas não deu certo. Queria deixar como Top 10 da Semana.
Suas dicas são incríveis!

Balas

Que Bom que gostou faça bom uso do Widget

Balas