Colocando ícone de autor nos comentários do blog


Hello minhas doçuras (~ ̄▽ ̄)~. Como vai o domingão de vocês? Vocês não imaginam o tanto que me viciei na música This Is How We Do da Katy Perry. Se vocês não conhecem ouça ela aqui www. Ah, e acho que no final de agosto vou fazer a minha playlist, e adicionar mais uma tag. E também quando completarmos mais de cinquenta postagens no blog vou disponibilizar pra vocês um layout free, mas ainda não foquei em algum tema. O blog de icons, o Psycho Pics (www) está desatualizado, então toda sexta-feira minha prioridade vai ser ele, assim consigo ajustar mais o meu tempo.

O tutorial de hoje é bem básico, e resolvi postar porque eu particularmente, acho que fica legal e mais fofo a área dos comentários. É bem simples de aplicar, então se você não tiver nenhuma noção de HTML pode arriscar a fazer, mas caso alguma coisa der errada, aconselho fazer o backup do seu template completo, assim evita nervosismo, aushaus. ~Enjoy!


01- Vá no editor HTML do seu blog e procure por:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==
Vai estar mais ou menos assim:
.comments .comments-content .icon.blog-author{
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
width:18px;
height:18px;
display:inline-block;
margin:0 0 -4px 6px;
float:right;
Toda essa parte selecionada significa o link daquele imagem que aparece nos comentários. (Se você tem os comentários personalizados, pode ser que não apareça, mas se não tiver, coloque o código acima na área dos comentários no HTML).
Para trocar, é só substituir o que está em negrito pelo link da sua nova imagem.
Você pode colocar o icon da sua foto, ou um mini gif. Veja alguns aqui (www)
CRÉDITOS: (WWW)

Nenhum comentário:

Postar um comentário