Efeito para título da sidebar



Olá pessoas fofas *3*
Estou muito chateada com umas pessoas (não são vocês, são da minha escola, mas não citar nomes, pois elas visitam o blog). Acham que, porque dizendo elas, são perfeitas e podem humilhar os outros. E cara, elas não são perfeitas. Mas tem gente que não tem vergonha na cara mesmo e fica se achando porque pega vários garotos. E daí? Eu tenho um namorado e nem por isso distribuo panfletos de anúncios de que eu e ele estamos juntos. Acho isso a maior besteira e infantilidade por parte dessas garotas. Parecem um bando de atiradas sem costumes que sofrem de carência aguda!

Mas enfim, enfim, a Júlia do blog Paraíso Abstrato pediu o tutorial do efeito que estou usando no título da sidebar pela C-Box. Pra quem não sabe do que eu tô falando, é esse fundo rosa retangular que, quando passamos o mouse ele muda de cor. É tão meigo
Então, simbora *u*


Procure por: .sidebar .widget {  . Você vai encontrar algo parecido com isso:
.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}
Apague tudo isso e cole:
.sidebar .widget {
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
margin: 17px -13px;
border: 1px solid #e3e3e3; /*SUA COR*/
Background: #fff;  /*SUA COR*/
font-family:  silkscreen;
font-size: 12px;
-webkit-transition-duration: .50s;
border-top: 3px solid #fcc1c8; /*------------Cor da barra de cima------*/
border-bottom: 3px solid #fcc1c8;  /*------------Cor da barra de baixo------*/
box-shadow: inset 0 0 6px #e2e1e1, 0 0 1px #ccc;
-webkit-transition-duration: .80s;
}

Agora, acrescente:

.sidebar h2 {
text-align: center;
margin-top: 1px;
padding-bottom: 4px;
background: #fcc1c8; /*COR DE FUNDO NORMAL*/
padding-left: 10px;
font-family: Arial;
color: #fff;
font-size: 16px;
font-weight: lighter;
line-height: 13px;
padding-top: 4px;
margin-bottom: 4px;
-webkit-transition-duration: .80s;
}
.sidebar .widget h2:hover {
background: #c0e7ff; /*COR DE FUNDO HOVER*/
-webkit-transition-duration: .80s;
box-shadow:inset 0 0 3px #9C9C9C,0 0 0px #c3c3c3;
}

Salve. Lembrando, não usem minhas cores ok? u3u
Kiss

