Como Trocar o Ponto Preto das Listas por uma Imagem

► +A +/- -A


(Imagem: Blogando Com facilidade)



Olá queridos leitores do Tecnoblog, Nesta post venho trazendo um tutorial bem legal!
Neste tutorial ensinarei a tirar aquele ponto preto quando você coloca listas em seu blog,
este ponto preto para mim, e um pouco "Antigo".
Por isso vamos modernizar deixando suas listas mais bonitas:
Mas atenção, exite duas opções, estas opções são: A modificação ( ou seja a retiração do ponto preto pela imagem ). Poderá acontecer em todo blog, ou se você quiser, a modificação só ocorrerá nas postagens, então ensinarei no tutorial as duas formas.


Então Vamos ao tutorial:


PARA APLICAR EM TODO O BLOG:
Tutorial:
1. Acesse o Painel do seu Blog e clique na Guia Modelo.
2. Depois clique no Botão Editar HTML.
3. Em seguida as teclas CTRL+F e procure pela seguinte tag:



]]></b:skin>


4. E ACIMA da tag citada acima cole o seguinte código:



li {
cursor: pointer !important;
list-style: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicQtwGRZP9aRSywDLvPuMrUwxvlGmzsgbDwAMVYic4ZYKf9Ci0kX3Mt9qYCMYwulXMoVnFl7ID46o2ePST0WCSnd2Za0T25oqHGBSOwjWYG602p_COl8aTZ_LaxBj1qFTOlo8yF0Agmzw/s1600/gtk-go-back-rtl.png) no-repeat 0 4px;
text-indent: 24px !important;
border: none !important;
}



5. A parte de negrito e a parte que você devera modificar pela a imagem que quiser.


6. Depois e só clicar em salvar modelo




PARA APLICAR APENAS NOS POSTS:
Tutorial:



1. Acesse o Painel do seu Blog e clique na Guia Modelo.
2. Depois clique no Botão Editar HTML.
3. 
Em seguida as teclas CTRL+F e procure por:



]]></b:skin>


4. E ACIMA do código citado acima cole o seguinte código:



.post-body li {
cursor: pointer !important;
list-style: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicQtwGRZP9aRSywDLvPuMrUwxvlGmzsgbDwAMVYic4ZYKf9Ci0kX3Mt9qYCMYwulXMoVnFl7ID46o2ePST0WCSnd2Za0T25oqHGBSOwjWYG602p_COl8aTZ_LaxBj1qFTOlo8yF0Agmzw/s1600/gtk-go-back-rtl.png) no-repeat 0 4px;
text-indent: 24px !important;
border: none !important;
}




5. A parte de negrito e a parte que você devera modificar pela a imagem que quiser.


6. Depois e só clicar em salvar modelo.


Setas para usar nas imagens:


Para você usar as setas que vou disponibilizar abaixo você deve clicar com o botão direito do mouse e selecionar "copiar a URL da imagem" e substituir pela as partes em negritos dos passos 4.
Abaixo as imagens:





Pronto, Agora é só clicar em salvar modelo.
Qualquer Duvida (?) comente!


                                                  Código por: Iago melania - blogando com facilidade
► Postagens Relacionadas:

2 Comentários

Daniell Mesquita disse...

Muito obrigado, ajudou muito a Plasmmer!

6 de agosto de 2012 às 21:08
Caio Vinicius disse...

Não há de que :)

7 de agosto de 2012 às 12:45

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!