28 de dezembro de 2013

[Pedido] Tutorial: Legenda Personalizada.

||
Você casou com sua esposa porque tinha medo de morrer sozinho. Vai ao médico pelo medo da morte. Eu preciso ir em frente? - Crane.

Olá amores, tudo bem com vocês? Comigo tá tudo na paz. Eu estou lendo "A Cabana", comecei a ler ontem a noite, já estou na página 150 ou 160, não sei. Falta pouco para eu acabar. Até agora o livro é muito bom, sabe, quando eu era um ano menor, eu pensava que era um livro de terror. Me enganei bravamente. Ei, já viram o blog indicado de hoje? Vejam :3 Ah, muito obrigada pelos comentários na postagem anterior, vocês são demais <3 Mas enfim, vamos ao tutorial de hoje?

Hoje eu trago o nosso primeiro pedido de tutorial que foi por comentário aqui no blog e facebook. Ele foi pedido pelo nosso amigo, Pedro, do blog Ser Pedro. Sabem essa legenda que está na imagem do Scarecrow? (Para quem não sabe inglês, Scarecrow significa Espantalho, o Espantalho dessa foto é o Crane, vilão do Batman. Se quer a legenda completa, me diga, que eu passo a você.) Então, ele pediu para que eu ensine a usar está legenda. Se você ficou interessado, continue lendo.

Essa legenda foi totalmente feita por mim. Sem a ajuda de nenhum outro blog. Mas para que não aja confusão por gente idiota, vou deixar aqui os "créditos" ao blog Part Of Me, "que foi a inspiração dessa legenda".

1°: Vá no painel do seu blog, vá em modelo, editar HTML e pesquise a seguinte tag: "]]></b:skin", quando achar, cole ACIMA dela o seguinte código:
/*------ Legenda nas imagens (Etc For Me) ------*/
.legenda {
font-family: Trebuchet MS, sans-serif;
font-size: 11px;
color: #666666;
-webkit-filter: opacity(0.6);
-webkit-transition-duration: .90s;
background: #fff;
text-align: center;
position: absolute;
margin-top: 115px;
padding: 5px 2px 2px 2px;
width: 678px;
height: 14px;
}
.legenda:hover {
-webkit-filter: opacity(0.9);
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}
/*------ Legenda nas imagens (Etc For Me) ------*/
Salve o modelo. Depois vá em criar postagem, quando for fazer a sua postagem. Quando abrir a imagem do jeito normal, vá em HTML e depois do último "</div>" do código da imagem, cole o seguinte código, modificando o que pede:
<div class="legenda">LEGENDA</div>
E pronto! A sua legenda vai estar na sua imagem. Você pode por a legenda que você quer. Não é fácil e prático? Se puder, tente colocar uma legenda meio pequena, aí fica melhor :3 Mas enfim, se você fez isso uma vez, vai ter que fazer em todos os layouts, se não nos próximos lays que não tiverem a legenda, a foto que tinha a legenda ficará feia. Enfim amores, esse foi o tutorial de hoje, gostaram? Se usar, ou repassar, dê os créditos ao blog ok? Obrigada a todos, até amanhã :3

