[Blogger - Customização] - Como alterar a imagem dos marcadores em blogs do Blogger

No artigo de hoje, responderei a pergunta feita pela leitora Patrese Fan no artigo: Customizar links externos com seletores CSS em blogs do Blogger. Ela me perguntou como eu fiz para alterar a imagem dos marcadores que eu utilizo na sidebar do blog, no gadget: Marcadores, para ser mais exato. Isso é extremamente fácil de ser feito, e é o que mostrarei neste artigo.

Alterando a imagem dos marcadores da sidebar (barra lateral)


É possível que alteremos a imagem dos marcadores apenas da sidebar (barra lateral) do blog, evitando que as imagens apareçam em marcadores que são colocados em outras áreas do blog. Para alterar os marcadores somente da barra lateral siga os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- CSS para alterar a imagem dos marcadores ----- */
.column-right-inner ul li, .column-left-inner ul li {
list-style: url(link-da-imagem) inside;
}


4. O código acima afetará os blogs que utilizam tanto a sidebar do lado direito do blog, quanto do esquerdo. Substitua a parte destacada em vermelho pelo link da imagem que você quer usar como marcador.

5. Após ter feito a substituição, clique em Visualizar modelo e, se estiver tudo certo, clique em Salvar modelo. Pronto, agora é só ir em seu blog e verificar como ficou.

Alterando a imagem dos marcadores dentro dos artigos do blog


Não utilizamos os marcadores apenas na sidebar (barra lateral) do blog. Muitas vezes utilizando os marcadores dentro do conteúdo dos artigos para ementar os tópicos abordados, ou para qualquer outra finalidade. Portanto, se você quer alterar somente os marcadores que aparecem dentro dos artigos, siga os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- CSS para alterar a imagem dos marcadores ----- */
.post-body ul li {
list-style: url(link-da-imagem) inside;
}


4. Substitua a parte destacada em vermelho pelo link da imagem que você quer usar como marcador. Após ter feito a substituição, clique em Visualizar modelo e, se estiver tudo certo, clique em Salvar modelo. Pronto, agora é só ir em seu blog e verificar como ficou.

Alterando a imagem de todos os marcadores do blog


Os dois códigos que foram mostrados acima são bem específicos, ou seja, alteram a imagem dos marcadores apenas da sidebar ou dos artigos, mas há pessoas que preferem mudar todos os marcadores do blog, sem fazer distinção. Para essas pessoas, os passos a serem seguidos são os mostrados abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione este outro código.

/* ----- CSS para alterar a imagem dos marcadores ----- */
ul li {
list-style: url(link-da-imagem) inside;
}


4. Substitua a parte destacada em vermelho pelo link da imagem que você quer usar como marcador. Após ter feito a substituição, clique em Visualizar modelo e, se estiver tudo certo, clique em Salvar modelo. Pronto, agora é só ir em seu blog e verificar como ficou.

Alterando a imagem dos marcadores nos templates dinâmicos


Todos os códigos que foram mostrados acima funcionam perfeita nos templates comuns do Blogger, mas há os usuários que prefere utilizar os templates dinâmicos. Se você é um dos adeptos de tais templates, o processo para alterar os marcadores é diferente. Siga os passos abaixo para mudar a imagem dos marcadores nos templates dinâmicos.

Alterar os marcadores dos artigos


Siga os passos abaixo para alterar os marcadores somente dos artigos do seu blog. O código abaixo funcionará em qualquer um dos sete templates dinâmicos fornecidos pelo Blogger.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo e clique no botão Personalizar para acessar o Designer de modelo. Clique no menu Avançado e, em seguida, na opção Adicionar CSS. Cole o código abaixo dentro do campo de CSS.

/* ----- CSS para alterar a imagem dos marcadores ----- */
.entry-content ul li, .entry-summary ul li {
list-style: url(link-da-imagem) inside;
}


2. Substitua a parte destacada em vermelho pelo link da imagem que você quer. Para finalizar clique no botão Aplicar ao blog, localizado no canto superior direito do Designer de Modelo.

Alterar os marcadores dos gadgets


Engana-se quem pensa que não é possível customizar os marcadores utilizados nos gadgets compatíveis com os templates dinâmicos. Caso você use um template dinâmico e tenha instalado o gadget "Lista de links" (ou qualquer outro que utilize marcadores), você poderá customizar os marcadores também, basta seguir os passos abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo e clique no botão Personalizar para acessar o Designer de modelo. Clique no menu Avançado e, em seguida, na opção Adicionar CSS. Cole o código abaixo dentro do campo de CSS.

/* ----- CSS para alterar a imagem dos marcadores ----- */
#gadget-dock div.gadget ul li
list-style: url(link-da-imagem) inside;
}


2. Substitua a parte destacada em vermelho pelo link da imagem que você quer. Para finalizar clique no botão Aplicar ao blog, localizado no canto superior direito do Designer de Modelo.

É possível customizar os marcadores de qualquer parte do blog, é possível inclusive adicionar um marcador diferente para cada elemento, mas não há um código específico para tudo, pois a alteração dependerá do template que está sendo utilizado no blog — cada template possui seus próprios códigos.

Aconselho que você não utilize imagens muito grandes, limite-se a utilizar imagens com tamanho de 10x10 pixels ou 12x12 pixels. Você pode encontrar imagens clicando aqui e aqui, mas pode criar suas próprias imagens também. Se gostou do artigo, ficou com dúvidas ou achou ele útil, participe postando um comentário. Sugestões também são sempre bem-vindas!
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Deixe uma resposta!