Image Map

28.7.13

Modelos de subtítulo para postagem


Olá gatosos da Ingrid <3

Como vocês estão nesse domingo tedioso? -q. Eu acho que a semana passou voando. Daqui a pouco voltam minhas aulas e eu nem aproveitei minhas férias direito. Foi triste pra mim. Ah, infelizmente a Helena ficou sem internet e não pôde postar ontem, então pra compensar, hoje trouxe um tutorial que além de organizar o post deixa super fofinho. E como talvez já tenham percebido, eu não tenho muitas novidades para contar aqui spoaksoa.

A Juu pediu para trazer um tutorial do subtítulo personalizado. Então eu criei alguns modelos pra vocês usarem. Mas é o seguinte, quando li o pedido dela nos comentários, eu entendi errado. Então fiz modelos para serem usados dentro do post, assim. Mas quando já tinha terminado-os, fui ler denovo e entendi que eram para serem usados no título do post u3u. Meio confuso né? hsaushau. Se vocês quiserem o tutorial de títulos personalizados do mesmo jeito que o daqui, sigam isto aqui. Mas enfim, chega de blá, blá, blá e espero que gostem!


Acima de ]]></b:skin> cole:

@font-face {font-family: "Brain"; src: url('http://static.tumblr.com/65opofy/h9zmqnvz6/brain_flower.ttf');}

Depois vá até o HTML da postagem, cole o seguinte código e depois, altere o título na parte destacada em negrito. 

<h3 class="post-title entry-title" itemprop="name" style="background-color: white; border-bottom-color: rgb(212, 212, 212); border-bottom-style: dotted; border-bottom-width: 1px; color: #97a5a6; font-family: Tahoma; margin: 22px 0px 0px; position: relative; text-align: left;">
<a href="" style="-webkit-transition: color 0.9s ease-out; background-image: url(http://static.tumblr.com/65opofy/oFDmqnweb/1.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; color: #ebce5c; font-family: Brain; font-weight: lighter; letter-spacing: -1px; font-size: 33px; opacity: 1; padding-left: 36px; text-decoration: none; text-shadow: rgb(218, 218, 218) 0px 0px 1px; transition: color 0.9s ease-out;">Primeiro modelo</a></h3>

 Acima de ]]></b:skin> cole:

@font-face {font-family: "Gothic"; src: url('http://static.tumblr.com/65opofy/a2nmqnwm5/gothic.ttf');}

No HTML da postagem cole:  

<h3 class="post-title entry-title" itemprop="name" style="background-color: white; border-bottom-color: rgb(212, 212, 212); border-bottom-style: dotted; border-bottom-width: 1px; color: #97a5a6; font-family: Tahoma; margin: 22px 0px 0px; position: relative; text-align: left;">
<a href="" style="-webkit-transition: color 0.9s ease-out; background-image: url(http://static.tumblr.com/65opofy/OVimqnwsl/2.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; color: #e6778c; font-family: Gothic; font-weight: lighter; letter-spacing: -1px; font-size: 19px; opacity: 1; padding-left: 36px; text-decoration: none; text-shadow: rgb(218, 218, 218) 0px 0px 1px; transition: color 0.9s ease-out;">Segundo modelo</a></h3>

 Acima de ]]></b:skin> cole:

@font-face {font-family: "Butterfly"; src: url('http://static.tumblr.com/65opofy/GX4mqnx8x/bythebutterfly.ttf');}

No HTML da postagem cole:  

<h3 class="post-title entry-title" itemprop="name" style="background-color: white; border-bottom-color: rgb(212, 212, 212); border-bottom-style: dotted; border-bottom-width: 1px; color: #97a5a6; font-family: Tahoma; margin: 22px 0px 0px; position: relative; text-align: left;">
<a href="" style="-webkit-transition: color 0.9s ease-out; background-image: url(http://static.tumblr.com/65opofy/Jfzmqnxbe/4.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; color: #bc9dc1; font-family: Butterfly; font-weight: lighter; letter-spacing: -1px; font-size: 24px; opacity: 1; padding-left: 36px; text-decoration: none; text-shadow: rgb(218, 218, 218) 0px 0px 1px; transition: color 0.9s ease-out;">Terceiro modelo</a></h3>

 Acima de ]]></b:skin> cole:

@font-face {font-family: "Masana"; src: url('http://static.tumblr.com/65opofy/nnYmqnwyh/masana-1propia.otf');}
  
No HTML da postagem cole:  

<h3 class="post-title entry-title" itemprop="name" style="background-color: white; border-bottom-color: rgb(212, 212, 212); border-bottom-style: dotted; border-bottom-width: 1px; color: #97a5a6; font-family: Tahoma; margin: 22px 0px 0px; position: relative; text-align: left;">
<a href="" style="-webkit-transition: color 0.9s ease-out; background-image: url(http://static.tumblr.com/65opofy/Faimqnx1k/3.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; color: #7297a0; font-family: Masana; font-weight: lighter; letter-spacing: -1px; font-size: 31px; opacity: 1; padding-left: 36px; text-decoration: none; text-shadow: rgb(218, 218, 218) 0px 0px 1px; transition: color 0.9s ease-out;">Quarto modelo</a></h3>

Comentem o que acharam porque fiz com muito carinho :) Beijos! 

18 comentários:

  1. Nossa não sei nada de HTML mesmo. Os modelos ficaram perfeitos, e o de coração mais ainda ^_^

    ResponderExcluir
    Respostas
    1. Annw, obrigadaa! Com o tempo você aprende ^^ Beijoos

      Excluir
  2. Amei o segundo modelo! Rosa <3

    vidadeumasone.blogspot.com

    ResponderExcluir
  3. Ficaram muito fofinhos :3 amei o segundo modelo <3

    Beijos :3 sweeet-flower.blogspot.com

    ResponderExcluir
  4. Meu Deus, que coisas fofas! *OOO*
    Adorei mesmo, muito legal.
    Com muito carinho, Isa ♥
    sonhosde-primavera.com
    blog-colorfulsky.blogspot.com.br

    ResponderExcluir
  5. Awnnnnnnnnn, diva, muito obrigada ♥ Realmente, eu fiz bem diferente, UAHSUSA' Eu personalizei as listas dos marcadores, sabe? :3 Mas gostei mais do seu jeito *O* Obrigada mesmo pelo tuto, divosa ~3

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
  6. Adorei todos, especialmente o quarto! Retribuindo e seguindo seu blog flor!
    Kiss
    With You

    ResponderExcluir
  7. Amei!!Oh, um mais lindo do que o outro!!

    Cherebebel.blogspot.com

    ResponderExcluir
  8. onde é a porra do html da postagem? af

    ResponderExcluir
    Respostas
    1. Aqui: http://static.tumblr.com/fdaicif/tiAmxm45v/cats.jpg

      Excluir