15 de dez de 2011

Novos estilos para título de sidebar

6488153647_86c788ff7c_b_large
Nerdsssss, te necessito amigo!
Oi meus docinhos de coco! (um acento ali no coco ia dar merda) Hahaha. Tudo bom com vocês? Espero que sim. Hoje trouxe novos modelos de títulos de sidebar. Caso você não saiba do que eu esteja falando, clique aqui, e veja o post explicando. Ah, e fiquei feliz por saber que (quase) todos gostaram do layout. Eu gostei bastante dele! Sem mais blá blá blá, vamos ao que interessa: os novos estilos para títulos de sidebar. E aí, bora?


Título do Gadget
.sidebar h2 {
background-color: #f9f9f9; ---/* cor do fundo */
border-radius: 20px;
border: 1px dotted #ccc; ---/* expressura, tipo e cor da borda */
color: #33cccc; ---/* cor da fonte do título */
font-size: 12px; ---/* tamanho da fonte do título */
font-weight: bold;
padding: 10px; ---/* margem interna */
text-align: center; ---/* alinhamento do título */
text-transform: uppercase;
}

Título do Gadget
.sidebar h2 {
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
color: #ffffff; ---/* cor da fonte do título */
background-color: #33cccc; ---/* cor do fundo */
font-size: 14px; ---/* tamanho da fonte do título */
font-family: georgia; ---/* fonte do título */
font-style: italic;
padding: 5px; ---/* margem interna */
text-align: center; ---/* alinhamento do título */
text-transform: lowercase;
}


Título do Gadget
.sidebar h2 {
background-color: #000; ---/* cor do fundo */
border-radius: 30px;
border: 2px solid #ccc; ---/* espressura, tipo e cor da bora */
color: #fff; ---/* cor da fonte do título */
font-family: georgia; ---/* fonte do título */
font-size: 15px; ---/* tamanho da fonte do título */
font-style: italic;
padding-bottom: 7px; ---/* margem interna de baixo */
padding-left: 7px; ---/* margem interna da esquerda */
padding-right: 20px; ---/* margem interna da direita */
padding-top: 7px; ---/* margem interna do topo */
text-align: right; ---/* alinhamento do título */
-webkit-transition:0.4s;
}

.sidebar h2:hover {
background: #ccc; ---/* cor do fundo ao passar o mouse */
color: #000; ---/* cor da fonte do título ao passar o mouse */
-webkit-transition: 0.4s;
}
Espero que tenham gostado! O último estilo acho que vocês irão gostar mais, por causa do efeito hover. Comentem, e me enviem sugestões para postagens. Beijonas, Emily. 

