Configurar gadget postagens populares

Configurar gadget postagens populares

Gadget - instalação

Ha pouco tempo o blogger disponibilizou um novo gadget onde é mostrado uma lista de topicos e artigos mais visitados de acordo com a quantidade de visitas de cada artigo.
Este novo gadget do blogger além de ser simples de instalar, encontrei no blog Mundo Blogger como fazer para personalizar ao seu modo e do template do seu blog modificando o CSS.

Existem inúmeros artigos a respeito deste gadget, mas todos funcionam a base de script externos, o que deixam a página de seu blog mais lento, este como já é nativo do próprio blogger é bem mais rápido e melhora muito a performance.


Para a instalação vá no seu blog e siga o caminho:
"DESIGN" -> Clique em "ADICIONAR GADGET" -> Escolha "POSTAGENS POPULARES (Novo!)"



Irá aparecer a tela a seguir:

  • Escolha um título.
  • Escolha o perído que voce deseja que seja feito as estatísticas.
  • Escolha as características, aparecer miniatura de imagem e resumo.
  • E por último a quantidade de postagens populares que voce deseja.
  • Clique em salvar

Gadget - Configurando o CSS


Com os códigos css que serão passados a seguir é possível configurar o seu gadget há sua maneira.
Cada elemento será descrito informando o que cada um representa.
Os estilos deverão ser aplicados por você.

Vá novamente em  "DESIGN" ->"EDITAR HTML" e então procure pela tag:
]]></b:skin>
O código CSS deverá ser colado logo ACIMA dela, configurando os estilos á sua escolha para cada elemento contido no código que será explicado abaixo:
#PopularPosts1 li{/*Estilo para os links da lista*/
<!--coloque aqui os estilos que você quer que sejam aplicados aos links dos itens da lista-->
}

#PopularPosts1 .widget-content{ /*Estilo para o container geral*/
<!--coloque aqui os estilos que você quer que sejam aplicados ao Container geral do gadget-->
}

.item-title{ /*Estilo para os títulos dos posts*/
<!--coloque aqui os estilos que você quer que sejam aplicados aos titulos dos posts-->
}

.item-content{ /*Estilo para os itens da lista*/
<!--coloque aqui os estilos que você quer que sejam aplicados aos itens da lista-->
}

.item-snippet {/*Estilo para resumo do ultimo post*/
<!--coloque aqui os estilos que você quer que sejam aplicados para resumo do ultimo post-->
}


Agora basta usar sua criatividade e pesquisar um pouco sobre elementos CSS aqui e configurar seu gadget da melhor maneira possível.

Obs.: Sempre salve seu template antes de qualquer modificação ou então visualize antes de salvar.