34 comentários:

  1. Você lê rápido UEUHE deve ser muito legal *o*. O Garota no mundo do HTML é perfeito <33
    Enfim, o tutorial é perfeito, eu usava legenda nas fotos mas acabei parando, mas acho que no próximo layout irei usar o tuto ( e creditar ) *u*

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Haha, e é muito legal, é super recomendado. Ele vai mudar a sua ideia de religião. Que bom :3 Invés de ler parando, eu li "pirando", mas ok. Haha. Pois é, mas eu queria ficar com o seu blog na recomendação até janeiro, haha.

      Excluir
  2. Já ouvi falar muito do livro A Cabana, você é uma
    devoradora de livros -kkk' Lê muito rápido >.<
    O tutorial é bem legal, gostei quem sabe eu use *-*

    Abraços || sevendays-official.blogspot.com.br

    ResponderExcluir
  3. Uma vez eu usava, fica tao legal!
    Beijos, Lili ;3
    Clique aqui, e vá para o blog / Princesa Teen!

    ResponderExcluir
  4. Eu não tenho paciencia de ler livro shushsu, o tutorial é super util.

    vanessatutoriais.blogspot.com

    ResponderExcluir
  5. Minha irmã tem esse livro, vou pedir emprestado pra ler ~ Já usei esse tutorial em um blog meu, e que agora está no lixo, enfim, é muito fofo, adoro *u*

    Unskilled

    ResponderExcluir
    Respostas
    1. Peça mesmo, é super bom. Sério? Acho que foi o do POM, mas mesmo assim, obrigada.

      Excluir
    2. POM? O que é isso? Um blog? Enfim, aceito sua afiliação sim, só falta você me colocar na sua elite!

      Excluir
    3. Part Of Me :3 Ok, eu vou te colocar.

      Excluir
  6. Uau! já falei que amo seu blog? amei totalmente o tutorial, estava mesmo querendo saber como se fazia essa linda legenda >.< /

    A cabana? acho que já ouvi falar, se não me engano tinha na biblioteca lá da escola, parece ser ótimo para se ler :3

    - Beijos de chocolate e Amora <3

    Adolescente Nerd // Oficial {}

    ResponderExcluir
    Respostas
    1. Não... Haha, muito obrigada <3 Sua escola tem biblioteca? Que legal. Ele é ótimo mesmo, super recomendo. Novamente, obrigada <3 Eu também amo muito o seu blog.

      Excluir
  7. Ficou super simples mas dá aquele toque a mais na imagem, fica lindo! Não uso porque não sei o que escrever nas legendas kkkkkkkk

    http://diamantesdeumagarota.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Verdade, haha, obrigada <3 O que escrever? O que você quiser.

      Excluir
  8. A Cabana parece ser super legal, eu tenho bastante vontade de ler o livro. Que tutorial mais lindo! Quando eu entrei no seu blog, e vi esta 'legenda' me apaixonei, vou pensar se no próximo lay do meu blog eu coloco ela.
    Estou seguindo tembém
    xoxo - http://notfoundoficial.blogspot.com.br/

    ResponderExcluir
  9. Eu jurava que esse livro era de terro ou suspense o3o Eu sempre quis ler eu via na casa da minha tia, mas eu tinha medo ç__ç #besta. Mas em fim eu já conhecia essa legenda, mas nunca tinha visto o tutorial foi bem explicado adorei.

    FH★

    ResponderExcluir
    Respostas
    1. É um pouco de suspense no começo, não sei. Mas fique fria, é bem legal. Não dá medo. Muito obrigada <3

      Excluir
  10. Só eu que não gosto de "A Cabana"? Eu tentei ler esse livro três vezes, mas sempre desiti antes da metade.
    Adorei o tuto, não sabia fazer essa legenda por css, só sabia no photoshop mesmo.
    i-nterrupt.blogspot.com

    ResponderExcluir
    Respostas
    1. Tudo bem, ele parece meio chato. Eu gosto dele, mas vocês não são obrigados a gostar. Que bom <3

      Excluir
  11. Ainda não conhecia esse tutorial, gostei muito! :) ♥

    >> Visite o Blog <<
    - xoxo –

    ResponderExcluir
  12. Amo seu blog!! esse tutorial está demaaiss *---* Parabéns!!

    Passa lá ----> http://readerrocket.blogspot.com.br/

    ResponderExcluir
  13. Eu coloquei no meu blog, mas parece que alguma coisa deu errado, ele não fica "em cima" da imagem igual a sua, e ultrapasse a área do post. Mas os seus tutoriais ajudam muito! E só eu que queria que o Crane aparecesse mais nas HQs do Batman? (poderia aparecer na série, pelo menos) Eu amo o seu blog!

    ResponderExcluir
    Respostas
    1. Você tem que arrumar a largura amor, haha. Tem ser da mesma largura da imagem. Eu avisei isto. Enfim, muito obrigada ♥ De verdade. Exato, Crane merece mais atenção nas HQ´s. Ele é um personagem muito interessante.

      Excluir
  14. Valeu KArla funcionou *uu* , quando colocar o lay mostro o resultado e te coloco na page de creditos.
    Muito obrgado , sua divosa c:


    Geekegirlie.blogspot.com|| ✖G²Official ✝

    ResponderExcluir
  15. adorei a dica, porem a letra do seu blog ta clara de mais, mto ruim pra ler :(

    ResponderExcluir

Vai comentar? Obrigada Mas antes, leia por favor:

Os comentários são moderados para eu saber quem comentou, assim posso retribuir, somente por isso ok? Pode comentar o que quiser, até criticas e ofensas, mas mantenha o respeito.
Leia o post todo antes de comentar, não comente apenas para divulgar o seu blog.
Se for colocar o link do seu blog, coloque sem o "https://", pois o blogger considera spam.
Não precisa comentar "Seguindo, segue de volta?" Se eu gostar, eu sigo.
O resto pode fazer :3 Mas tenha respeito.

Obrigada novamente