13/05/2014

Personalizando marcadores em lista


Yo! Yo! Quero pedir desculpas por não estar respondendo os comentários e nem retribuindo visitas, estou acumulada de trabalhos e provas. Assim que me regularizar irei visitar todos os blogs, estou guardando os endereços. Também quero dizer que mandei o recadinho de todos que desejaram feliz dias das mães para minha mama, e ela agradeceu super feliz e mandou uma beijokas para todos vocês. Bem hoje vou mostrar como personalizar as listas com marcadores usadas em postagens e sidebar, substituindo o símbolo de bolinha ou círculo cinza por uma imagem.
Esse tutorial já foi bem rodado na web, mas quero aproveitar esse meu tempinho corrido para postar artigos pequenos que ainda não pude postar. Coisinhas assim são sempre uteis e sempre tem aqueles que buscam, eu mesma sou uma. Gente eu fiquei com muitaaaaaa preguiça de tirar print, então peguei a imagem de outro blog, (que coisa feia!) mas os créditos deixei abaixo dela. Então vamos ao tutorial agora?

Para ocultar o marcador do menu quando visita a pagina do próprio marcador, ou seja, quando você está na pagina de um marcador ele não aparece no menu marcadores do seu blog. Entre na pagina editar html, procure e apague esse trecho:

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

Fazer aparecer um texto quando passa o mouse por cima do menu marcador (exemplo) também é fácil de fazer. Volte a pagina editar html quase no mesmo trecho que estava e procure o trecho:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Apague e coloque esse no lugar:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='&quot;Texto sobre:&quot; + data:label.name'><data:label.name/></a>

A parte Texto sobre: (os dois pontos também) você pode alterar como quiser, mas cuidado com o restante do código, pois se apagar qualquer coisa dá erro na hora de salvar.

Colocar uma imagem ao lado dos links do menu marcadores é como personalizar qualquer outro menu. Na pagina editar HTML procure por ]]></b:skin> e coloque esse código antes dele:

#Label1 a{font-size:130%;display: block;background-image: url(endereço da imagem);text-indent: 12px;background-repeat: no-repeat;background-position: left center;padding:2px}
#Label1 a:hover{background-image: url(endereço da imagem);text-indent: 12px;background-repeat: no-repeat;background-position: left center;padding:2px}


Você também pode utilizar: 

.sidebar ul li { list-style: none;
margin: 0; padding: 0; border-bottom:1px solid #fee; padding: 0 0 4px 12px; background: url("http://i122.photobucket.com/albums/o260/mhilka/minigifs/hartpink_bydk.gif") no-repeat 0 2px;}

Se desejar adicionar uma imagem na frente ou personalizar os marcadores internos da postagem, aquele quando ativado aparece uma bolinha cinza ou preta,  procure por ]]></b:skin> e coloque esse código antes dele:

.post ul li { list-style: none; margin: 0; padding: 0; padding: 0 0 4px 12px; background: url("http://3.bp.blogspot.com/-edd6RlHEe_s/TnO4PIymJzI/AAAAAAAABv8/XLoXHiXnQyE/s1600/mini-153.gif") no-repeat 0 2px;}


Resultado: (Das postagens é a mesma coisa)
 Imagem obtida de: MCD

Bom é isso, essa postagem fico bem curtinha rs mas okay. É isso minna-san vou ficando por aqui, espero que tenham gostado ate a próxima postagem. Beijinhos~ Creditos ao: Dicas para blog e Maria Clara Desing.

14 comentários:

  1. Que legal o tuto, eu ainda não conhecia >-<

    ~Beijitos || Sevendays-official.blogspot.com

    ResponderExcluir
  2. Kawaii >w<
    Tenho de tentar :3
    Só mesmo para saberes o teu blog tem me ajudado muito... Já que sou um 0 à esquerda quando se trata do HTML dos blogs TT.TT
    Obrigada por teres posto este tutorial e fico à espera de mais posts :3

    Kissus,
    badinfluence-bruna@blogspot.com

    ResponderExcluir
  3. Esse modelo é super fofo, adorei ><
    xoxo Um Dia Qualquer

    ResponderExcluir
  4. Esse modelo é super fofo, adorei ><
    xoxo Um Dia Qualquer

    ResponderExcluir
  5. Ooh que cute eu amei... tão simples mas tão divo... ♥

    http://animesjaychan.blogspot.com/

    ResponderExcluir
  6. Ótimo tutorial, é super útil e eu acho que fica bem fofinho quando se usa corretamente. E a imagem pequena do lado também dá certo com os próprios favicons né ? *u*

    | Mands, do Mundo Kawaii |

    ResponderExcluir
  7. Gente mais que lindo o marcador do Domo-kun *3* Sim, cuidar de crianças cansa até porque tenho dois irmãos pequenos e realmente é bem cansativo quando fico com eles, mas até que eu gosto de crianças.

    Dream High!

    ResponderExcluir
  8. Cuidar de crianças é tenso mesmo, uhsauhsauhsa'
    Não conhecia esse tutorial, amei o resultado >w<

    ~kiss
    CS ♥

    ResponderExcluir
  9. Wendy seu blog é MUITO LINDO ♥ tipo, muitooooo mesmo! E o post é super útil! Eu ameei *--*' e olha... Te indiquei no FOLLOW FRIDAY do blog hoje! Espero que goste! Beeijos ♥
    http://apequenaka.blogspot.com.br/2014/05/follow-friday-13.html

    ResponderExcluir
  10. Super útil, acho que provavelmente vou acabar usando em um dos meus layouts uheuhe

    Alguém ajuda? Criei o blog hoje.
    crazyhtml.blogspot.com

    ResponderExcluir
  11. Amei,Amei,Amei mesmo a lista com marcadores,o resultado ficou incrível!
    Beijus♥
    Garota Com Lilás ♥

    ResponderExcluir
  12. Amei esse post >.< tenho uma dúvida sobre um layout free seu que eu estou ultilizando no meu blog: http://blogcoisinhasorientais.blogspot.com.br/ Como faz pra mudar a parte escrito "Meus Buunys" e na passagem de slides escrito "Bunny Crazy"? Obrigada ^^

    Kim

    ResponderExcluir
  13. Como assim vc cuida de crianças? É babá? Não sabia disso .
    Amei essa listinha, super organizado e fofo para blogs <3
    Bjs da Mih,
    garotasdohtml.blogspot.com

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345