Trocar texto do marcador da postagem por imagem


O tutorial de hoje foi escolhido por leitores do Seja Criativo. Há algum tempo liberei o link de um formulário pedindo dicas de tutoriais que deveriam ser postados aqui. Recebi vários pedidos e todos serão divulgados em breve. Então vamos lá!

A ideia hoje é explicar como você pode personalizar os marcadores do seu blog com imagens e apesar de ser um tutorial simples, requer um tiquinho de atenção.

Como exemplo você pode conferir o Dezoito Primaveras.


Primeiro passo: Adicionar o CSS

Acesse o menu Modelo>Editar HTML e localize a linha ]]></b:skin>, acima dela adicione o código:


Segundo passo: Adicionar o HTML

Procure pela linha <div class='post-footer-line post-footer-line-1'> e adicione abaixo o seguinte código:

Terceiro passo: Adicionar o Javascript

Acesse o menu Modelo>Editar HTML e localize a linha </head>, feito isso inclua o código abaixo acima dela.


Entenda o que você está adicionando ao seu código


O código que você adicionou no seu blog pode ser melhor visualizado na imagem acima. Para que você entenda, fiz algumas marcações importantes.

Obs. 1. As cores identificam quais linhas do código estão relacionadas.
Obs. 2. Se você quiser adicionar outro marcador você deve:

1. Adicionar a linha abaixo antes da primeira linha com conteúdo"if (etiqueta...":
imagenes[X] = "<img src='LINK-DA-SUA-IMAGEM-1' title='IMAGEM X'/>"

2. Adicionar antes das linhas 14 e 15 o seguinte código:
if (etiqueta == "IMAGEM X")  {document.write(imagenes[X]);}

Lembrando que o "X" é o número que deve ser utilizando nos dois códigos. Agora é só salvar e visualizar o resultado! Qualquer dúvida é só deixar o comentário na postagem ou acessar a página de contato do blog.

3 comentários:

  1. o meu não apareceu, o código ta certinho, fiz as edições corretas... o que pode ter acontecido?

    ResponderExcluir
    Respostas
    1. No meu também, não aconteceu nada.

      Excluir
    2. Desculpa meninas, acrescentei uma parte do código. :/

      Excluir