Há, aqui no blog, uma categoria que mostra algumas opções de personalização para as postagens mais visualizadas (ou postagens populares) do blog.
Reveja:
Hoje quero te mostrar uma opção mais moderna, mais limpa e muito bonita.
Veja:
São 3 passos simples, vamos aprender?
Antes de começar leia isso!
1- Antes de começar qualquer alteração em seu template, mesmo uma simples como essa, faça sempre backup dele para evitar estragos caso algo saia errado.
2- E, tão importante quanto o backup é ler o tutorial todo antes de sair fazendo.
Só comece após ler o tutorial, ler os códigos e se certificar de haver entendido tudo.
Combinado?
Combinado.
Então, vamos lá!
Personalizar as postagens populares do blog
Para começar, claro, você precisa ter instalado em seu blog o gadget Postagens populares.
Faça assim: vá ao painel administrativo do blog, clique na aba Layout e escolha Adicionar um gadget.
A seguir escolha Postagens populares e configure marcando o período em que deseja as exibições, a quantidade de posts exibidos e não marque a caixinha snippet.
Salve, arraste para onde deseja que fique, salve as alterações do Layout e clique na aba Modelo.
Aí clique em Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Na barra de pesquisa que aparecer digite </head> e tecle Enter para localizar.
Abaixo de </head> cole o Código CSS e salve.
Agora, na barra de pesquisa digite </body> e tecle Enter.
Acima de </body> cole o Código Javascript que faz a personalização funcionar.
Salve.
Está prontinho!
Ah, sim, claro, os códigos:
Dicas extras:
1- Caso seu template já possua alguma personalização nesse gadget o modelo que ensino aqui pode não funcionar.É preciso remover a personalização anterior e aí colocar essa, exatamente como explico no tutorial.
2- No Código CSS quase tudo pode ser trocado/personalizado ao seu gosto e de acordo com as necessidades de seu blog.
Meu modelo usa imagens na largura de 300px. Se sua sidebar for mais larga ou mais estreita ajuste esse valor para caber certinho dentro da sua coluna lateral.
Lembre que o valor 300 se repete também no Código Javascript. Portanto, se alterar no Código CSS altere igualmente o valor no Código Javascript.
3- Cores são alteradas trocando o código hexadecimal precedido de #.
4- A fonte que está no modelo é Cambria. Altere para a fonte que desejar.
5- Alterações diversas no Código CSS são por sua conta. É muito fácil de editar mas precisa ter um conhecimento básico. Vá mexendo, testando, até chegar na aparência que deseja.
Gostou?
Então compartilha aí, meu povo!
Ótima dica, vou usar no meu site. Quem quiser seguir meu site, eu dou dicas de informáticas e disponibilizo programas úteis para pcs e notebooks.
ResponderExcluirMeu site é http://www.infoescrivani.com.br
Adorei Elaine!!! Sempre trazendo dicas incríveis... Vc ajuda a gente de mais!!! Obrigada sempre
ResponderExcluir:*
Beijos
Fran
Achei e Rabisquei
Não consegui mudar o tamanho da imagem. As miniaturas sempre ficam pequenas em vez de ficar com tamanho de 300px. O que poderia estar acontecendo?
ResponderExcluirEstou com o mesmo problema da moça acima, mesmo alterando as imagens ficam bem pequenas.
ResponderExcluirAchei a opção muito linda e limpa, parabéns e obrigada! <3
Simples Bella
Nanda, pelo que notei a personalização não funciona em templates muito modificados/já personalizados ou baixados da internet.
ExcluirTentei em um assim e não dá certo...
:(