Hey lindas e lindos, muita gente pediu pra ensinar como fiz a "bordinha" nos vídeos do ultimo post, na verdade não é uma borda, mas sim uma imagem de fundo. Como fiz um post com bastante vídeos, quis dar uma enfeitada pra deixar mais atrativo, e pelo visto funcionou né? (risos) Confira o resultado:
Ah, antes que eu esqueça! Aprendi esse tutorial no blog Menina de Deus, com a Lua Lopes ~seus créditos gata~ É bem simples de fazer, só requer um pouco de atenção! Primeiro você deverá fazer uma imagem, saiba como:
Fazendo a imagem
1- Vá ao youtube e pegue um vídeo de exemplo (qualquer vídeo, é só pra ver o tamanho)
2- Clique em compartilhar > incorporar e coloque a largura que deseja que os vídeos tenham (coloque uns 40px menor que a área da postagem), então vai aparecer a altura automaticamente. Isso serve pra descobrir a altura correta em relação à largura do vídeo, ou seja, pra ficar proporcional.
3- Agora que você tem a largura e a altura pode usar a criatividade pra criar a imagem! Lembre-se de fazer a imagem maior que o vídeo, para ficar com a "bordinha".
2- Clique em compartilhar > incorporar e coloque a largura que deseja que os vídeos tenham (coloque uns 40px menor que a área da postagem), então vai aparecer a altura automaticamente. Isso serve pra descobrir a altura correta em relação à largura do vídeo, ou seja, pra ficar proporcional.
3- Agora que você tem a largura e a altura pode usar a criatividade pra criar a imagem! Lembre-se de fazer a imagem maior que o vídeo, para ficar com a "bordinha".
Código
Copie o código abaixo e cole na aba "Editar HTML" da postagem, fazendo as alterações necessárias:<div style="background: url(URL DA IMAGEM) left no-repeat; height: 413px; width: 550px;"><div style="float: left; padding-left: 48px; padding-top: 60px;">CÓDIGO DO VÍDEO</div></div>
Entendendo:
- Onde está destacado de rosa, você vai substituir pelo que está sendo pedido.
- Onde está destacado de azul, você vai substituir pelo tamanho da sua imagem (largura: widht / altura: height)
- No que está destacado de roxo, você pode alterar para o vídeo ficar no lugar que você quiser em cima da imagem. Em padding-left você pode alterar o valor para a esquerda, lembrando que existem números positivos (1;) e negativos (-1;). Em padding-top altere para cima.
Você pode usar esse código para qualquer gadget é só colocar o código html desejado (c-box, contador, fanbox...) onde está escrito "código do vídeo".
Fiz duas bases bem simples para vídeo, quando puder trago mais!
470x295px
530x311px
É isso galera, espero que tenham gostado, kissus! :*
Tava rezando pra você postar esse tuto Anny, é meio complicadinho mas irei usar no meu próximo lay que sai no final de semana :)
ResponderExcluirBeijos ♥
Blog Refugio Teen - Fan page do blog, curte ;)
Amei o tuto! Suuper útil e fica um resultado bem bonito mesmo.O novo lay ta incrível!!!
ResponderExcluirBjos
srtaindependencia.blogspot.com.br
Amei essa postagem , muito útil . ^^
ResponderExcluirhttp://baratadearmario.blogspot.com.br/
Eu vi no outro post, achei um mimo só!
ResponderExcluirFica lindo assim :)
bjãoo
Adorei , a imagem que você colocou como modelo eu enttendi que era vídeo, ksoksoskoksks
ResponderExcluirhttp://you-for-things.blogspot.com.br/
Ótimo tutu,adorei :-P
ResponderExcluirwww.cereja-com-morango.blogspot.com
Nossa que perfeito esse tutorial :D E as bordas são lindas *--*
ResponderExcluirCada vez mais encantada com o GI *w*
www.cute-bii.blogspot.com
Amei o tutorial, já tinha visto em algum lugar, mas aqui tá mais simples ^^
ResponderExcluirhttp://themudancas.tk/
Este comentário foi removido pelo autor.
ResponderExcluirMuuuito obrigada, estava doida procurando esse tutorial!
ResponderExcluirhappy-charllote.tk
Nossa Anny! Eu não sabia como colocar! Você me ajudou muito. Mas fiquei meio confusa na parte do roxo e azul... Ele são do vídeo ou da imagem? Bem, como sempre, o seu blog está super divo! Continue assim, gata! Seguindo de tão lindo, você pode retribuir? www.divandoblog.blogspot.com.br]
ResponderExcluirBezos,
Nandaa ^-^
No azul você coloca as dimensões da imagem e no roxo você vai "posicionar" o vídeo por cima da imagem, pra ele ficar bem em cima da parte branca :D Obrigada linda <3
Excluirtava procurando esse tutorial. muito bom!
ResponderExcluirhttp://conectadas2.blogspot.com.br/
Simplesmente AMEI esse tutorial!
ResponderExcluirSuper original,nunca vi outro em lugar nenhum!
Adorei!!!
Flights and Dreams
Qual é sua fonte que vc usa pra os titulos linda ? Quando vc cobra pra poder fazer meu blog ?
ResponderExcluirContatos : paraserperfeita.blogspot.com
ResponderExcluirAwn, que bom que você postou o tutorial que eu pedi Anny! Eu não sei se eu entendi muito bem e se eu vou conseguir fazer assim tão bonitinho como você fez, mas eu posso até tentar. Fico feliz que você tenha me atendido! Obrigada mesmo. Um beijo.
ResponderExcluirthe-zombie-attack.blogspot.com
Eu fiquei procurando esse tutorial por todo canto!O resultado fica mto lindo!Bjos
ResponderExcluirhttp://balaio-sonhos.blogspot.com
Um pouco trabalhoso, mas o resultado é mt lindo, vale a pena o esforço!! Ameii! ^^ Bjs, Stardolleiras
ResponderExcluirAmeis Ajudou Viu ...
ResponderExcluirhttp://smileretro.blogspot.com.br/
Ai que amor que fica!
ResponderExcluirhttp://sweetshake.blogspot.com.br/
Pegaram seu tutorial e não colocaram os creditos...
ResponderExcluiro link que plagiou foi esse: http://m-a-v-i-e.blogspot.com/
Meu blog :http://www.toddynhosemcanudo.com/
Adorei o tutorial :) bem criativo bjos.. adoro seu blog:)
ResponderExcluirhttp://strawberrycupcake-rafa.blogspot.com.br/
Demais! fica muito fofo!
ResponderExcluirSeguindo aqui, viu?
Bjs -> imnanda.blogspot.com
Vou fazer agora no meu pois ficou muito fofo http://cinnamoncake-br.blogspot.com.br/p/concursos_24.html
ResponderExcluirFlor, como coloca esse menu, como no seu blog? que quando passa o mouse ele muda de cor?
ResponderExcluirbeijoos
http://euemeujardimsecreto.blogspot.com.br/
Awn , ameei o seu blog ( :
ResponderExcluirSeguiiindo *---------*
Se curtir o meu segue também ?
http://nerd-princesa.blogspot.com.br/
Obgg '
Este comentário foi removido pelo autor.
ResponderExcluiroi linda, adorei o teu blog, e supeer amei a dica dos background em vídeos. Venha conhecer o meu, se quiser comentar e seguir, irei retribuir com muito carinho. Beijinhos, Deby do blog pitadapink.blogspot.com.br
ResponderExcluirO tutorial é muito legal ! Quando eu for mudar o lay do meu blog , aí eu uso esse tuto !
ResponderExcluirMas em fim , o seu layout É MEGA LINDO ! amei de verdade *o*
Beijos !
tempo-deprimavera.blogspot.com
Adorei o tutorial, vou usar muito !
ResponderExcluirhttp://garotamarte.blogspot.com.br/
Que coisa mais gracinha *-*
ResponderExcluirQue fofo,nunca tinha visto antes
ResponderExcluirMini surpresinha: http://cupcakeedicoes.blogspot.com.br/2012/06/sobre-afiliados-e-muito-mais.html#more
obrigada por creditar =)
ResponderExcluirnão fiz mais que minha obrigação linda! :3
ExcluirAchei bem fofinho mesmo quando vi no outro post :)
ResponderExcluirótimo tuto, espero que o cufón dê certo pra vc
kissus
Cherry Bomb || Fanpage
Você me trollou, linda, kkk'
ResponderExcluirCliquei no vídeo de exemplo!
Beijinhos!
Sabia que isso ia acontecer com alguém, por isso coloquei o link do blog por cima KASJHSLADLAKSHDLAKSJD eu ri aqui'
ExcluirCurti bastante o tuto, não é tão simples mas como você disse, requer apenas um pouco de atenção, e o resultado é ótimo.
ResponderExcluirCrying Lightning
Isso tudo dá pra colocar numa div só que você deverá colocar < center >a div o resultado é realmente lindo, também pode-se colocar uma imagem pequena como background, não propriamente desse tamanho... Ah, também pode usar o bordas arredondadas para dar um quê a mais.
ResponderExcluirBjs!
Talita Ackles
Nerd Dream Layouts
Tem razão, não tinha pensado nisso! Adorei a idéia (:
ExcluirAnnnnyyyyyyy! você é minha salvação flor! >U<
ResponderExcluirtava procurando esse tuto ha seculos e nao achava em lugar nenhum :P
Vou salvar nos favoritos e usar sempre!
Brigada 1000 vezes!
Ah, aceita afiliacao ou parceria?
Beijinhos, Vickie
~~>www.chicletevioleta.blogspot.com.br
AAAA Menina! Você me salvou! A meses que estava procurando esse tutorial. Só que eu só encontrava no blog do TT como o blog da Candy foi hackeado não encontrava em canto nenhum :/ Mas achei aqui hahahaha
ResponderExcluirBeijos e muito obrigada
http://leticiac04.blogspot.com/
Bah. vlw guria
ResponderExcluirfico muitoo lindo.
é só um pouquinho complicado de acerta as medidas, mas eu consegui \o/ .
bjoo ^^
Nossa Adorei...
ResponderExcluirAproveitei muitos tutoriais daqui. Seu blog é lindo. Parabéns.
Beijos
Muito bom!!!
ResponderExcluirAdorei, fica incrível. Dá outra cara pro vídeo. Lindo!
ResponderExcluirBeijos.
http://www.odoceoutono.blogspot.com.br/
Vou utilizar esse no meu blog!Ah! Eu irei utilizar a 1º base ficou perfeita!Obrigada!
ResponderExcluirQuase 4
Vou tentar com certeza!
ResponderExcluir