Títulos dos gadgets "em caixas"

|

Cherries, quantos comentários! Estou tentando responder todos mais além dos comentários do blog tem vários e-mails com pedidos de layouts, ou seja estou super atarefada. Mas até acho isso bom, é sinal de que o blog está progredindo! Só que tem um lado ruim, meu tempo fica mais curto, então posso demorar um pouquinho para postar. Então se eu ficar uns dias sem postar não pensem que eu desisti de novo tá?

Agora chega de papo e vamos para o tutorial de hoje. Ele foi pedido já faz um tempo, mas resolvi postá-lo mesmo assim. Com este post vocês irão aprender a deixar os títulos dos gadgets em cima do gadget e com o fundo retangular, como se fosse uma caixinha. Não entendeu? Então veja como fica:




Aviso: Antes de fazer esse tutorial, você tem que separar os gadgets da sidebar. Veja como neste post.
Depois de terminar, vá no modelo HTML do seu blog, e cole o código abaixo antes de ]]></b:skin>

.sidebar .widget {
padding: 10px;
margin-bottom: 50px; /*Espaço entre um gadget e outro*/
}
.sidebar .widget h2 {
background: #000; /*Cor do fundo do título*/
width: 150px; /*Largura do fundo, aumente se precisar*/
font-family: Verdana; /*Fonte do titulo*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: normal;
line-height: 14px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/
margin-top: -30px; /*Quantos pixels o título "sobe"*/
margin-left: -10px;
padding-left: 5px;
box-shadow: 1px -1px 2px #9a9a9a;
-webkit-box-shadow: 1px -1px 2px #9a9a9a;
-moz-box-shadow: 1px -1px 2px #9a9a9a;}
No próprio código tem as explicações do que alterar. Se quiser tirar a sombra é só apagar a parte que está em verde. Espero que funcione tudo certinho aí para vocês!
Cherries, eu e minha prima criamos uma página de frases e textos no face, se chama Apena Palavras, deem uma olhada lá e se gostarem, curtam! Obrigada :)

Kissus, Liah

