Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

20.9.10

image

Para que seu template fique ainda mais bonito, rico em detalhes, não há muito mistério. Vamos aprender aqui a inserir pequenos ícones ao lado das informações sobre os posts. Por exemplo: autor, hora, link de comentários, marcadores,etc. Veja um exemplo na imagem.

 

imagePrimeiro você deve procurar as imagens que deseja e hospedar em um site de sua preferencia como Tinypic, Photobucket ou no próprio Blogger. Sugiro os sites  ICOJOY - INCON FINDER  e FIND ICONS. Tem milhares de ícones.

Não se esqueça de salvar seu template antes de qualquer alteração para não ter problemas caso aconteça algum erro. Clique"Baixar Modelo Completo" e guarde.


Faça login e clique na opção "Design"  e depois  "Editar HTML" .

   Vamos acrescentar alguns códigos CSS na área do .post-body . Lembrando que este exemplo é baseado no template Mínima Blogger e pode ser um pouco diferente no seu.

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}

Para ter um ícone à esquerda do autor do post,  acrescente o seguinte código:

.post-author {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (reloginho) à esquerda da hora de postagem,  acrescente o seguinte código:

.post-timestamp {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (balão) à esquerda de comentários,  acrescente o seguinte código:

.post-comment-link {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

Para ter um ícone (label) à esquerda dos marcadores, acrescente o seguinte código:

.post-labels {
background:url(http://ENDEREÇO-DA-SUA-IMAGEM) no-repeat left center;
padding-left:20px;
}

 

Visualize e se estiver tudo bem, salve o template.

Pronto gente, tudo “mastigadinho” (hehe)

Para ter uma verdadeira aula sobre o assunto e ainda conhecer outras maneiras de implementar esses detalhes, leia o post da Rô Zancheta do BLOGERSPHERA.

Beijo da Mama ♥

7 comentários

Inside Me

mama, minha linda, como sempre abrilhantando a blogosfera com suas dicas maravilhosas, ^^
bjao

MamaNunes

@Inside Me
Eba! Ganhei o dia!! Obrigada querida ♥

vilma

Oi mama,suas dicas tem me ajudado bastante.Sou sua seguidora e sempre venho aqui atrás de novidades.Que Deus te conceda muita saúde e disponibilidade,porque generosidade você já tem,para que possas continuar ajudando blogueiras como eu.Bjim

Kevvin

Existe algum site específico com ícones desse tipo?

MamaNunes

@Kevvin
Oi Kevvin
Experimente este site:

http://www.iconesbr.net/

beijo

Julia

Não consigui fazer, no meu só apareceu o código uma vez, me ajuda, e também não consigui colocar um ícone do lado do link de comentários, autor, hora do post e etc...

Brian Luis

Boa... Me ajudou demais, estava a procura dessa dica à muito tempo! Obrigado.

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.