01/07/2014

Legenda personalizada nas imagens

|| ||
 Yoo, nekos! ~(◠‿◕✿) Como estão? Eu estou ótima e vibrante... Terminei de ler agora à pouco o último livro da trilogia A Seleção da Kiera Cass e meu Deus, livros incríveis e encantadores. Recomendo. Ah, vocês repararam que minha elite não está completa, não é? Tenho 10 vagas, então se você quiser se afiliar, eu vou avaliar, sim? Agora que acabei a leitura, vou ter mais tempo de responder e retribuir comentários, coisa que eu mal tenho feito nesses últimos tempos e vou tentar estar mais presente aqui, sim? Gente, estamos atualmente com 67 seguidores e eu fico feliz de tirar aquele "66" satânico do meu blog!  (≧ω≦) Vocês estão sumindo... Será que é porque eu também ando sumida? Eu voltei, então nada de leitores fantasma, ok? Prometem?

 Ai, é sempre tão complicado encher 16 linhas com introdução... É por isso que elas acabam sem sentido e desorganizadas, mas mesmo assim, não estou afim de um novo nivelamento no blog. Indo ao assunto do post... Uma leitora me fez um pedido na ask de como colocar legendas personalizadas nas imagens e gente, eu fiquei algumas boas horas pra fazer isso. É que eu nunca tinha feito ou usado algo assim. Depois de algumas boas horas finalmente consegui resultado e até que não ficou tão mal, viu? Foi o primeiro desafio de verdade daqui do blog e antes que perguntem, não, não estou pronta para o próximo! >3< Eu gostei tanto do resultado que passei a usar no meu blog pessoal, então pra poupar tempo, o preview vai nele mesmo, cliquem aqui pra ver.

 É bem simples, mas prestem atenção, pra não dar errado como deu em milhões de vezes comigo, ok?

 Primeiramente vá em Modelo > Editar HTML. Ctrl+f e procure por ]]></b:skin> Depois de ter encontrado, cole acima disso o seguinte código:
@font-face {
font-family: "wendy";
src: url("http://static.tumblr.com/mw3v5cd/jxRmaip37/wendy.ttf"); /* para IE */
src: local("wendy"), url("http://static.tumblr.com/mw3v5cd/jxRmaip37/wendy.ttf") format("opentype");
}
.imagem .legenda  {
-webkit-transition: all 1.2s ease-out;
-moz-transition: all 2.3s ease-out;
width:500px; /* largura */
height:17px;
margin-top:-30px; /* ajuste */
margin-left: 100px; /* ajuste */
color:#444; /* cor da fonte */
font-size: 11px;
font-family: "wendy";
background: #fff; /* cor do fundo */
opacity: 0.60;
text-align: center;
}
 Aconselho vocês a mexerem só nas partes em negrito, sim? Eu tenho quase certeza de que vai ficar desalinhado com sua imagem, então você vai ter de ir ajustando até alinhar. Eu fiz uma postagem de teste e fiquei arrumando os códigos e visualizando até acertar. 

 Quando forem ajustar "margin-left", não se esqueçam de que os números negativos vão pra esquerda e os positivos para a direita.

 Depois de acertar essa parte, você vai precisar apenas colocar esse código onde quer que a legenda das imagens apareça, por isso, optei por sempre hospedar minhas ilustrações:
<div style="text-align: center;">
<div class="imagem">
<div style="text-align: center;">
<img src="LINK DA IMAGEM" height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM"></div>
<div class="legenda">LEGENDA</div>
</div>
<br></div>
 Depois disso é só escrever a postagem normalmente e a legenda vai estar lá, ok? Não adianta só colocar a legenda em baixo de uma imagem que não vai funcionar, tem que colocar o código.

 Espero ter sido clara e que vocês consigam usar, porque depois do trabalhão que deu, se ninguém usar é muita maldade com a minha pessoa. Eu testei em dois blogs diferentes, então provavelmente vocês vão conseguir, sim...

 Não esqueçam de dar os devidos créditos, se usarem, ok?

 É isso por hoje! Jya ne .

