31/07/2013

Marcadores com efeito Zoom Label


Kon'nichiwa ogenkidesuka? Bom eu estou meio que enferrujada rs' ficar quase 2 meses sem postar da nisso, mas quero agradecer pelos 1110 seguidores, realmente nunca pensei que meu blog poderia chegar a tanto. Comecei o blog apenas como uma distração e nunca pensei que teria tantos leitores e seguidores, então só devo agradecer a vocês por isso. Hoje mesmo vou começar o novo layout para dar inicio ao sorteio e decidir as regras. \o/ Estava em duvida do que sortear então decidi começar sorteando um domínio valido para um ano. Mas vamos logo ao tutorial de hoje, ne?


Hoje eu trago um menuzinho para marcadores, ele é um menu pequeno que ao passar o mouse faz efeito de zoom. Perfeito para quem não gosta de usar tags. Para começar vamos remover as bolinhas pretas que vem nos marcadores se você já tiver removido pule o primeiro passo.

1. Para remover vamos ate o  ]]></b:skin> agora acima cole:

Códigos
 #tabdiv li, .sidebar li {
list-style-type:none;
}

Salve!

2. Agora vá ate seu layout e adicione um gadget de marcadores do blog. Ele deve ficar exatamente como mostro abaixo:


3. Depois disso vá ate seu HTML e procure por  ]]></b:skin> acima adicione este código: 

Códigos
/*Zoom Label By Bunny Crazy--*/ @font-face { font-family: "Pf Arma Five"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); } .cloud-label-widget-content { text-align: center; } .label-size a { float:left; display: block; height: 10px; margin: 2px 2px 0 0; padding: 3px; border: 1px solid #afe7ee; background: #f5f5f5; font-size:8px; color:#666; font-family: "Pf Arma Five"; text-transform: uppercase; text-decoration:none; -moz-border-radius:7px;-webkit-border-radius:7px;-o-border-radius:7px;-ms-border-radius:7px;border-radius:7px; } .label-size a:hover { color: #666; border: 1px solid #afe7ee; background: #eafcff; text-decoration: none; -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s; } 

Verde: bordas
Vermelho: Fundo do menu
Roxo: Cor do texto
 
Arrume as cores como desejar e salve.

27 comentários:

  1. Fofinho o Efeito, é legal não ter que colocar em menu os marcadores.

    semprefuiestranha.blogspot.com |SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. Hehe ne? É bom que não meche com muito código

      Excluir
  2. OMG, esse é o blog mais perfeito que eu já visiteeeeeeei *3*
    LINDO, LINDO, LINDO.
    Seguindo, é claro né *3*
    *OOOOOOOOOO*
    Aposto que o meu amor, Grell, iria amar *3*

    ResponderExcluir
    Respostas
    1. >//////< Agradeço o elogio, fico contente que tenha gostado tanto.
      Hihi ainda farei um lay vermelho do Grell <3

      Excluir
    2. Faz mesmoo *3* Vai ficar diwo *3****

      Excluir
    3. *-* Sem duvidas que sim.

      Excluir
  3. Que lindinho , rsrs , adorei *o*
    Seguindo :)

    Beijos de Nutella - nham nham,
    Menina Chic ♥ | Passa aqui?

    ResponderExcluir
  4. Esse menu fica super cute *o* adorei!
    Obrigada pelo tuto!!

    Já agora felicidades pelos 110 seguidores
    eheheh nós nunca pensamos que poderemos ter muito seguidores, mas o nosso blog, como o Bunny Crazy tornam-se super lindos e interessantes e depois tem muito sucesso! ^^- Espero que esse sucesso continue e que cada vez mais tenho mais e mais bons leitores que possam ler e comentar este cute blog ^^-

    Kissu ~♥ || Pankax&Pankadax

    ResponderExcluir
    Respostas
    1. Ain que bom que gosto Rafa *o* Eu que agradeço.

      Hihi verdade, e agradeço pela força e por você ser um desses leitores que sempre esta por aqui e desejo o mesmo para o Pankax&Pankadax que cresce bem rapidinho.

      Excluir
  5. Além de prático de colocar, é muito lindo *-* Amei esse efeito, nossa *-* Acho que vou usar no meu próximo layout u.u
    Ah, parabéns pelos 1110 seguidores, espero chegar aí um dia hehehe
    bj bj
    sorrisomet4lico.blogspot

    ResponderExcluir
    Respostas
    1. Tomara que use vou amar ver em seu blog. =^.^=
      Obrigada Emily com certeza ira sim *-* estou torcendo por isso.

      Excluir
  6. Acho bem mais fácil assim, fica fofo :3

    Kawaii Land

    ResponderExcluir
  7. Anônimo3/8/13

    Amei o efeito *-*

    ResponderExcluir
  8. ADOREI o efeito e amei o tutorial, super bem feito *-*

    Naka-chan no Sekai

    ResponderExcluir
  9. Que fofo ><
    Adorei o tutorial!
    Beijinhos ;3

    http://cantinhodaslovelys.blogspot.com.br/

    ResponderExcluir
  10. Adorei o efeito, segue de volta wendy? beijos

    Fernanda | http://epidemiadosblogs.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi linda que bom que gostou. Faço uma visitinha se gosta sigo sim

      Excluir
  11. Preciso da ajuda de vocês, eu estou tentando abaixar o layout free (Bunny Crazy)
    Mas ele aparece escrito assim: XML (algo assim) ele nao esta fechado corretamente algo do tipo, como eu faço para abrir e retirar ele? Eu ja tentei de várias formas e não consigo, você poderia colocar ele para mim?
    http://brigadeiro-vintage.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi fofo basta baixar ele e ter o programa winrar e extrair. Todos os arquivos estão dentro dele como o PSD para o cabeçalho, mas se não consegue baixa-lo eu tento mandar o código aberto para você.

      Excluir
  12. Anônimo5/8/13

    Ola eu amei o blog tem um ótimo conteudo eu amei
    beijoss
    Olha eu to seguindo e ficaria muito feliz se seguisse de vouta
    beijoss..

    Complicada & Imperfeita* Adolescente*



    ResponderExcluir
    Respostas
    1. Agradeço Mariia fico contente que goste.
      Eu faço uma visitinha se eu gostar sigo com certeza ^^

      Kiss

      Excluir
  13. Anônimo28/6/14

    No meu não tem ]]> o que eu devo procurar ?

    Bjs ,adoro o seu blog !

    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