Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

Sidebar com fundo hover

Oiee geléinhas de amora tudo bem?? Hoje vou ensinar para vocês como por efeito hover na sidebar igual aqui do blog. Vou mostrar como está os códigos da minha sidebar pelo html do meu modelo:

.sidebar h2{
background: #8B8989 url(http://static.tumblr.com/koam7dd/7wAmaylha/la__o_7.gif) no-repeat;
padding: 10px 0 10px 50px;
background-position: 7px 8px;
font-weight: 600;
margin-top: 9;
margin-bottom: 9px;
color: #FFF;
text-transform: uppercase;
font-size: 12px;
font-family: 'Lobster Two', cursive;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;     
}

Caso a de vocês não estiverem assim, estarão praticamente quase igual pois as vezes é uma coisa ou outra que muda nos códigos, independente de como está o código do corpo da sua sidebar, esse código hover funciona em quase todas as sidebar, até onde testei nas minhas, todas funcionaram. O código para fazer o efeito hover no fundo da sua sidebar é esse aqui:

.sidebar h2:hover {
background: #7FFFD4; ---/* cor do fundo ao passar o mouse */
color: #000; ---/* cor da fonte do título ao passar o mouse */
border-radius: 30px;
text-align: center;
border: 2px solid #696969; ---/* espressura, tipo e cor da bora */
color: #fff; ---/* cor da fonte do título */
-webkit-transition: 0.4s;
}

Aqui está as cores que eu uso na minha sidebar, mas vocês podem mudar as cores, o tamanho da borda em volta onde ficará o texto alinhado se é no meio, esquerda ou direita, cor da fonte e o tempo da transição do efeito. É isso meus amores, super fácil e com um efeito muito legal, eu vejo em outros blogs efeitos hovers nos títulos mas no fundo até agora não vi nenhum blog com esse efeito igual ao da minha sidebar. Beijos lindos e lindas espero que tenham gostado do tuto de hoje =)

16 comentários:

  1. Adorei o tutu, fica meuito lindo amei*OOOOO*

    ResponderExcluir
    Respostas
    1. Lindo neh? tbm acho super fofo esse efeito ;P

      Excluir
  2. Legal , vou utiliza-lo depois :)
    Pode seguir ?
    purpurinadelycadah.blogspot.com

    ResponderExcluir
  3. Adorei o tuto =)
    Muito bem explicadinho
    http://infinitoficticio.blogspot.com.br/

    ResponderExcluir
  4. Yo! Peço desculpas pela demora a responder, fiquei sem net por um tempo mais sim, eu aceito sim afiliação bems e ainda não decistiu pela demora t.t

    Ate de noitinha eu irei colocar lá na minha coluna. Fico feliz pela afiliação.

    ResponderExcluir
  5. Yo, já te cloquei lá nos meus afiliados

    ResponderExcluir
  6. Nyah amei o meu avatar *-*
    Hihi já estou seguindo e obrigada por seguir

    ResponderExcluir
  7. http://sonhosshoujos.blogspot.com.br/2012/11/selinho.html#comment-form

    ResponderExcluir
    Respostas
    1. Já respondi sobre seu selinho lindaaa obrigada <3

      Excluir
  8. Amei pode seguir???
    http://supervaidosa74.blogspot.com.br

    ResponderExcluir
  9. Eu estava louca atras desse tuto.Tentei fazer sozinha e a side ficou locona,mudou o back,desconfigurou toda!

    ~Seguindo
    cherrygo.blogspot.com

    ResponderExcluir
  10. Yoo
    Olá meu nome é Thais, bom já faz um bom tempo que ando tendo blogs mais fazer layout não sei muito bem, queria deixar um layout a meu gosto uma coisa minha mais não sei nada sobre o assunto queria saber se você fez algum tipo de curso o meu estilo de blog eu digo aparência é praticamente o mesmo gosto amei o blog muitoooooo , Adorei muito aqui e queria saber também como fazer um menu com imagens, e como fazer o slide que você fez ali em cima.
    Arigato Koh-chan!

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)