Faixinha em tableless

26 de mar. de 2013


Sabem a faixinha que uso como subtítulo de postagem? Então, hoje aprenderemos como faze-la. Não lembro em que blog peguei o tutorial, mas se alguém souber ou até mesmo eu lembrar edito o post e coloco aqui. A faixinha ficará semelhante a essa:

Exemplo
Para colocá-la, entre em seu HTML e procure por 
}]]></b:skin> 
Acima dele cole:
/* Faixinha de subtítulo */
.table{
background: url(url da faixinha)no-repeat;
color: #fff; /* cor da fonte */
font: italic 15px georgia; /* itálico, tamanho e nome da fonte*/
padding: 3px; /*distanciamento em relação a margem*/
width: 255px; /*largura da imagem*/
height: 30px; /*altura da imagem*/
text-align: left; /*alinhamento*/
margin-left: -35px; /*margem esquerda*/
}
Ajuste de acordo com seu gosto, se não ficar bem posicionado é só alterar o valor de margin-left até ficar certinho.

Toda vez que quiser usar a faixinha na postagem, clique na aba HTML (fica do lado da aba "Escrever") e cole o seguinte código:
<div class="table">Texto aqui</div> 



44 comentários:

  1. Aii que cute, eu tava procurando mesmo esse tutorial rs.
    http://outonosdehortela.blogspot.com.br/

    ResponderExcluir
  2. adorei com certeza vou usar!
    http://blog-maisumaprimavera.blogspot.com/

    ResponderExcluir
  3. Adorei o tutorial, fica lindo *-*
    CAT GIRL

    ResponderExcluir
  4. Olá, tudo bem?
    Vim convidá-la a participar de um sorteio que estou fazendo
    em meu blog, totalizando 17 produtos!
    O link do sorteio é:
    http://conversandosobreesmaltes2.blogspot.com.br/2012/12/sorteio-participem.html
    Mas corre, o sorteio é dia 29...
    Faltam apenas 2 dias!!!
    Espero contar com sua participação!
    Boa sorte!!!
    Bjs..

    Blog: http://conversandosobreesmaltes2.blogspot.com.br
    Flickr: http://www.flickr.com/photos/conversandosobreesmaltes2/

    ResponderExcluir
  5. Eu estava procurando por esse tuto! Aw, fica tão fofo o resultado!
    Vou usar :3

    Kisses ;*
    The Things Girls // click e visite!

    ResponderExcluir
  6. Estava mesmo á espera que você colocasse esse tutorial, fica lindooo, muito obrigado
    Beijos!

    luanarita.blogspot.com

    ResponderExcluir
  7. Eu já havia visto o tutorial no Cherry Bomb, não sei se é de autoria da Liah mas eu vi lá (:
    Fica muito lindo, sempre que vejo elas aqui nos posts acho a maior gracinha Anny!
    Adorei as faixinhas, muito lindas mesmo!

    Caprichosdabiia.blogspot.com

    ResponderExcluir
  8. Me identifiquei bastante com tudo aqui... Cores, organização e, o mais importante: Você tem dicas e tutoriais incríveis! Ainda estou personalizando meu blog, e essa aqui da caixinha no sub-título vai me ajudar bastante! Obrigado por ajudar os blogueiros iniciantes (meu caso)... São posts maravilhosos!

    ResponderExcluir
  9. Essas faixinhas são muito lindas!

    pauladisse.tk
    @pauladisse

    ResponderExcluir
  10. Adorei o tuto, essas faixinhas são lindas, com certeza fica lindo o resultado :D
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  11. Tentei usar no meu blog, mas não funcionou. Ah, e foi graças aquele seu post (BigTutorial- Crie um layout Sweet Rock), que criei o meu, e acho que ficou liindo! Gostaria de fazer parceria com teu blog, o que acha? Aqui está o endereço do meu blog:
    sweetblog-lara.blogspot.com.br
    Você é ótima, gostei muito dos seus post- me ajudou muito!

    ResponderExcluir
  12. Fiz Agora vamos ver oque dá né hahahaha
    amei seus tutoriais bem facies de enteder!
    http://nosnocomputador.blogspot.com.br/

    ResponderExcluir
  13. Nossa 1 vez que venho em seu blog e amei ♥
    Flor quando você poder faz um tutorial ensinado a colocar as photos do flickr no blog igual ao seu?
    http://www.momentosassim.com/

    ResponderExcluir
  14. Adorei o tutorial, Anny. ;) Ah, tô seguindo o blog.

    Um beijo, Karine Braschi.
    Geek de Batom .

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

    ResponderExcluir
  16. anny, como coloco a faixinha no titulo dos gadgats como vc usa????????

    ResponderExcluir
  17. Oi que blog maravilhoso ameii vc pode dar uma visitada no meu blog? http://pretty----girl.blogspot.com.br (se aparecer o nome Japan World é esse mesmo nao quis mudar o link pois dai os meus seguidores não conseguirão achar o blog!) dai tem uma post sobre o seu blog! bjs

    ResponderExcluir
  18. Obrigada pelo tutorial, testei no blog e ficou lindo *O*

    blogmeurecanto.blogspot.com.br

    ResponderExcluir
  19. ótimo tutorial como sempre
    falei sobre o seu blog em uma postagem, espero que não s importe.
    http://nove-e-dezesseis.blogspot.com.br/

    ResponderExcluir
  20. Olá.
    Adorei, e estou usando, viu?
    Aprendi muito com seu blog. Continue assim.

    Beijos

    ResponderExcluir
  21. Adorei o seu blog! Tem tanto conteúdo importante!

    SHE WALKS Blog

    ResponderExcluir
  22. Aceita afiliação? Responde la. Se gostar segue, por favor, blog novo http://fanficsforniley.blogspot.com.br/

    ResponderExcluir
  23. Ótima postagem! Bem que eu andava curiosa sobre como se fazia isso.. rsrs
    Lembrei de você Anny --> Imagem Pq será, né?

    ResponderExcluir
  24. Oi, tem post novo lá no blog.

    Tem muitas novidades nessa semana, então se for seguir para ficar dentro das novidades. Comenta o post e avisa que está seguindo, que sigo de volta.

    SORTEIO NO BLOG | TUTORIAL DE MAKE RÁPIDO - YOUTUBE | FÃ PAGE

    Beijos, e me desculpe o incomodo. :*

    ResponderExcluir
  25. Ameiiiii esse blog cara é muito perfeitoo ... Como você consegue fazer uma perfeição dessa? E com ótimos conteúdos também parabéns ... Faz um favor? Você poderia divulgar meu blog é novo .. http://anothertim3.blogspot.com.br/ *-* Obrigada Beijinhos..

    ResponderExcluir
  26. Muito legal esse tutorial adorei ,seu blog é divoo ♥

    Just a Dream //
    mylenaravini.blogspot.com

    ResponderExcluir
  27. Oi fofinha amei mesmo o tutorial pode ter certeza que um dia eu vou usar !Visita meu blog ?Se gostar segue ? worldcandyy.blogspot.com

    ResponderExcluir
  28. Oi Anny,adoro o blog,eu olho ele sempre,mas quando eu coloco duas faixas dessas na mesma postagem ou pagina os gadgets somem.O que eu faço?

    http://staystrongfordream.blogspot.com.br/

    ResponderExcluir
  29. O meu não funcionou ç.ç porque será? Mais mesmo assim muito obrigada, pelos comentários ai em cima parece que ajudou muito as meninas haha :) Fica na paz!
    beijodopandas.blogspot.com.br/

    ResponderExcluir
  30. Ai eu ameeeeeeeeei a postagem, mas no meu blog quando eu clico em editar html e digito o código }]]> , não aperece nada e não consigo colocar, ameeeei seu blog e eu queria também, como você coloca esse negócio aí em baixo que esta escrito GI e ranking e etc...
    Dou muitos méritos à você, mas neste momento não consigo modificar nada e amei o Banner novo!!
    Meu modelo é o viagem ok? Se puder me ajudar agradeço se não eu entendo aguardo respostas!!
    http://lais-colen.blogspot.com.br/

    ResponderExcluir
  31. ameiiiii as faixinhas!!! peguei a verdinha e ja estou usando. vc eh demais.
    da uma organização na hora de separar o post. bjs

    ResponderExcluir
  32. Respostas
    1. Quando eu procuro }]]> fica "0 of 0" ! O que eu faco? Me ajuda???

      Excluir
    2. aqui no meu blog eu expliquei o que aconteceu e como você substitui esse código: http://emmeumundodiferente.blogspot.com.br/2013/10/tutorial-onde-faco-as-mudancas-agora.html

      Excluir
  33. Que fofa essas ' tags ', super meigas.


    Con amore, Donna Yellow ♥

    maybe yellow /Loja

    ResponderExcluir
  34. Eu adorei, mas ainda não usei... vou esperar eu mudar o template de novo e ai coloco.

    http://blog-da-zuca.blogspot.com.br

    ResponderExcluir
  35. Funciono não tia :v

    ResponderExcluir
  36. Nossa...funcionou bonitiiinho :)
    Ficou bem proficional

    ResponderExcluir
    Respostas
    1. Esqueci de falar pra você ver como ficou(eu sou essa Hannah aí de cima) meu blog:
      thecooking4fun.blogspot.com

      Excluir
  37. Você da ótimas dicas, porém se você pudesse fazer tutoriais em vídeo seria melhor, algumas cooisas n estão dando certo. Te adoro, Bjuss Feeh. Visite meu blog http://littledivabyfeh.blogspot.com.br/

    ResponderExcluir
  38. que nem vc falou aqui em baixo que será ignorados esse comentários "seguindo, segue de volta" "lindo o blog, seguindo, retribui?'' também acho um pouco chato então eu vim aqui saber se vc pode ir no meu blog conhecer as coisas que eu posto e depois se gostar segue, mas só se quiser.

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.