88 comentários:

  1. Desculpe nem entrar no PC ontem, mas explico depois, hehe, bom, adorei o tuto <3
    kiss~

    castle-madness.blogspot.com

    ResponderExcluir
  2. Nossa é meigo mesmo, adorei ele, é super facil de fazer (:

    XOXO :D
    jovenclube.blogspot.com.br

    ResponderExcluir
  3. Adorei o tutorial, ajudou bastante *uu*
    ~~ candyteen-official.blogspot.com

    ResponderExcluir
  4. Já conhecia, mas é muito útil, também é bem padrão ^u^

    http://asiansicons.blogspot.com.br/

    ResponderExcluir
  5. Awnnnnnnnnnnn, é realmente muito fofo esse modelo, Mandi *O* Adorei demais, é bem fácil de aplicar e ajudou muito!

    Beijinhos,

    Juu-Chan ;3 | Nescau com Nutella

    ResponderExcluir
  6. Adorei o tutorial, bem pratico!

    Beeijos
    Tem post novo!
    http://girlswithstyles.blogspot.com.br/

    ResponderExcluir
  7. Otimo tuto .
    Aqui não precisa postar na quarta (amnha -21) não posta na sexta ok ?
    bjss
    http://mymomentsz.blogspot.com.br/

    ResponderExcluir
  8. Huaeuhuahsua~sofrem de carência aguda mesmo
    Kkkkkk
    Adorei o efeito,pena que eu ñ sei usar ç__Ç
    AAAAAAAAAAAAAHHH...O seu layout tá muito kawaiii >3333333<
    Ameeii ameiii !!Quando vi que o blog tv fechado quase tive um treco o--o
    Bjuu-bjuu :**

    Otakada Kawaii

    ResponderExcluir
    Respostas
    1. Ashushua só pode :p
      Obrigada, poxa, tenta vai haha'
      Aaaah, obrigada sua diva. Ahuehue, sério? Na próxima eu aviso :p

      Excluir
  9. Adorei o tutorial :) acho que vou ate usar ;)

    kisses!

    lost--time.blogspot.com

    ResponderExcluir
  10. Adorei o tutorial.. Bem explicado > <
    Lindo seu blog ^ ^

    www.PRINCEDREAMER.com

    ResponderExcluir
  11. Taca cocô de pombo nelas e quero ver se elas continuam se achando perfeitas u___u' ASUAHSHASUAHSUHAUSHA
    Mandi, primeiro, me explica, que layout é esse? Eu não gostei não... sério. Eu AMEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEI! Tá tão perfeito, meigo e diwo, please, arrasou! Adorei o tuto! :33
    Beijos!
    bonjour-uneglacee.blogspot.com

    ResponderExcluir
    Respostas
    1. Ahuehuehue, vou fazer isso mesmo, sua fofa :3
      Ashusahua de primeira, você me assustou sua divaaa <333
      Obrigadaa ahuehue *333*

      Excluir
  12. É fácil e fica muito lindo! Eu já passei por isso é muita infantilidade da parte das meninas, não ligue mesmo. Um dia elas se tocam como isso é ridículo. E o importante é ter quem a gente gosta não qualquer um para se achar a tal mais tarde esses caras é que vão estar falando delas.

    Mundo de Liina

    ResponderExcluir
    Respostas
    1. Obrigada *u*. Concordo, mas tomara que não seja tarde né ahuehue. É mesmo, e tomara que elas percebam mesmos que isso é ridículo!
      Kiss
      With You

      Excluir
  13. Eu A M E I o tutorial. Ficou tão fofinho. Sim, de verdade, ele é mesmo muito meigo, mas eu sou um pequeno desastre quando o assunto é HTML. E te elogiando mais, eu amei o novo layout, ficou tão encantador. Awn, perfeito demais! ♥

    Um beijinho,

    - Navy Cupcake

    P.S.: Acho que as vezes, devemos ignorar certos comentários. O que essas garotas fizeram, acho que é tudo inveja. Porque você tem um namorado que te ama, e elas estão sozinhas e daí, ficam beijando todos os garotos que veem pela frente. Desejo tudo de bom à vocês dois!

    ResponderExcluir
    Respostas
    1. Obrigada, fico feliz por gostar do tuto e do layout <3 Nada, tenta que você consegue!
      Obrigada, concordo. Obrigada, espero que de certo mesmo *3*

      Excluir
  14. É muito lindo o efeito!
    Seu blog é perfeito, OMG, muito lindo >3<
    Gente que pega vários meninos são umas vadeas, desculpa mas é a realidade, haah

    Kissus~~
    >> Photos and Camera

    ResponderExcluir
    Respostas
    1. Obrigada >u<
      Onwt, sério? Thaankss *u*
      Haha, isso é fato, que isso, é verdade mesmo ahuehue u_u

      Excluir
  15. Adorei ^^ Achei que era mais difícil. Inscreve essas perfeitinhas nos Jogos Vorazes kkkkk
    Um beijo
    http://bombasticmusics.blogspot.com

    ResponderExcluir
    Respostas
    1. Kkkkkk ri com seu comentário *3*
      Obrigadaa, acho que voou fazer isso mesmo :P

      Excluir
  16. Pega mais garotos, nossa! Que legal ser mais rodada que pratinho de microondas -3- Me poupe. Quando você tiver rica e nadando no dinheiro, as moças vão estar cuidando da cheche particular ;) Não se preocupe.

    ResponderExcluir
    Respostas
    1. Kkkkk pegar mais garotos? Kkk sóqnão, to legal com meu namo :p. Kkkkkkkkk espero que aconteça :P

      Excluir
  17. O efeito é simples, mas fica tãaaaaao cute. Nem sei como não fui eu a pedir o efeito antes. rçrç, manda essas meninas se enroscarem com Cronos no Tártaro, ninguém é obrigado a aturar essas peste. bezzo, sarah
    http://agd-doce.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ashusahua, obrigadaa <3 Ahuehue :p
      Sabe que é mesmo? Cronos vai adorar matar elas u__u ahuehue

      Excluir
  18. Amei o tuto, mas tentei coloca-lo no blog e não consegui porque não acho ".sidebar .widget { . " Poderia me ajudar, a acha-lo no novo html? haha
    Beijos, blog atualizado!
    coff-cake.blogspot.com

    ResponderExcluir
    Respostas
    1. Oh, você tá fazendo errado, não tem esse ponto no fim não ;)

      Excluir
  19. igual o seu??? adooreiii o/ só não uso, pq meu layout ja ta pronto o/ :(
    kkkkk mas adorei vou salvar pra que futuramente eu venha a usar!
    acervo-de-livros.blogspot.com

    ResponderExcluir
  20. Na minha classe é a mesma besteira, 'fica' com um e fala para meio mundo que beijou. Idiotice.
    Lindo esse efeito! Achei meio parecido com o do Miki Candy :33

    Com carinho, Ammy | SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. É, isso é muito chato mesmo!!
      Obrigada, depois que fiz que fui perceber isso ahuehuehue *3*

      Excluir
  21. Adorei o efeito! Como sempre, muito lindo!
    E, realmente, já passei por isso, pessoas querendo me humilhar. No início, aquilo realmente me machucava. Mas depois, comecei a ignorar e procurava sempre dar o meu melhor. Logo essas pessoas se calam...
    Parabéns pelo post!

    Abraços!

    Peças de Oito

    ResponderExcluir
    Respostas
    1. Obrigadaa >3<
      É machuca mesmo, mas acho que isso é puro recalque mesmo ahuehue. É, o melhor é ignorar mesmo ;P

      Excluir
  22. Esse efeito é mesmo muito bonito, ótimo pedido daquela fofa >.<' super simples o tuto!
    e seu blog é lindo demais, amei!

    Adolescente Nerd

    ResponderExcluir
  23. Na minha opinião isso além de ser infantilidade, é também futilidade! No fundo elas são frustradas (e tentam diminuir os outros para se sentirem melhores). Simplesmente ignore =)
    Muito bom o tutorial!!
    beijoss

    www.entorpecendo.com

    ResponderExcluir
  24. Que tutorial ótimo! E o resultado fica muito lindo *-*

    Bjs
    de-livro-em-livro.blogspot.com

    ResponderExcluir
  25. Deve ser bem fofo, vou experimentar depois u__u'

    Beijos System Tough ♥

    ResponderExcluir
  26. Adorei o tuto e também já seguindo!

    Visite e siga:http://shisy-things.blogspot.pt/

    ResponderExcluir
  27. Ata, agora entendi porque não conseguia hehaoehiou :3 Mas mesmo assim, já fiz um outro lay e queria te pedir uma coisa Mandi *u* Gostaria que você fosse até o meu blog e conferisse pra mim se o menu e o cabeçalho estão certinhos. É que no meu not, ele parece desconfigurado, já no da minha mãe tá certinho. E me avisa por favor? Muito obrigada. Beijos
    coff-cake.blogspot.com

    ResponderExcluir
  28. Oi, obrigada *3*. Obrigada, sigo sim :3

    ResponderExcluir
  29. Que tutorial perfeito* o resultado deve ficar incrível no blog
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  30. Eu ainda não tinha notado que mudava de cor quando passava o mouse por cima, que meigo!!! *-* haushuash
    ~Beijos
    Panther Pink and Blue

    ResponderExcluir
  31. Vish, credo, odeio pessoa exibida..
    que fofo :333

    http://welcome-to-kawaii-land.blogspot.com.br/

    ResponderExcluir
  32. Mandiiii, que lay perfeito cara, tive que conferir se tava no With You mesmo haha, o lay antigo ja era lindo e esse superou todas as expectativas hehehe, ta lindo de morrer <3 e não liga sobre essas meninas ai não, como tu disse, isso ai é carência aguda, só pode u.u e ah, o efeito é meigo mesmo, to querendo da uma mudada no lay do meu blog dai quem sabe coloco ele né? :3

    Beijos, Monalisa com S

    ResponderExcluir
    Respostas
    1. Ahuehue, obrigada sua fofa <33
      Kkk é sim, por que né? :p
      Obrigada, espero que coloque sim u_u

      Excluir
  33. Fica bem fofinho *..*

    David - Leitor Compulsivo

    ResponderExcluir
  34. Odeio gente assim ç3ç'
    Gostei desse modelo >3<

    Beijos ~
    garotas-cupcakes
    kawaii-world

    ResponderExcluir
  35. Sempre tem esse povo metido, odeeeeeio. Mas relaxa, Mandi, esse povo aprende as lições da vida... E sobre o tutorial, é ótimo, fica super lindo! *-* Beijos!

    Rediscovering Dreams

    ResponderExcluir
  36. Essa side é muuuuuuuuuuuuuuito linda, credo *uuuuuuuu* Amo amo o efeito, achei o tuto ótimo <3
    Também odeio gente desse tipo, que precisa fazer os outros se sentirem mal, para se sentirem bem u-u
    Ui, desculpa aí, a Mandi tem um namorado KKKKKKKKKKKKKKKKKKKK <3
    Mil Beijos ❥
    Garotas Atrevidas ❤ ~clique e visite

    ResponderExcluir
    Respostas
    1. Ahuehuehue, obrigada :P
      É mesmo. Eiii, ahuehue, tenho sim sua divaa :3

      Excluir
  37. Realmente é muito fofo mesmo.. Ótimo tutorial <#

    - HTML Secret

    ResponderExcluir
  38. Vontade de matar essas filhas da puta, né? Manda ir logo elas tomarem no cu e tá tudo certo. ;P

    Eu amei esse novo layout, acho que foi o mais lindo que você já colocou aqui no blog, Mandi. Sério mesmo, está perfeito como sempre! <3

    Adorei o efeito. Como você disse, muito meigo >.<

    Beijos, Annie || Retribui visita? <3
    >>> rainhadosubmundo.#blogspot.com.br <<<
    (Retire o jogo da velha (#), caso venha me fazer uma visitinha *U*)

    ResponderExcluir
    Respostas
    1. Hahaha, que iço joven? Ahuehue, violênciiia <33
      Obrigada, sóqnão :p

      Excluir
  39. Que fofo o modelo adorei ! beijos




    vanessatutoriais.blogspot.com

    ResponderExcluir
  40. Oiiiiiiiiiieeeeeeee,como vai????
    Nossa,que post lindo. Vc mudou o template? não me lembro dele ser assim xDD tá lindo.
    enfim,venha visitar meu blog,novo post >>
    http://gliter-lovely.blogspot.com.br/
    bjookas

    ResponderExcluir
    Respostas
    1. Oiiii, vou bem e você :3
      Ahuehue, mudei sim :) Obrigada!
      Claro, acabei de ir >3<

      Excluir
  41. Adorei o tutorial! Quero mais e mais!!!


    Teen Cat | Um mundo onde tu és sempre bem-vinda!

    ResponderExcluir
  42. *OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO* Que layout perfeito, ainda não tinha visto, e esse modelo é tão meigo, tão fofo, tão divo ♥ Amei, Huhusauahsua'
    Pumpy Dreams

    ResponderExcluir
  43. Belo Tuto adorei ^^

    worldofthel.blogspot.com.br

    ResponderExcluir
  44. Eu amo esse efeito , sabia ?
    Como eu disse no post acima , eu tenho preguiça de mexer , e além de grande e complicado , se errar uma coisinha , bagunça tudo!

    ~Beijocas na xexa~
    cha-de-boneca.blogspot.com

    Quer aflição ? Comente de volta se sim .!

    ResponderExcluir
    Respostas
    1. Obrigada :3
      Ahuehue, com o tempo você pega prática ;)
      Claro que sim, já vou te colocar na elite!!

      Excluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