Pesquisa personalizada

quinta-feira, 2 de janeiro de 2014

Como trocar o Ícone de Autor nos Threaded Comments do Blogger





Quem usa o sistema de comentários nativo do Blogger, os Threaded Comments, ou  Comentários Aninhados, nota que nos comentários do Autor do blog, aparece um ícone de lápis ao lado do nome. Neste post eu ensino como trocar essa imagem por outra.

Um ícone muito feio! Não é verdade?

O processo é bem fácil, mas antes é recomendável fazer um back up do seu modelo, caso algo dê errado. Vá em Painel de Controle >> Modelo >> Editar HTML >> procure o código CSS abaixo, clicando na seta para abrir os estilos do seu blog, que fica entre <b:skin>...</b:skin>, use control + F:

Só faça isso se você tem o mínimo de conhecimento em layouts do Blogger

.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

O código que está em azul é do ícone nativo, basta colar no lugar a url de uma imagem de dimensões 18 x 18, de preferência redonda, como por exemplo, essa que eu criei com a minha própria foto:


Eis como ficou:

Só criei como exemplo, mas não vou deixar ela!

Um ícone que pode ser colocado é o que o Twitter e o Facebook usa nas contas verificadas, a imagem abaixo já está dimensionada em 18 x 18 e transparente, basta copiar e colar o link da url no código acima:


http://2.bp.blogspot.com/-YKlIvurVV58/UsS48I__jsI/AAAAAAAAtII/9HGHvpD9ues/s1600/twitter.png

Eis como fica o código CSS:

.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
background-repeat: no-repeat;
background-image: url(http://2.bp.blogspot.com/-YKlIvurVV58/UsS48I__jsI/AAAAAAAAtII/9HGHvpD9ues/s1600/twitter.png);
}

Et voilà!!! Simples não?


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



0 Comentando aqui :

Postar um comentário

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.