Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

28 novembro 2007

Colocando imagens em listas (marcadores)

Procure este trecho:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

E acrescente logo abaixo:

.sidebar ul li {
list-style: disc url(link da imagem);
vertical-align: top;
padding: 0;
margin-left: 15px;
}

Neste site, é possível escolher bullets e setas para as listas da sidebar. Hospede a imagem e coloque o link fornecido entre os parênteses. Se não desejar usar imagem, apague o trecho destacado e ficará um círculo sólido. A cor será a mesma do título na Sidebar.

Para que o marcador da lista seja um quadrado, basta colocar:
list-style: square;

Um círculo vazio:
list-style: circle;

Outros sites com bullets e setas:
SuperTráfego
AnimadosGifs

Artigos Relacionados

28 comentários:

Áurea disse...

Ei Ariane,
Tudo bem?
Gostaria de saber se posso colocar links das suas dicas e alguns tutoriais no Templates para Você?
Aguardo resposta!
Bjks

MamaNunes disse...

Oiê Teatcher Xuxuruuuuka!!!!
Adorei essa aula (*rsss) eu estava morrendo de vontade de colocar uma figurinha assim nos blogs. fica tudo tão organizadinho (eu sou maníaca)
Problema:
:(
estou encafifada com um lance?!?!?!?!?
Eu uso o IE. Pois bem. Fiz um template prá uma amiga, ficou lindo no meu navegador, e em todos os computadores que abri, mas no dela, que tambem usa IE, a barra de perfil so aparece lááá embaixo do template e não ao lado da coluna de posts. Mistéeerio. Pensei que essa mudança só ocorrece quando se visualiza no Firefox ou outro navegador.
Fuui à casa dela, limpei cookies, arquivos, zerei o PC, etc...mas o bendito continuna aloprado :(
que saco!!!!
Bão, vou caçar nas suas dicas, acho que vc publicou algo sobre essa matéria.
té já querida.

Ah.. legal vc aderir ao "Coração Valete". Deus te abençoe!!!!!
BEIJOS!

Ariane disse...

respondido nos respectivos blogs. Bjs

Áurea disse...

Amiga,
Descobri como transformar o título da sidebar em link para o botão expandível! Estou louca para contar isso para alguém, mas tem que ser alguém que vai entender! Vou mandar um email para você, aí me fala se entendeu!
Bjks,
Áurea

Anônimo disse...

Ariane Xuxuruuuka Teatcher!!!!!
Às vezes (quase sempre)eu sou meio "lesa"...
Então vou perguntar antes de fazer caca. Será que eu posso divulgar sua comunidade no ORKUT em meus blogs de templates?

Já arrumei os links...affff
beijos

:)

Ariane disse...

Mama, claro que pode! E te agradeço por mais essa. Bjs :-)

Anônimo disse...

Muito boa essa dica tava ja faz um tempo tentando fazer isso e não sabia que seria tão fácil, parabéns pelo blog sempre que tenho um tempo to dando um olhada nos seus posts.
Te linkei no blog OK.

Júnior Leite disse...

Ariane vc é mil...
Vc é Show...
Te amo, rs.

Will disse...

Olá Ariane, por favor, duas tenho duas questões:
Qual a solução para a pergunta da Mama (1º comentário), procurei no blog dela e não achei, estou sofrendo com o mesmo problema!
Segunda é: como faço para colocar um tipo de ícone para cada lista, ou seja, ícone arquivo para o a lista de arquivo, ícone de link para a lista de links, intendeu?
Aguardo,muito obrigado e parabéns!

Ariane disse...

Wil, é que eu respondi direto à ela. Era um problema de medidas das colunas. Aqui há um tutorial sobre isso (hacks para IE). Uma imagem para cada widget é um tutorial que tbem está aqui e responde sua duvida. abraço

Mundinho da Dani disse...

Não aperece a imagem no meu blog...sniffff

WonderWoman disse...

Menina, tu é show viu, ja me salvou de muitas!!

Mas preciso de uma ajuda, a qual eu não encontrei no seu blog.

É o seguinte, usei o flashvortex, criei um menu animado em flash, tah, até ai tudo ok, mas eu não sei como publicar o novo menu para substituir o do blog, se puder me ajudar, eu te agradeço