35 comentários

  1. Eu nunca li esse livro mais pelo jeito que tu falou deve ser ótimo mesmo vou dar uma pesquisada por que amo ler <3 Eu quero me afiliar :3 aceita? Parabéns pelos seguidores ri muito aqui com " e eu fico feliz de tirar aquele "66" satânico do meu blog! " uuhaushsauhasuhsuahus' É muito difícil mesmo escrever todas essas linhas! Eu fazia isso no meu blog mais não faço mais por que eu enchia de coisas banais >< Eu já conhecia esse tutorial acho que fica bem legal e criativo!
    foconamisao.blogspot.com.br
    Kissus

    ResponderExcluir
    Respostas
    1. Ele é ótimo, sim. Eu pensava que era um conto de fadas meloso e coisa assim, mas me surpreendi bastante! Sobre a afiliação, aceito sim. c: 66? Xô Satã! UHASUHSAHU Eu encho meus leitores com minhas baboseiras, porque sei que alguns ainda leem >3<
      Eu me matei pra fazer esse modelo e até que ficou usável não é? sjodjosajo

      Kissus ♥

      Excluir
  2. Parabéns pelos 67 seguidores haha, nada diabólico aqui não! Ah em quando ao tutorial... Eu amei! Simplesmente acho muuuito fofo eu queria usar mas nunca tinha achado o tutorial, se combinar com meu blog, vou deixar e colocar os créditos que tu merece com certeza!
    Em quanto aos afiliados, não sei se você vai se interessar meu blog é novo tipo muuito novo (tipo 2 postagens e eu única seguidora (╥_╥) E nenhum afiliado... http://pattiency.blogspot.com.br/ Eu sei nome cafona '-'
    Bjs!

    ResponderExcluir
    Respostas
    1. To usando! Só para avisar >3< créditos dado!

      Excluir
    2. Obrigado <3 Que bom que gostou ^3^ Eu também acho um doce e achei legal terem pedido, porque é uma coisa que nunca vemos por aí, né?
      Pattiency me lembra Patience - Guns ♥ Ok, chama de louca .-. HUASUHASHU Eu aceito sim, só que seu bloguinho tá um tantinho desalinhado ;-; UHSAUHASUH Espero que consiga concertar isso pra melhor acesso ao seu blog.
      Fico feliz por estar usando ♥

      Beijos ~

      Excluir
    3. Cara, qual navegador você usa? Estou usando o mozilla, dai entrei no explorer e estava desalinhado mesmo, não tenho o chrome ou slá como escreve :( Vou dar uma olhadinha nisso obrigada mesmo por avisar!
      Mas foi nessa música que me baseei o nome! Amo guns meu axl <3 Louca nada, GN'R é tudo! Acho melhor eu ir que tenho um blog a arrumar :S

      Excluir
    4. Maldito Mozila! Dei um trabalhão para alinha-lo... vejo que tenho um trabalhão pela frente contando que meu chrome não pega muito bem... acabou minha alegria haha

      Excluir
    5. Voltei u.u três comentários seguidos e esse é meu record u.u. Vim agradecer totalmente por avisar! Te amo! Eee obrigada por aceitar a afiliação, já coloquei o Empire lá ta? Bjs

      Excluir
    6. Bateu o record mesmo SAHUHSAUHAS
      Ah, magina! *w* Já coloquei aqui também, ok?

      Beijos ♥

      Excluir
  3. Que bom que conseguiu sair do 66 haushuas definitivamente não gosto do número 6 prefiro o 7 *u* 7 é tão 7 haushuas O tutorial é otimo você explica muito bem, acho que usarei num proximo lay...
    bjs ~~

    laserquestt.blogspot.com

    ResponderExcluir
    Respostas
    1. Pois é e3e SAUHSAUHSAHU Eu não curto os números 4,5 e 6 e depois do sorteio de domínio que ganhei no WHA, o 7 se tornou meu número da sorte *w*
      Obrigado ♥ ^-^ Espero mesmo que use!

      Beijos ~

      Excluir
  4. aaaaaae eu queria esse tutorial mesmo <333 Valeeeeu *u*
    Beeijos
    Paradise♥Bunnies

    ResponderExcluir
    Respostas
    1. Awwwn eu leio pensamentos das minhas leitoras <3 HUASHUASUHSA Magina! *w*

      Beijos ♥

      Excluir
    2. ASKLSASAKSAKSAKASK virou vidente ? -q Sua diva :3
      Ah eu to aqui pra avisa que aceito a afiliação e já te coloquei e o diário chamasse Diário de Mary, ele é um diário de minha pessoa mesmo KKKKKKKKKK

      Excluir
  5. Oiiiiiiiiiiiii quanto tempo menina! Eu nunca li esse livro mais parece ser bem bom, fico feliz que conseguiu sair do 66 ashashash. O tutorial está muito bem explicadinho, parece ficar muito lindo vou usar no próximo lay!
    Um enorme beijooo || http://alllovelyandflluffy.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oieeee *w* Pois é, eu que andei meio sumida ~ vergonha ~. A trilogia é uma das melhores que já li, adoro ♥. 66 é coisa do demo, safadagem e por aí vai u3u HUSAHUASHU
      Que bom que expliquei bem ^-^ Até que fica caoai, ficarei feliz se usar, sim?

      Um beijo ainda maior que o seu u3u ♥

      Excluir
  6. Yoo linda, tudo bem com você amada?
    Já baixei esse livro, ele tá na minha estante, no tablet...kkkkk Ele deve ser muito bom mesmo <3

    Anww, adorei o tutorial! Fica muito lindo! Você explica super-bem amada!

    ~Kissus Mon Ange

    ResponderExcluir
    Respostas
    1. Yoo, minha diva ^-^ Tudo sim, espero que com você também!
      Que bom que você já tem ele aí... Leia o quanto antes, porque é perfeito <3

      Que bom que gostou ♥ Sério? Fico feliz por isso! ^-^ Obrigado!


      Kissus ♥

      Excluir
  7. aiiiii ti lindinhuuuuuuuu amei viu?
    http://mundinhoocute.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awn, obrigado :3 Fico feliz por ter gostado <3

      Kissus ♥

      Excluir
  8. Ashuashua' Obrigada por atender meu pedido \õ/ E com está, não irei visitar sua ASK tão cedo ashua'
    Amei o estilo da legenda,e conseguir usa-la sem nem uma dificuldade *-*
    Quando dar o layout a minha amiga, vou lembra-la de creditar a ti õ/

    Beijos da Leeh~
    Ichigo Mochi

    ResponderExcluir
    Respostas
    1. >3< De nada, moça... Legal saber que foi você quem pediu *w* Pode visitar sim, eu vou sempre tentar ajudar sim, só estou um tantinho traumatizada, nada demais! UHSHUSAHUSAHU Que bom que conseguiu usar direitinho, né? *O*
      Ok, obrigado ♥

      Beijos da Jheni ~

      Excluir
  9. Gostei do tutorial ^^
    Eu também li A Escolha. Meu Deus, o capítulo com as cartas do Maxon quebrou meu coração :'(
    Eu gostei bastante do final, mesmo querendo saber como seria a vida de todos os personagens após a seleção.

    {euamohtml.blogspot.com}

    ResponderExcluir
    Respostas
    1. Que bom que gostou <3
      Quando ele foi frio com ela e estava planejando casar com a Kriss... Ai meus feelings!
      Também gostei, quer dizer, em partes eu não queria que ~SPOILER~ o pai dela morresse e nem que o Aspen ficasse manco ~SPOILER~. A Kiera bem que podia fazer uma continuação né? #PartiuEncherOSacoNoTwitter >3< HUASUHSAUHSAUH

      Beijos ♥

      Excluir
  10. Eu adorei o tutorial,eu estava mesmo o procurando.Posso usar no meu próximo layout? ^~^
    Eu nunca li A Seleção,mas morro de vontade de ler,estou guardando minha mesada para comprar esse livro ♥
    Beijos!
    cafe-vs-cha.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^-^ eu sou vidente, já disse isso, né? HUSAUSAUH Claro, fique à vontade, sim?
      Te aconselho a comprar os três de uma vez, porque se você ler só A Seleção e parar, vai endoidar querendo ver os outros >3<

      Chuu ♥

      Excluir
  11. nunca havia lido esse livro , vou ate procurar aqui <33
    gostei muito do tuto , ja usei um parecido a muito tempo la no blog . Parabens pelo post ficou otimo!

    beijos , g-girlie.net (っ◕‿◕)っ

    ResponderExcluir
    Respostas
    1. Procura sim, vale a pena ler <3
      Obrigado ♥ Fica um amor, né? ^-^

      Beijos ~

      Excluir
  12. Ohayoo, primeira vez aqui :3
    Eu queria muito ler essa trilogia da Kiera Cass mas na minha cidade minuscula não tem livraria nem nada T-T
    Vish, não sei como você consegue encher 16 linhas de introdução, eu mal consigo encher 10, hauehauehau'
    Já que tem vaga, eu queria afiliação, já lhe coloquei no meu blog como afiliada, ok?
    Adorei essa legenda personalizada, muito fofa ^3^
    ~Kissus

    Cat In My Coffee ♥

    ResponderExcluir
    Respostas
    1. Yoo *w* Seja bem-vinda!
      Nossa, sem livraria, sem vida .< Já coloquei aqui também! ♥
      Que bom que gostou, obrigado <3

      Kissus ~~♥

      Excluir
  13. Primeira vez aqui (≧ω≦)
    Conheço o livro,e tenho muita vontade de ler.Por enquanto eu estou comprando outros livros da minha lista,mais esse é o próximo.Esse tutorial é bem legal,vou ver se uso ele.A eu até queria me afiliar,mais eu não uso mais esse negocio de afiliados T-T e uma pena que eu não use mais.Gostei muito do seu blog (◕ω◕✿)
    Honey Tear~★

    ResponderExcluir
    Respostas
    1. Awn, seja bem-vinda! ^-^
      Pouca gente conhece, por mais que seja um best-seller, né? Quando puder, compre sim, é ótimo! *w*
      Ah, obrigado <3 Ficarei feliz se usar, sim?
      Que pena :c, mas fico feliz por ter gostado daqui porque eu também adorei seu bloguinho, viu?

      Kissus ♥

      Excluir
  14. Me disseram que os livros eram bons, mas então li uma resenha em que a blogueira os criticava pra caramba e buguei huehue
    Adorei a legenda, ficou muito legal, eu tive que abrir a foto em outra guia pra ver se aquilo era legenda ou edição huehue tipo, facilita muito, ainda mais pra quem já usava frases assim, só que editando a foto *-* E tu explicou direitinho sim *3*
    Então, eu acho que já pediram mas se ainda tiver vagas, queria pedir pra ser afiliada ^^

    Com carinho, Essie | ✧ Blog The Skies ✧

    ResponderExcluir
    Respostas
    1. Os livros são ótimos sim, pelo menos eu achei ótimo, mas vai de cada pessoa, né? As pessoas morrem de amores por A Culpa é das Estrelas e eu acho sem sal e sem açúcar ;-;
      Que bom que gostou UHASUHASHU Parece, né? É legal, porque eu, mesmo, usava frases no blockquote e isso facilitou e muito minha vida! Awn, obrigado <3
      Ainda tem seis vagas, já que uma delas é sua *w*

      Beijos ~

      Excluir
  15. Aceita afiliação?

    Nome do blog: Ladys Winterheart
    Url do blog: http://ladyswinterheart.blogspot.com.br/

    ResponderExcluir

하나 Não ofenda autores ou leitores.
Deixe o link do seu blog para que eu visite.
Não serão aprovados comentários apenas com divulgação.
Caso queira sugerir ou pedir algum post, faça isso por nossa Ask.

(⊙﹏⊙✿) (◕﹏◕✿) (◕‿◕✿) (◕︿◕✿) (◡‿◡✿) (◠△◠✿) (◕ω◕✿) (◠ω◠✿) (◠︿◠✿) (◠﹏◠✿) (◠‿◠✿) (ノ⊙ヮ⊙) (╯°□°)╯ಠ_ಠ ( ̄。 ̄)~zzz (°ロ°)ヽ (゜∇゜)ノ (ノ◕ヮ◕)ノ (▰˘◡˘▰) (︶▽︶) (。・_・。) (・ェ-) (。◕ ‿ ◕。) ʘ‿ʘ ╮ (─▽─)╭ ᕦ(ò_óˇ)ᕤ (≧ω≦) (^▽^) ( ̄□ ̄) (¬_¬) (╥_╥) (╯3╰) (¬‿¬) (◣_◢) (≧o≦) (⋋▂⋌) (॓_॔) (─‿‿─) (∩︵∩) (⊙_◎) (。♥‿♥。) (~ ̄▽ ̄)~ ★~(◠‿◕✿) (∩˃o˂∩) ~ヾ(^∇^) (づ。◕‿‿◕。)づ (ノ◕ヮ◕)ノ*:・゚✧ (;一_一) (¬_¬) (¬‿¬) (∩︵∩) (◕ ‿ ◕)/