93 comentários

  1. Primeira a comentar \o . Adorei o tutorial :)

    www.teenlist.blogspot.com

    ResponderExcluir
  2. Adorei o tutorial,
    no próximo lay pode ter a certeza que utilizo,
    Beijos,
    http://be-happy-s2.blogspot.pt/

    ResponderExcluir
  3. Awn, liah, eu ia pedir este tutô agorinha pra tii! Adivinhô, heein! Queria pedir outro tutô, eu ando visitando uns blogs e eles tem tipo, umas faixinhas que não saem de cima mesmo qdo vc desce a página! Será possivel? Beeijos!!
    http://pqngarota.blogspot.com

    ResponderExcluir
  4. Adorei o resultado!
    Fica lindo!
    Próximo layout vou usar o tutorial!

    Beijos,
    http://mundorosaachock.blogspot.com.br/

    ResponderExcluir
  5. Ainda bem que o CB está progredindo, também né, não tem como não progredir um blog lindo e inspirador desse. Enfim, eu estava procurando esse tutorial e os que eu achava ficava muito junto. Vou tentar fazer e ver como vai ficar!

    Beijos,
    Paraíso de Menina | Sorteio de um par de brincos + colar. Participe!

    ResponderExcluir
  6. O resultado do tutorial fica lindo, vou usar qualquer dia desses. Sobre a página do Facebook, já vi e já curti, adorei ♥
    Arrasou, como sempre Liah ;D
    Smach:3 | http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  7. Eu já conhecia esse tuto, fica muito fofo mesmo. Usava ele no meu outro layout. ♥

    Beijos,

    vidadathais.blogspot.com

    ResponderExcluir
  8. Adorei o tutorial , tava querendo aprender (:
    Liah , adorei seu layout da Liz Gillies !

    xoxo , Meg .
    heartcake-hc.blogspot.com

    ResponderExcluir
  9. Adorei o tutorial Liah. Assim é muito mais fácil a pesquisa não é?

    ResponderExcluir
  10. Muito bom,o tuto Liah.Eu tenho 2 blogs:mikiecandye.blogspot.com e o rihanna-is-navy.blogspot.com

    ResponderExcluir
  11. Poxa Liah, você é demais! Eu tava querendo saber como fazer isso mas nunca encontrava, sério, me ajudou muito!

    PS.: Já curti a página no facebook

    Beijos ♥
    www.garotadeallstar.com

    ResponderExcluir
  12. Amei o post flor!!

    codigogirlsoficial.blogspot.com

    ResponderExcluir
  13. Estava ansiosa por esse post obrigada *-*

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

    ResponderExcluir
  14. Liah desculpe não está falando do tuto, ok? Desde ontem quando clico para seguir um blog minha foto não aparece na aba do google friend conect e talz, dai aparece que eu segui o blog la na aba mas no gadget seguidores não aparece, pode me ajudar?

    Beijos♥

    carismaticaoficial.blogspot.com

    ResponderExcluir
  15. Desse jeito fica super lindo, se eu não me engano, você usava assim no seu antigo layout! Ah, vou fazer no meu próximo, fica tão lindo *-* Visite sempre no GQ, é uma honra te ver lá.

    Beijos,
    Anna
    http://garota-queen.blogspot.com/

    ResponderExcluir
  16. ooi ameeeeei seu blog e perfeito pq nao faz um site :D:D e olha eu nao entendi como mudar aquilo entre os asteriscos exempo/#*mudar a cor/*
    pode me explicar?

    ResponderExcluir
  17. Liah, e para fazer isso em um só gadget?

    ResponderExcluir
  18. Amei o post! Tava precisado de alguma coisa criativa pra fazer com os títulos da sidebar mesmo... Obrigada! :D
    http://notthatwonderland.blogspot.com/

    ResponderExcluir
  19. Aah Liah no meu deu tudo certo exceto por uma coisa: Eu aumento o valor para separar os gadgets e a caixinha continua invadindo o outro gadget. Me ajuda? Beijoos

    cherry-blow.blogspot.com

    ResponderExcluir
  20. Adorei o tutorial, vou fazer no próximo design!

    Beijos,
    http://placestyle.blogspot.com.br/

    ResponderExcluir
  21. Ameeeeei o post, adoooro seu blog! *-*
    http://teengirlssss.blogspot.com.br/

    ResponderExcluir
  22. Adorei e já tô usando,mas surgiu uma dúvida :/ , como faço pra mudar a cor da fonte? Bjs

    www.moreninhadesigner.com

    ResponderExcluir
  23. Super tutorial, Liah. Adorei*-*
    http://menina-do-sol.blogspot.com.br/

    ResponderExcluir
  24. Acho que vou usar Liah *-*
    beeijim ;*
    ~~> sweet-wordeland.blogspot.com

    ResponderExcluir
  25. Que legal! adorei o tutorial!
    novajuventudexxi.blogspot.com.br

    ResponderExcluir
  26. Muito útil o tutorial!! Depois vou usar *-*

    http://garotavertigem.blogspot.com/

    ResponderExcluir
  27. Muito útil o tutorial!! Depois vou usar *-*

    http://garotavertigem.blogspot.com/

    ResponderExcluir
  28. Super demais o resultado!! Visita?? aceita afiliação??
    http://depoisdodesfile.blogspot.com.br/

    ResponderExcluir
  29. AAAAAAAAAAAAINW NAO ACREDITO ! eu tava procurando esse tutorial u__u ! Sérião estav procurando ... quero usar no meu próximo design e conserteza vou usar mais te doou os créditos ok liah u_u s2 ! Kissus tá super fodastico aqui shaushau !
    guidymania.blogspot.com

    ResponderExcluir
  30. Puxa que legal esse tuto ^^ Acho lindo o design do CB, e adoro quando você ensina a fazer esses detalhes lindinhos!

    Então Liah, eu tava bem "de saco cheio" da blogosfera. Muita falsidade, muito desrespeito, precisava de um tempo. Decidi voltar com algo mais simples, sabe? E mais verdadeiramente "eu".
    Fico feliz por ter sentido minha falta :3

    xx
    putmerd.blogspot.com

    ResponderExcluir
  31. Já usei esse tutorial no meu blog! Posso te pedir um tutorial? O tutorial que eu gostaria de ver aqui no blog é de como fazer a data ficar igual a sua do lay novo! Espero ver esse tutorial aqui! Beijocas

    http://blogprimeiroserros.blogspot.com.br/

    ResponderExcluir
  32. Liah, eu queria saber qual é o nome da fonte que você usa no titulo das postagens?

    ResponderExcluir
  33. Liah, eu queria saber qual é o nome da fonte que você usa no titulo das postagens? Me mande um comentario com a resposta

    http://blogprimeiroserros.blogspot.com.br/

    ResponderExcluir
  34. Heey Liah, amei esse tutorial guria, vou usar no meu próximo lay !
    Dá uma passadinha no meu blog ? Adorarei sua visitinha lá !

    Beijos;*

    http://mundodatwotwoka.blogspot.com

    ResponderExcluir
  35. AAh, que fofo esse efeito! Se a minha sidebar fosse separada, eu usaria esse tutorial com certeeza! XD

    Beeijo
    www.blogmymemories.com

    ResponderExcluir
  36. Muito legal esse tutorial. O CB é lindo,tem um design maravilhoso e um conteúdo muito bom!

    http://victory-blog1.blogspot.com.br/

    ResponderExcluir
  37. Ah Liah, impossível não amar uma blogueira tão simpática quanto você! Sempre está nos atendendo não é? Ficava na vontade de usar esse código para por nos títulos dos gadgets. É uma pena que já tenha personalizado o do blog, caso contrário usaria sem dúvidas.

    Um beijo, Anna.
    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  38. bem legal o tutorial, mas eu queria saber como vc consegue fazer isso em um gadget só

    ResponderExcluir
  39. Owwnt acho lindo esse efeito. Mas fiz tipo, uns 5 layouts com ele...

    Aí acabei enjoando... kkkkk!

    Beijos!

    delicadissima.com

    ResponderExcluir
  40. não sabia como fazer eles assim xD

    www.ejhonas.com

    ResponderExcluir
  41. Adorei o tutorial bem facil.
    Fico feliz que tudo esta melhorando vc realmente merece.beijos

    ResponderExcluir
  42. Oiii linda, hihi gostei do tutorial o unico problema e que mesmo assim eu me enrolo pra faze hihihi...
    beijokas

    vicio-demenina.blogspot.com.br

    ResponderExcluir
  43. Super util, tava pensando em por isso no mau lay novo...

    Deixa eu perguntar, naquele tuto de como personalizar a data dos posts, eu não to conseguindo nem deixar ele pra fora da área de posts, e nem deixar o título dos posts do lado, sempre fica um pouco pra baixo :(
    Poderia me ajudar?

    Beijos, amo seu blog *-*

    ResponderExcluir
  44. Que post maravilhoso esse super fácil de fazer adorei muito.
    http://animesmaniabr.blogspot.com.br/

    ResponderExcluir
  45. Liah Eu Tenho uma dúvida ! O Meu Photoshop CS5 Portable quando eu quero escolher a Fonte aparece só o nome dela com uma fonte normal Exemplo Arial ! Eu Gostaria que a fonte aparecesse não tem Como ? Please me responda

    ResponderExcluir
  46. Ótimo tutorial Liah! Gostei!

    Obrigada pela sua visita, ela é muito importante pra mim viu? Volte sempre amore♥ Blog Sorteio-Anel Laço

    ResponderExcluir
  47. Ótimo tutorial Liah!! Sempre trazendo coisas boas né?? Fica lindo não?? Um abraço!!

    ~> dicasblogspot-db.blogspot.com

    ResponderExcluir
  48. adorei o tutorial liah, faz um tutorial ensinando como colocar ribbons nos titulos dos gadgets! Beijos

    theteenagersplace.blogspot.com

    ResponderExcluir
  49. Ah, que legal xD adorei!
    Suuper sorteio lá no Smash, suuper mesmo !! Visite --> http://www.smashofficial.com/2012/07/novo-design-suuper-sorteio.html

    ResponderExcluir
  50. Com toda certeza! O CB está progredindo sempre, não é par amenos, é sempre cheio de tutorias úteis para todos :3

    Vou tentar agora esse efeito. Adoro gadgets personalizados, fica mais perfeito ><

    Kisses <3
    http://paradise--days.blogspot.com/

    ResponderExcluir
  51. Vou tentar num lay que estou fazendo! É bem simples mesmo, e fica lindo! (é só uma questão de CSS, mas eu morro de preguiça de fazer esses códigos... hehe~)

    Banana-kiss!
    Rebel Cinderella

    ResponderExcluir
  52. ´Super legal o tuto, e dá um efeito bem lindo ^^
    Bjs, Stardolleiras

    ResponderExcluir
  53. Ha adorei esse tutu!e seu blog Divo total!rsrsrsrsrsrs,parabéns!em você aceita parceria ou afiliação =D
    http://brilhants.blogspot.com.br/

    ResponderExcluir
  54. Já conhecia! Acho super fofo *3*

    Estou pensando em usar ele num próximo layout ^^


    Bezos!
    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  55. oIE! EU AMO O TEU BOG,E APESAR DE NOSOS BLOG'S SEREM MTO DIFERENTES VC É MULTMASSA EM LAYOUT'S EU ADORO O MEU,ACHEI UM OTIMO TRABALHO O Q FIZERAM + ME DIZ O QUE VOCÊ ACHA DO MEU LAYOUT E DIZ O Q FALTA http://conexaomista.blogspot.com.br/
    Ñ PRECISA FAZER UM POST,COMENTA LÁ NO MEU BLOG PR FVR ME DÊ UMA RASÃO PRÁ VIVEEER!..BJKS

    ResponderExcluir
  56. Adorei o tutorial, fica lindo! *-* Pretendo usar no meu próximo lay!

    Seu blog é lindo! Não acredito que o conheci só agora!

    Visita (e se gostar segue?)
    Não me acorde, estou sonhando!

    Beijos, espero ansiosa seu próximo post!
    ;♥

    ResponderExcluir
  57. faz um tutorial de como por essa sled de fotpo eu acho rsrs

    ResponderExcluir
  58. Adorei o tuturial! Vou ver se da certo no meu blog!

    http://carolresenhas.blogspot.com.br/

    ResponderExcluir
  59. Oii Liah! Preciso de vc de novo kkkk
    Como você faz templates?
    E o que aconteceu com o Menina Nerd?
    Bjs
    www.fofokisteen.blogspot.com

    ResponderExcluir
  60. olá adorei o blog e estou seguindo me segue tbm ?
    www.rebecacarolinee.blogspot.com
    beijoos e fique com deus.

    ResponderExcluir
  61. Oii !! Ameei seu blog *-* queria saber como instalar uma sidebar feita por mim. ^^

    ResponderExcluir
  62. Adorei o tutorial, hihi! Tentei usar no título dos posts mas não deu, rs, mas eu acabei achando outro jeito! Só não coloco meu blog aqui porque eu nem inaugurei ainda!
    Amo o Cherry Bomb!

    ResponderExcluir
  63. adorei esse tutorial me ajudo dimais e deixo o meu blog como eu queria você e dimais.

    http://beijinhodoce-bd.blogspot.com.br/

    ResponderExcluir
  64. Muito bom, você salvou minha vida XD

    ResponderExcluir
  65. OMG AMEII BABY,NOSSA FICOU SHOW ESSE TUTORIAL E SEU BLOG É LINDA X)
    http://biel-teenangels.blogspot.com.br/

    ResponderExcluir
  66. Oi linda.Amei a tutorial viu? Mas eu gostaria que você fizesse uma tutorial: como codificar um layout.

    Obrigada pela atenção(se você não souber saber fazer a tutorial que pedi,tudo bem)!

    ResponderExcluir
  67. muuuito obrigada por esse! foi o único que eu consegui fazer funcionar lá no blog. sua linda.
    beijos!

    ResponderExcluir
  68. Amor eu estou fazendo meu primeiro layout para o meu blog, e ainda tenho muitas duvidas, e queria saber se você pode ma ajudar em uma coisa, eu estou tentando por o titulo dos Gadgets domeu blog em caixa e tal, e até consegui, mas no final de cada gadget em uma linha, como se fosse ela que dividisse um do outro, e como coloquei o titulo em caixa eu queria retira-la porque não ficou muito legal com ela, mas não sei como fazer, estou fazendo o layout com uma base, super basica, e só editando aos poucos, e realmente preciso de ajuda, se puder me ajudar por favor tente entrar no meu blog, ou fazer um tutorial, please, obrigada, desde já.

    notreverie (<< nome do meu blog <<)

    Daniela

    ResponderExcluir
  69. eu queria saber como vc fez essa bolinha rosa no nome da pagina?

    desde já obrigado

    ResponderExcluir
  70. Não está dando certo no meu layout...quanto a página, já ta curtida. bjs e sucesso!!!

    ResponderExcluir
  71. oi vi vc na revista atrevida como faz pra ser atrê ? bjs '
    rosario-vampire-animes.blogspot.com.br

    ResponderExcluir
  72. Este comentário foi removido pelo autor.

    ResponderExcluir
  73. Muito bom o tutorial, coloquei no meu layout e ficou lindo, muito obrigada por postar, super beijos !

    http://www.aprendizdecabeleireira.com/

    ResponderExcluir
  74. vamos fazer parceria ? esse é meu blog http://androidtdb.blogspot.com.br/

    ResponderExcluir
  75. Como eu faço para retirar aquela linha preta que fica dividindo os gadgets? ela dificulta na hora de ocultar os gadgets em determinada página.

    ResponderExcluir
  76. Nossa que demais, estava querendo saber isso mesmo, adorei o tutorial!
    Obrigada!
    Beijo;*
    http://certaascoisas.blogspot.com.br/

    ResponderExcluir
  77. ADOREEEEEI ESSE TUTORIAL!!!

    Fiz no meu e deu certo!!

    http://www.barbaraalgazi.com

    ResponderExcluir
  78. Amava seu blog agora Te odeio eu fiz tudo bem direitinho com mandou acabou que por sua cupa acabou que não deu certo e agora não posso colocar uma foto no cabeçalho Te odeio muito meu blog ja era culpa sua

    ResponderExcluir
    Respostas
    1. Deu tudo certinho quando eu coloquei, você que fez merda e tá culpando ela ¬¬'

      Excluir
  79. Adália amei o post parabéns...mas as letras da do gadget ficaram muito para cima...você pode me ajudar a centralizar por favor?

    ResponderExcluir
  80. Ameei toodos seus tutoriais!!!
    ja botei no meu blog,olha só http://lolita-san.blogspot.com.br/
    ja favoritei seu blog,viu?

    ResponderExcluir
  81. Amei o tutorial, estou usando :)
    http://leilageo.blogspot.com.br/

    ResponderExcluir
  82. Oii autoras! °-°... não estou conseguindo aplicar nenhum desses tutos no meu blog! Eu tentei quatro e nenhum prestou... meu blog não é nenhum pouco profissional e está precisando de milhares de reparos!
    Gostaria de saber se vcs fazem templates pagos ou gratuitos??
    Por favor espero que respondam...

    Eu tô amando todos os tutoriais mas, não consigo aplicar!

    Visitam? http://coleteboston.blogspot.com

    ResponderExcluir
  83. Oii, queria que você fizesse um pronto para mim e mandasse o código por aqui mesmo, com as cores:
    #E0FFFF : azul clarinho
    #FFC0CB : rosa clarinho
    #FF69B4 : rosa meio escuro/claro
    #87CEFA : azul meio escuro/claro

    ResponderExcluir
  84. muuito legal deu certinho ... como faço essa bordinha de tracinhos ?
    bjkas brigada

    ResponderExcluir
  85. ai desculpa meu comentario é o acima rsrs meu blog é http://semmodaincomoda.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...