Como colocar uma janela de vídeo no blogger | Quero Dicas | Tutoriais para seu blogs


Como colocar uma janela de vídeo no blogger


Colocar uma janela de vídeos no blogger é tarefa bem fácil, basta seguir três passos e pronto. O nome desse estilo de janela é janela modal e não como muitos pensam: janela pop-up

Qual é a diferença de janela modal para janela pop-up?

Janela pop-up são aquelas que se abrem automaticamente no navegador quando se acessa uma página na web ou algum link de redirecionamento. Normalmente, ela é muito usada nos blogs e sites para solicitar ao visitante que recebam atualizações por e-mail ou pedidos de curtidas no Facebook entre outras redes e/ou outras solicitações.

Janela modal existe dois tipos: Uma de diálogo que bloqueia qualquer interação na janela principal (blog ou site), até que o diálogo seja encerrado pelo visitante e outra em que pode haver interação concomitante entre as duas janelas. Normalmente, a mais usada é a diálogo modal (bloqueia o visitante).

Neste tutorial, estarei ensinando como colocar uma janela diálogo modal de vídeos. Podendo ser seus próprios vídeos ou não.

  TUTORIAL


Sempre recomendo: Faça um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a um blog de teste! Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.

1º Passo:

1 - Acesse o painel do seu blog
2 - Clique me "Modelo" e "Editar HTML"
3 - Clique em qualquer lugar dentro da área de código e pressione CTRL + F para a caixa de pesquisar
4 - Ao abrir a caixa, cole e procure pelo código: </head>

 
</head>


5 - Apos localizá-la, logo acima cole o seguinte script:

6 - Salve.

Atenção!
Caso você já tenha alguns dos scripts acima, principalmente, o plug-in Jquery (vermelho) somente copie e adicione os outros.

2º Passo:

1 - Volte para o painel do blog
2 - Clique em "Layout" em seguida "Adicionar um Gadget"
3 - Procure e selecione "HTML/Javascript"
4 - Dentro dele, cole o segundo script:


5 - Salve e pronto! Seu blog já está pronto para exibir a janela de vídeos modal.


3º Passo: Estilos de Janela de vídeo
Quando você quiser exibir um vídeo na janela modal, você deverá usar uma das chamadas abaixo:

Janela modal : Texto simples
Este estilo mostra somente um pequeno texto (link) para clicar e visualizar seus vídeos.

Veja o exemplo clicando → AQUI

Clique para copiar o código da Janela modal : Texto simples

Janela modal : Com imagem
Este estilo mostra uma imagem com o link do do seu vídeo.

Veja o exemplo clicando → AQUI

Clique para copiar o código da Janela modal : Com imagem


Adicionando Vídeos ao Blogger 
• O destaque em vermelho, em ambos os códigos, você deverá adicionar a URL DO VÍDEO a ser mostrado.

Basta ir ao Youtube, clicar em Compartilhar, na parte inferior do vídeo, e copiar o endereço mostrado.


Caso não resulte no resultado previsto, basta copiar a url na barra de navegação. Dessa forma:



• O destaque em Roxo, no estilo com imagem, você deverá colocar a URL DA IMAGEM da sua imagem a ser exibido.

Não sabe como coletar a url das suas imagens? Sem problema. Veja:
Como hospedar imagens no próprio blogger

• O destaque em azul, no estilo texto simples (Clique aqui e assista o vídeo), você deverá escrever o texto de sua preferência.

IMPORTANTE: 
→ Este código suporta outros serviços de publicação de vídeos: Blip.tv, Vimeo, Sapo Vídeos, etc.
Basta extrair a url do vídeo da mesma forma que mostrada acima.

→ Você também poderá utilizar ambos os estilos (Texto simples ou com imagens) em seu blogger. Somente lembrando que para cada estilo um vídeo.

Gostou? Então deixe seu comentário! Ele é muito impostante pra mim =D
Beijinhos

Me Contrate!


6 comentários

Clique e deixe seu comentários
terça-feira, 04 agosto, 2015 ×

que presente lindo!
eu vivo trocando os meus templates...
baixei ele ta,quando for usar eu venho avisar.
Obrigada!Beijos <3

Resposta
avatar
admin
terça-feira, 04 agosto, 2015 ×

Que bom que tenha gostado Vivi. me avise mesmo, vou adorar vê-lo em seu blog. =D Beijinhos♥

Resposta
avatar
admin
quarta-feira, 05 agosto, 2015 ×

Bia meu amor,parabéns pelo blog que ja tem 1 ano de dedicação e carinho seu aqui e por isso mesmo que estou adorando ler as postagens e muitissimo obrigada pelo presente!!!EU JA INSTALEI ELE NO MEU BLOGGER!!!
Primeirinhaaaa rs
Agora vou configura-lo aos poucos conforme as regras que foram citadas.
Por favor me visite:http://balaiadadegatas.blogspot.com.br

Resposta
avatar
admin
quarta-feira, 05 agosto, 2015 ×

Acabei de visitar seu blog e está lindo!
Vi que você colocou outro banner que eu criei para o universos das dicas kkkkkkkkk e ficou ótimo
Parabéns e sucesso!
.

Resposta
avatar
admin
sábado, 26 novembro, 2016 ×

Que legal as informações contidas no seu blog tenho certeza que auxilia muitas pessoas parabens

Resposta
avatar
admin
domingo, 27 novembro, 2016 ×

Que bom que esteja gostando Léia.
Muito obrigada por seu comentário e sua visita =D
Beijinhos ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.