Postagens Populares Personalizada Colorful para Blog | Quero Dicas | Tutoriais para seu blogs


Postagens Populares Personalizada Colorful para Blog


Como toda blogueira, sempre entro e saio de todos os tipos de blogs, principalmente, os de moda, adoro!
E como sempre, em muitos casos, sempre esbarro em blogs ou sites que trazem dicas para blogs, assim como o meu, o "Quero Dicas" (O faro é: Existem milhares de nichos iguais pela internet.) e como de costume, sempre vejo se a algo legal, interessante ou diferente para trazer para vocês. Bem... Achei este!
O site DTE, disponibilizou um Widget para postagens populares colorido para blog.  O visual é como este da imagem ao lado ← É eu sei, já existem em outros blogs, mais o que você não sabia é que eu pesquisei e vi, que este é tão simples de aplicar, bem diferente de alguns postados por ai. 

Para instalá-lo, basta seguir o nosso básico para ir ao HTML do template, aplicar, salva e Pimba! já está adicionado, não precisa subir e descer varias vezes dentro do HTML. 
Vem ver: 

  PASSO BÁSICO





Eu sempre recomendo fazer um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências ao blogs de teste! Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
1 - Acesse o painel do seu blog

2 - Vá em "Modelo" e "Editar HTML"

3 - Tecle Ctrl + F para abrir a caixa de busca.

4 - Procure por:

 ]]></b:skin> 
 

  PASSO 2 - O CÓDIGO



1 - Agora que você achou, copie o código do Widget abaixo:

 
/* Popular Post Widget para blog - retirado do http://www.querodicasde.com.br */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 12px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Conjunto das cores por nivel */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

  



2 - Acima de ]]></b:skin>, cole o código do Widget

3 - Salve e prontinho. Suas postagens populares estão lindas coloridas. =D

Viu como foi fácil? Este é bem mais simples, não é?
Caso você não saiba como colocar um Gadgets de postagens Populares em seu blog, veja este post: Como colocar Postagens Populares no blog - Blogger. Agora, se quiser personalizá-la, veja abaixo.

  COMO PERSONALIZAR

Entre novamente (caso você tenha fechado) no HTML do seu blog e vá para o código do Widget instalado.

Troque:
• font: normal normal 13px - Tamanho da fonte
Arial Narrow - Troque a fonte
O restante não indico mexer

Onde está /* Conjunto das cores por nível */, você poderá alterar as cores que aparecem em cada nível, ´por exemplo:
.PopularPosts ul li:nth-child(1) {background-color#E11E28;margin-right:1%}

Este é o primeiro destacado (sua postagem em 1º lugar). Ela está na cor vermelho sangue, caso queira alterar, troque #E11E28 pela cor que deseja.

Aqui a tabela de cores - Flextool

Gostou? Deixe seus comentários. Beijinhos
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.