meu msn: l_cif@hotmail.com
meu email: waltbannerman@gmail.com

QUalquer ajuda sua ja é de grande valor!

Valeu Menina, show de bola os teus tuto viu!

Karla Fabiana Silva disse...

Olá Ariane, obrigada por esse blog, já aprendi muita coisa com vc através dele. O que eu queria saber é pra dividir os marcadores em mais de uma parte, pq eu tô montando o meu blog e queria colocar um menu só para os colunistas, e queria fazer isso com os marcadores, mais sem mostrar marcadores que não tem nada a ver com os colunistas (que nesse caso iria para um um outro menu)... bom, acho que me expressei super mal :)

mais se vc entendeu, por favor me dá uma forcinha?

;-*³

Ariane disse...

webmasters, seu eu entendi direito, vc quer um menu com alguns marcadores q considera mais importantes, é isso? Se for, crie uma lista de links na sidebar e coloque os links dos marcadores que deseja (só clicar com o botão direito sobre o marcador e copiar o link). o mesmo pode ser feito num menu horizontal. espero q eu tenha compreendido e vc também :-)

bruno/matheus/dudu disse...

mew me ajuda aew eu coloco marcadores no meu site so q eles n aparece

Douglas disse...

coloquei os icones na frente dos marcadores blz.
so q eles ficam tipo dentre de um quadrado branco sei como como se fosse um plano de fundo
tem como tirar isso??
e outra tem como mudar a fonte,cor tamanho etc
dos marcadores ja tentei mais não consegui...
e tem como transformar os marcadores em botoes..
consegui criar uns botoes massa mais num sei como colocar nos marcadores
acho q ja fiz essa pergunta
mais num lembro direito se eu ja fiz desculpa :-)

Will disse...

Douglas

Ai vc tem que colocar um fundo transparente na imagem(por Photoshop ou outro qualquer)
______________________________________________
Ariane,obrigado mesmo,acho que,se não fosse por vc eu nunca tinha feito metade do que fiz no meu blog,brigadão ^-^

StylusDownloads disse...

Mto Obrigado pelo post.. tava atras desse tuto a mto tempo...

Victor disse...

ARIANE PELO AMORDE DE DEUS ME DICIONA NO MSN VI.43@HOTMAIL.COM PRECISA QUE VC TRANFORMER UM TEMPLATE WORPRESS EM BLOGGER PRA MIM

Victor disse...

Como eu coloco meus marcodores no estilo do seu (quando passa o mouse em cima ele muda) como faço isso?

Anônimo disse...

Mais uma que você me ajuda, Obrigado mesmo!!!
Perguntei issu ao Compulsivo mais ele tá demorando a responder ae aki axei e ja funcionou,e quando vai lá dar a opinião sobre meu blog que você me ajudou a deixar do jeito q está com suas dicas e tutoriais?
Abração...

Amc disse...

Ariane seu site e D+ graças a vc meu site ta com uma carinha melhor muito obrigado vc e uma bença para todos nos!

Anônimo disse...

Ai por isso que cada vez mais amo esse lugar

Beijos!

Tati Dias disse...

Oi, Ariane! O teu blog é incrível... Todas as informações que procuro, encontro aqui. E mais, você é super-didática. Muito obrigada. Sou sua fã!

Leninha - LTScrapsAnimados disse...

Querida mestra e ídola,
já tentei de tudo, mas não fica em mais de uma coluna, o cículo sólido, da mesma cor do título da Sidebar.
No caso, as sidebar-column-container 5 e 6.
O que está faltando?
É um blog de teste não aberto a visitas, como faço pra você ver?

Miriam disse...

Oi, Ariane! Parabéns pelo blog maravilho que nos socorre sempre...

Coloquei a imagem nas listas, deu certo! A não ser por um pequeno probleminha... Na lista dos blog que acompanho a imagem fica atrás do título. Já tirei o ícone do blogger para ver se a imagem ia para frente mas não tem jeito, ela continua atrás... Podes me ajudar??

Admin disse...

Nossa vlww, me salvou Ariane, brigadãoo
Você está sempre me ajudando :D

Victor Alves disse...

Valeu, tava procurando ;) Ajudou a mim e a muitas pessoas tambem ;D Mto Obrigado, ja estou seguindo !

Postar um comentário

Os comentários são moderados.