> Miki Candy。: Tutorial - legenda nas imagens pelo html

26/11/2014

Tutorial - legenda nas imagens pelo html

| |
exemplo 
Olá! Adivinha quem está em semana de provas e mesmo assim veio postar porque é rebelde? /sóquenão Eu! Por sorte eu já passei na maioria das matérias (menos matemática, essa matéria não é de Deus gente), mas mesmo assim tenho que estudar para não ir mal nas provas finais, que nem ontem que eu não sabia praticamente nada da prova de história, a professora colocou 3 capítulos do livro e mais outras coisas que ela deu na aula e não tinha no livro e a esperta aqui não estudou nada. Sem falar que ninguém merece ficar de recuperação final, né? E acho que o professor de português me odeia, então não duvido de nada </3. E além de tudo, esses dias eu peguei um resfriado e fiquei sem energia para fazer nada, agora se acumularam várias coisas para fazer, dá preguiça só de lembrar, AUSHUSH'. Mudando de assunto, reparam que está nevando no blog? Okay, sei que essas decorações natalinas em blog está meio ultrapassado, mas não resisti, o clima natalino falou mais alto!

Enfim, depois de muito tempo sem postar tutoriais por aqui, eu trouxe um ^u^. O tutorial serve para colocar legenda nas imagens do blog, mas não pelo Photoshop ou qualquer programa de edição de imagens, é pelo HTML mesmo. É bem simples e fiz alguns modelos diferentes para facilitar. Vocês podem ver como fica na imagem da postagem, bem fofinho né? :3 E é bem útil para colocar um recado pequenininho ou alguma mensagem. Continuem lendo para ver como faz!

1. Primeiro, abra seu HTML e procure pelo código abaixo:
]]></b:skin>

2. Quando encontrá-lo, cole abaixo dele esse outro:
.legenda {
width: 500px; /* coloque aqui a largura da imagem que terá legenda */
text-align: center;
color: #bca2cd; /* cor da fonte */
font-family: Georgia; /* fonte */
font-size: 12px; /* tamanho da fonte */
text-shadow: 1px 1px 0px #fff;
opacity: .8;
background-color: #fff; /* cor do fundo */
position:absolute;
margin-top: 110px; /* margem acima da imagem, mude o numero se necessário */
margin-left: 5px; /* margem direita, mude se necessário */
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition-duration: .70s;
}
.legenda:hover {
text-shadow: 1px 1px 0px #fff;
color: #e6aecf; /* cor da fonte quando passa o mouse em cima*/
opacity: .0; /* remova se não quiser que a legenda suma ao passar o mouse */
-webkit-transition-duration: .70s;
}

  Modifique os códigos necessários e salve. Preste atenção nos que estão sublinhados

2. Agora, abra a postagem que você usará a imagem com legenda, adicione a imagem normalmente e vá no HTML da postagem. Você encontrará o código da imagem, adicione o código abaixo depois dele. Não entendeu? clique aqui para ver um exemplo.
<div class="legenda">Sua legenda aqui</div>