39 comentários:

  1. Nossa Emily, o layout está lindo e bem diferente do antigo. Esse ta bem jovem, alegre e colorido. Gostei mesmo! Parabéns (:

    ResponderExcluir
  2. Como se coloca eles no blog?

    http://antigomoderno.blogspot.com

    ResponderExcluir
  3. Amei o segundo!!^^
    http://meumundomudando.blogspot.com/

    ResponderExcluir
  4. Adorei mesmo o tutorial, muito útil.
    Está de Parabéns!
    Beijos

    ResponderExcluir
  5. Ah, poderia postar imagens de "Anterior" "Home" "Seguinte"!

    ResponderExcluir
  6. Olá,eu gostaria de fazer afiliação:
    http://blogdasgirls-fefe.blogspot.com/

    ResponderExcluir
  7. Amei o ultimo :)
    Beijos,
    www.theattitudeincluded.blogspot.com

    ResponderExcluir
  8. nuss! eu tavaa precisandoo destes tipoos de personalizaçoes de tituloos da sidebar *--* mt obg! vou colokaar um delees no meu bloog! eu possoo fazeer um pedidoo de tutoo?
    Big Bjoos :*
    http://tudodegarotas-tudopink.blogspot.com/

    ResponderExcluir
  9. Fico feliz em termos você de volta, seu blog desatualizado faz falta, mas que bom que agora está atualizando ele de novo. Só sinto saudades do Place Fame agora.

    Bjs, Rafa
    http://rafadeoliveira-tudosobrequalquercoisa.blogspot.com/

    ResponderExcluir
  10. Adorei o segundo exemplo de gagdet ,
    muito útil mesmo !

    Beijos , Duda
    http://amantesdophotoscape.blogspot.com/

    ResponderExcluir
  11. Oi flor, amei o primeiro e o segundo! Sem falar no blog que é um arraso, os posts são maravilhosos! Passa lá no meu blog, se gostar segue? Porque eu já estou seguindo aqui! Não se assuste com o blog pois acabamos de inalguralo! Por isso só tem um post.
    Beijos!

    http://blog-worldteen-blog.blogspot.com/

    ResponderExcluir
  12. Wnt dlç, o novo layout está muitíssimo diwo *-*

    ResponderExcluir
  13. Muito bom o tutorial! Vai ajudar bastante, ja estou testando :)

    http://freetogirls.blogspot.com

    ResponderExcluir
  14. Lindoooo eu amei o tuto muito útil...super créditos á você ^^
    (blog em construção)

    ResponderExcluir
  15. O Trashy girl voltou, porque não vai lá visitar novamente? Obrigada

    http://trasshygirl.blogspot.com

    ResponderExcluir
  16. Nossa, que tutorial útil, realmente aprovado, só você mesmo né Emily pra trazer esses tutoriais originais e lindos e maravilhosos e tudo mais pra gente aqui!
    Obrigada mesmo <3
    E como já disse no outro comentário, estou loucamente feliz por você ter voltado!

    Beijos! Fernanda.
    www.meianoiteequinze.blogspot.com

    ResponderExcluir
  17. Vale lembrar que efeitos em CSS3 podem não funcionar ou fincionar com alterações em navegadores que não suportem css3.

    ResponderExcluir
  18. Emily, adorei o novo design muito lindo de +. Eu sou super fã da Miley 'rsrs. Mais eu tenho uma curiosidade que nunca consigo descobri...:\. Como coloca esse efeito na letra (meio gordinho) na formatação personalizada a na letra normal? Espero respostas...

    http://extras-for-you.blogspot.com/

    ResponderExcluir
  19. É acho que é isso, dei um print pra você entender, ai você já tem uma base do que é :

    http://lh6.ggpht.com/-FQo0XmE8Y00/TuvX8ZE5UfI/AAAAAAAACuU/38S416VKmfM/s400/print.png

    O que está em sublinha é o que eu queria dizer...

    ResponderExcluir
  20. Oi lindona .. Amei o novo layout e sempre acompanhei o blog .. mas sempre fui uma leitora fantasma ! então vi que vc tem vagas para Afiliação e AMARIA se você fosse minha Afiliada , amaria tanto tanto que eu GRITARIA EU SOU UM AMENDO BOBO YEAH/ by : bob esponja

    então é isso floor ..

    Kissus *3*
    Juu.

    www.ninas-top-stardoll.blogspot.com

    ResponderExcluir
  21. Ata... Entendi :]. Brizei kkk' só queria saber se depois você pode ensinar a colocar os comentários do lado esquerdo em baixo com aquele efeito ??

    ResponderExcluir
  22. Emily, ensina a fazer um menu de categorias tipo o seu?

    jeito-inedito.blogspot.com

    ResponderExcluir
  23. Oii flor, adorei seu blog,ficou lindo a reforma aceita afiliação ?

    www.i--love--y.blogspot.com

    Thau !

    ResponderExcluir
  24. Ual Emily sempre arrasando , e adorei os tutos super feras .
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  25. Há Emily eu quis dizer que parece que todos os seus textos tem um efeito de sombra tipo igual ao titulo da minha postagem do meu blog :

    http://extras-for-you.blogspot.com/

    ResponderExcluir
  26. Nyah que lindos *_*
    A-M-E-I o novo design, parabéns!
    Cherry Bomb.Twitter

    ResponderExcluir
  27. Oii Emily, usei o primeiro, mas fiz umas alterações para colcoar fundo de desenho, ficou lindinho, quer ver? Deixa recadinho '-'

    http://cherrypink-juuh.blogspot.com/

    ResponderExcluir
  28. Oi fofa tudo bem??Eu li a Faq mas não achei a pergunta com a resposta que e queria...Qual modelo do blogger você usou para fazer esse layout lindissimo?Você poderia, por favor, fazer um tutorial sobre isso, se não for querer pedir demais (se você achou que eu fui arrogante, desculpa flor estou tentando não ser, sério mesmo, perdão se estou sendo assim)Você está de parabéns com o blog, nota 10!Beijinhos...Ah você poderia também criar uma c-box, para os leitores poderem divulgar os seus blogs...Fran
    http://123make.blogspot.com/
    seu blog é demais Emily!

    ResponderExcluir
  29. então... Depois quando você tiver tempo, passa esse tutorial?

    ResponderExcluir
  30. Tô fazendo um lay e usei uns tutoriais daqui (mais dei os créditos)
    www.cute-bii.blogspot.com

    ResponderExcluir
  31. Gostei da dica. Pois é muito chato ficar fazendo todos os titulos dos gadgets, assim é mais prático.
    http://amamos-moda.blogspot.com/

    ResponderExcluir
  32. pqp! o meu blog nao funciiona :X
    adorei o tutorial mesmo assim rs *-*
    www.paradateen1.blogspot.com

    ResponderExcluir
  33. Olá :) Queria agradecer os teus tutoriais pois graças a eles consegui mudar o meu blog !!! passei para te dizer que te dei créditos no meu blog :D caso queiras ver podes ir aqui -> http://ocantinhodasofz.blogspot.com/2012/01/tutorial-como-fazer-um-template-como-o.html Obrigado beijinhos da sofz :D

    ResponderExcluir
    Respostas
    1. Oi xuxu, queria um tutorial parecido com esse que é para personalizar o Título da postagem, que é parecido com essa última que passa em cima e muda a cor.

      Me manda um e-mail me avisando: ggarcia12@windowslive.com

      é igual o título desse site: http://www.ladygaga3d.net/

      quero um tutorial dele, me ajude, por favor. Beijos

      Excluir
  34. Me ajudou muito, e os estilos são um mas lindo do que o outro!
    Adolescentes do oposto (Blog no perfil)

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.