Prontinho! Espero que tenham gostado do tutorial e que seja útil para vocês, ^u^. Qualquer dúvida é só perguntar por comentário que responderei assim que puder.
38 comentários ♥
  1. Boa sorte nas provas! Adorei o tutorial ♥ fica tão fofinho *-*. Talvez eu use o tutorial no meu próximo layout >u<. Você explica tutoriais muito bem!
    Kisses candy ♥

    ResponderExcluir
    Respostas
    1. Obrigada! :3 Que bom que gostou *u*. Anw, fico feliz que esteja bem explicado ♥
      Beijos, obrigada pela visita <3

      Excluir
  2. Espero que você tire boas notas, eu também não tinha estudado para nenhuma prova mais só tirei acima de nove, acho que a sorte estava ao meu favor, hehehe.
    Não conhecia esse tutorial >< Gostei, hehhe.

    Bei jus, smile.
    www.s-freeze.blogspot.com

    ResponderExcluir
    Respostas
    1. Também espero, aushuashu' Nossa, que bom *o* Eu também não costumo estudar poque presto atenção nas aulas, mas nos últimos dias eu meio que não prestei atenção nenhuma, AUHSUAH.
      Que bom que gostou ♥
      Beijos ^^

      Excluir
  3. Eba! Estava procurando esse tutorial e não achava em canto nenhum. Ainda bem que vocês postaram porque eu acho muito fofinho. :3 Beijus

    https://imperio--kawaii.blogspot.com | Espero você lá :3

    ResponderExcluir
    Respostas
    1. Sério?! Que bom, fico feliz que seja útil ♥ É bem fofinho mesmo :3

      Beijos, obrigada pela visita ^3^

      Excluir
  4. AMEEEEI, Helena!! Só ajudando aqui nos comentários; SCHIN SCHIN SCHIN PQ SIM *u*

    ResponderExcluir
  5. Boa sorte nas suas provas, amei o tutorial fica realmente muito bonitinho, quem sabe eu uso no meu próximo lay também. Beijos

    http://starf-ire.blogspot.com.br/

    ResponderExcluir
  6. Hoooy ♥ Espero que vá bem nas provas, matemática realmente não é de Deus! sdfkhksdhf. Também não passei em matemática ainda ;-; Sério que seu professor de português te odeia? skdfhskldh tadinha. Ai que meiga essa neve no blog, adorei sdlaufhsdikhfk, pena que não está chovendo de verdade, seria ótimo nesse calor dos infernos que está fazendo aqui onde eu moro.

    AAAHHH, QUE EFEITO MAIS LINDINHO *u* Adorei! Super fofinha e util essa legendinha, e você explicou super bem, acho que até eu consigo fazer agora .q
    Vou tentar com certeza <3

    Kisses ^^

    ResponderExcluir
    Respostas
    1. Obrigada, AUSHUHASH. Acho que sim viu, ele só gosta de meninos ,qq. Que bom que gostou da neve, bem fofinha né? ♥ Nem me fale em calor, aqui está muito quente também ;3;

      Annw, que bom que gostou, obrigada. Tenta sim *u*

      Excluir
  7. Gostei do tutorial, legenda é super útil *0*
    fashionemcores.com

    ResponderExcluir
  8. Só eu não tive provas finais? auehaueh. Em que ano você está? Eu acho matemática muito fácil, mas talvez seja porque é só a oitava série ainda y-y
    A neve no blog ficou um amorzinho ♥ pelo menos você não colocou todas aquelas coisas como rena de mouse e deixou tudo verde e vermelho; ninguém merece essas coisas uaheauhe
    Essa legendinha é muito fofa! Vou usar no meu próximo layout!

    Küsse - atmornin.blogspot.com

    ResponderExcluir
    Respostas
    1. Estou no nono ano, deve ser eu que sou burrinha mesmo, auhsuashua'.
      Acho essa neve muito fofinha também *u* Hahah, realmente ninguém merece essas coisas exageradas que só deixam o blog feio e-e'
      Que bom que gostou! Usa sim *3*
      Beijos ~

      Excluir
  9. Oi!
    Boa sorte nas provas! As minhas acabaram segunda-feira, não fui bem em matemática, eu juro que essa matéria só serve para complicar a vida dos alunos ç-ç. Achei essa neve um amorzinho, ficou muito fofa, dahsuihadsi.
    Adorei o tutorial, a legenda desse jeito fica um amor :333.
    Beijos ~ http://butter-tea.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá!
      Obrigada! Com certeza, ninguém merece ;3;. auhsuas, que bom que gostou ♥
      Nhaw, fico feliz que tenha gostado *3*
      Beijos ^^

      Excluir
  10. Oii! ^-^
    Eu também estou em semana de prova, concordo matemática é uma matéria demoníaca, odeio matemática é muito chata >-< Boa sorte nas provas e amei o tuto, vou pensar em fazer no próximo layout ^-^
    Beijos

    ResponderExcluir
    Respostas
    1. Oiee! ^3^
      Sim, realmente é uma matéria bem chatinha ><' Obrigada! Espero que tenha sido útil ♥
      Beijos ~

      Excluir
  11. Boa sorte nas suas provas. As minhas acabaram semana passada, mas estou com medo de não ter passado em matemática. Como você disse, matemática não é de Deus aushuahs.
    Obrigada por postar esse tutorial, eu estava louca por ele. Acho um amor legenda na imagem, mas eu nunca achava um tutorial bom. Obrigada por postar, irei usar em breve (com créditos lógico)

    @P-Kpoppers

    ResponderExcluir
    Respostas
    1. Obrigada ^u^. Pois é, ninguém merece matemática, auhsuash. De nada! Não precisa agradecer, fico feliz que vá ser útil. ♥

      Excluir
  12. Boa sorte com as provas :3 Acabei as minhas dia 27 e já estou de férias o/ Também sou péssima em matemática, mas acho que recuperei nesse último bimestre -le comemora-
    Já conhecia o tutorial e o resultado é lindo sem falar q é muito útil *-* Só não uso no meu blog pq tenho medo de mexer no HTML do meu layout atual, deu tanto trabalho q é melhor não arriscar huehue

    ~September Rains

    ResponderExcluir
    Respostas
    1. Obrigada! ^o^. Que sorte que está de férias! *u*
      Que bom que você gostou, UAHSUASHU'.

      Excluir
  13. Olá, tudo bem? Ahn, que chato essas coisas de provas e não estudar .q Boa sorte cm tudooo!
    Acho essas legendas muito fofas e fáceis de fazer. O tutorial está super bem explicado <3

    Att. Edwiges [babyboo]

    ResponderExcluir
    Respostas
    1. Olá! Tudo sim e com você? Realmente é bem desagradável. Obrigaada! ♥ Que bom que gostou, fico feliz que esteja bem explicado ^u^.

      Excluir
  14. Olá! ^-^ Graças à Deus minhas provas já acabaram. Eu estava pra explodir, sério! Eu passei em todas as matérias (inclusive a matemática do capeta), exceto biologia. Estou começando a odiar essa matéria também... -.- Vi sim que está nevando no blog e estou tentada a fazer nevar no EK também, não sei USAUHASUH
    Conheço o tuto e postei um parecido lá no blog, só que esse é bem mais prático. <3 Bom, boa sorte com os estudos. ♥

    Beijos ~ || Empire Kawaii

    ResponderExcluir
  15. DESCOBRI QUE SOU REBELDE! -q parei. Cara, não há nenhuma possibilidade da matemática ser de Deus. Ela é do demônio! Bom, eu vou na escola até quarta, eu tenho uma prova neste dia. Mas ninguém me falou nada de recuperação, então acho que posso ficar tranquila em relação à isso.

    O layout do Blog é simplesmente um dos mais fofos que eu já vi, sério mesmo ♥ ( Ao propósito, a neve está um amor. )

    Eu já usei este tutorial *0* Deu até saudade das ilustras com legendas askaspko' Ótimo tuto ♥

    http://htmlandresources.blogspot.com.br/

    ResponderExcluir
  16. Ooolá *--* Mds, que saudade de visitar os afiliados ! Esse layout ficou tão lindo <3 Espero que tenha dado certo na sua semana de provas, matemática é a matéria do demônho, não é divina; mas a matéria que eu mais precisava de ponto era EDUCAÇÃO FÍSICA ! Ódio eterno ! O Natal contagia, esses dias me peguei querendo comprar uma árvore nova, haha'
    Que tutorial lindo, arrasou hein ? *u* É bem prático e fica uma gracinha, pena que acabei de mudar de layout, mas nos próximos... Me aguardem, uheuhe'

    ~kiss
    CS ♥

    ResponderExcluir
  17. hahaha' ain my God gente '0' coisa linda de neve, amo neve de natal <3 poxa..matemática é o cão heuheuheueu :B parabéns por estar se dando bem nas matérias (uia! Que menina inteligente >3<) haha' não estudar pra prova de história é complicado... :/ melhoras com o resfriado. Amei o tutorial, sabia como colocar outro tipo de legenda nas imagens, um tipo de legenda oculta que você passa o mouse daí aparece toda a descrição, é bem maneira tbm mas essa?! Gente, vi todo mundo usando, salvei aqui nos favoritos, é bem provável que eu use em um layout free ou até mesmo em um dos lays do AN.

    Adolescente Nerd // Oficial

    ResponderExcluir
  18. boa sorte nas provas u.u
    eu ame o tutorial,
    A peço desculpas pelo sumiço, e que a a escola estava a me matar rsrsr
    Com carinho, Aishiteru em Contos |

    ResponderExcluir
  19. Yo :3. Eu já estou de férias \o/, felizmente consegui passar em todas no 3° bimestre aduhsdaiusdh. Matemática é amor, plz. Melhoras pra você, eu gosto de pegar resfriados q dnfkndskf. Nhee adorei o tutoria >3<, o efeito é muito legal. Bai u3u

    { www.wh-asia.net | Waiting for your comment!(⌒▽⌒)ゞ }

    ResponderExcluir
  20. Heey!! Eu também estou de férias aaaah *-* Passei direto em todas as matérias e olha que eu nem peguei o boletim,mas só de ouvir a professora falando "Monica de férias" eu fiquei surtada :3
    Amei o tutorial,o efeito é bem fofinho <3 Passei uma tag para você espero que possa responder: http://brisasdeverao.blogspot.com.br/2014/12/tag-liebster-award.html#more

    (Mas cá entre nós,Matemática não é fácil pra ninguém,sério gente,Matemática é um inferno na minha vida,eu fico tipo: GRRRRRRRRRR!!!! quando estou estudando Matemática)

    ResponderExcluir
  21. Para mim é ao contrário, passei em matemática e precisava de 8,5 em inglês uahsuahsuhasuhs e eu quero aprender a falar em inglês mas a preguiça não deixa :c. Eu aqui morrendo de calor e seu blog fresquinho... assim não vale hahahahahahaha. Esse tuto é muito bom, amo essas legendinhas tão fofas <333
    Bjjs! pattiency.blogspot.com.br

    ResponderExcluir
  22. Achei que ia ficar de recuperação em matemática e em química... Foi um milagre eu ter passado, só digo isso. Hueuheheueh
    Mas enfim, boa sorte! :3

    Adorei esse efeito, achei muito fofo! :3 Usarei no próximo layout muito provavelmente, obrigada.

    Besos >3<

    ResponderExcluir
  23. SUA DIWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA! Cara, há um tempo atrás eu procurei por esse tutorial, todos que eu seguiam, não funfavam, aí eu desisti, né. Favoritei a postagem aqui, vou colocar os códigos e indicar no meu blog ô/
    ━━━━━━━ •✺• Like a Rock Like a Roll •✺• ━━━━━━━

    ResponderExcluir
  24. Gostei bastante do tutorial:)

    Páginas em Preto

    Beijos

    ResponderExcluir
  25. Mas isso só funciona para uma imagem. E se eu quiser usar para várias?

    ResponderExcluir

post mais recente post anterior Home