Galeria de vídeos do Youtube em formato de slide dinâmico - * Blog Elaine Gaspareto *

Galeria de vídeos do Youtube em formato de slide dinâmico

em 22/02/2017

Galeria de vídeos do Youtube em formato de slide dinâmico

Você tem canal no Youtube?
Tem?
Então esse tutorial é feito sob medida pra você, que deseja exibir seus vídeos recentes ou seus vídeos mais relevantes em seu blog!
Ele vai ensinar como colocar em seu blog um slide com os seus vídeos preferidos, de seu canal do Youtube! Isso pode aumentar as views de seus vídeos e também aumentar seus inscritos.
Quando terminarmos esse será o resultado:


Demonstração do tutorial



Não é legal?
Vamos aprender?
Para começar abra a página com os códigos necessários à realização do tutorial e a mantenha aberta.


Copiar os códigos


A seguir acesse a aba Modelo de seu blog e clique em Editar HTML.
A seguir, dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que aparecer digite <head> e tecle Enter para localizar.
Está bem no começo do código, tá?
Abaixo dessa tag de abertura cole o CÓDIGO CSS.
Salve.

Agora, na barra de busca, digite </body> e tecle Enter.
Acima dessa tag de fechamento cole o CÓDIGO JAVASCRIPT.
Salve.

Agora vá à aba Layout de seu blog, clique em Adicionar um gadget e na janela de opções que aparecer selecione HTML/JAVASCRIPT.
Na caixinha que expandir cole o CÓDIGO HTML.

Salve, arraste para onde deseja que fique (eu sugiro abaixo do cabeçalho, abaixo de seu menu ou acima da área dos posts) e salve a alteração do Layout.
Visualize.
Se tudo deu certo o slide de vídeos está funcionando em seu blog.


Editando o slide e trocando os vídeos exibidos pelos que você deseja mostrar



Agora chegou a hora de colocar seus próprios vídeos no lugar dos meus, ok?
Vamos lá: no código HTML/JAVASCRIPT você verá esse comando:

<img alt="Youtube Video 1"
 data-type="youtube"
 data-videoid="eQYqeG2ZNnE"
 data-description="Contador de visualizações individuais para cada post do blog" />

Ele se repete para tantos vídeos quantos estão sendo exibidos.
Note o trecho que marquei em vermelho.
Ele é o ID do meu vídeo.
Cada vídeo do Youtube tem um ID único.
Acesse seu canal e veja algum vídeo. No caso do meu primeiro vídeo o endereço que aparece no navegador é https://www.youtube.com/watch?v=eQYqeG2ZNnE
Percebe a terminação dele, no navegador? Esse é o ID do meu vídeo e cada vídeo seu tem um ID assim, único.

Então, para trocar o meu vídeo pelo seu apague o ID e coloque o seu.
Faça isso em todos os comandos de cada vídeo: Vídeo 1,  Vídeo 2, Vídeo 3 até terminar todos.
Feito isso, salve.
Agora seu slide deve estar exibindo os vídeos que você selecionou.
Demais, né?
Vamos às dicas extras?


Dicas extras para configurar o slide de vídeos do Youtube



Quantidade de vídeos:
No meu exemplo eu listei 11 vídeos; pode ser mais, pode ser menos. Se quiser menos basta apagar do CÓDIGO HTML o comando dos vídeos que não quer. Se quiser mais de 11 basta acrescentar mais comandos ao código, antes do fechamento </div>.

Editar cores e fontes:
Então, aí é mais tenso.
Como o código que define a aparência é bem longo eu hospedei como arquivo .css
Assim sendo, para editar a aparência você precisa baixar os arquivos, colar em um bloco de notas e editar como desejar. Aí precisa hospedar novamente para que as alterações funcionem.
Ou seja: dá trabalho, mas se você gosta de desvendar e entender como os códigos funcionam vale a pena o trabalho.
Clique no botão abaixo para copiar os códigos CSS, edita-los e daí então hospedar:


Copiar os códigos CSS


Hospede os scripts para nunca perdê-los:
Esse slide requer 4 scripts para funcionar: 2 scripts .css e 2 scripts .js, que eu hospedei em minha conta Google Sites.
Acontece que eu recomendo vivamente que você baixe cada um dos scripts, salve em seu computador e hospede-os.
Depois de salvar em seu computador você deve hospedar esses scripts em sua própria conta Dropbox, Google Sites ou qualquer outro host que você use.
Eu prefiro o Google Sites.
Não sabe como fazer isso?
Eu ensino aqui:


Depois de hospedar os arquivos em sua própria conta substitua o endereço dos meus arquivos hospedados pelo endereço dos seus.
Isso é extremamente importante para evitar que seu slide saia do ar no futuro devido à excesso de tráfego ou se um dia eu deletar os arquivos do meu servidor.
Para baixar os scripts para seu computador basta clicar, na página de códigos, em cima do endereço de cada um deles.
O download será automático.

Para facilitar o entendimento de como salvar os arquivos, hospeda-los e trocar os links nos códigos eu gravei a execução deste tutorial em vídeo.
Aperte o play, veja como é feito e se tiver alguma dúvida relativa ao tutorial diga nos comentários e eu ajudo se puder :)





Quer me ajudar? Curta, comente e compartilhe esse post.
Isso ajuda o blog crescer e chegar à mais pessoas...
Muito obrigada, e aproveite o tutorial!
17 comentários via Blogger
comentários via Facebook

17 comentários:

  1. Olá Elaine, tem como fazer esse slide como uma Galeria de fotos?

    ResponderExcluir
    Respostas
    1. Lucas, não testei. Para fotos o ideal seria um slide convencional. aqui no blog tem alguns e estou testando um parecido com essa galeria. Se conseguir fazer funcionar no Blogger eu publico :)

      Excluir
  2. Tem como deixar de uma forma automática, ao subir um vídeo no youtube, ele atualizar automaticamente.

    ResponderExcluir
  3. Também não consegui no no meu. Não apareceu.

    ResponderExcluir
  4. Elaine, você me ajudou muito! Sou muito grata a ti! estava procurando isso e não encontrava em nenhum lugar! com certeza recomendarei teu site!!! bjooo :*


    https://guriadobatomv.blogspot.com

    ResponderExcluir
  5. Sinceramente só tenho a agradecer, tenho um canal de tutoriais de criação de musica e precisava colocar no meu blog e você me possibilitou isso te agradeço demais, você teria alguma dica para que possa modificar o menu lateral? e tbm alguma dica de postagens recentes abaixo de cada postagem? muito obrigado.

    ResponderExcluir
  6. NO MEU NÃO APARECEU PODE ME AJUDAR??

    ResponderExcluir
  7. Tem como por esse slide só em uma pagina especifica?

    ResponderExcluir
    Respostas
    1. Milene, tem sim. Cole o Código HTML na página que deseja, mas lembre de reverte-la para o modo HTML antes. Isso você faz clicando em HTML no alto do editor de postagem, lá onde você escreve os posts ou cria as páginas.

      Excluir
  8. "Este blog está aberto exclusivamente a leitores convidados

    http://blog-de-trabalho.blogspot.com/
    Parece que você não foi convidado para ler este blog. Se achar que trata-se de um engano, recomendamos que você entre em contato com o autor do blog e solicite um convite."

    ResponderExcluir
  9. Olá Elaine,fiz tudo certo como você ensinou,mas tá dando erro..aparece esta mensagem no blog ..Gallery Error: Reference UGTheme_default is not defined

    in file: undefined line undefined....poderia me ajudar

    ResponderExcluir
    Respostas
    1. Olá!
      Eu nunca vi esse erro, mas pode ser duas coisas: você pode ter colado algum dos códigos em lugar errado ou tem algum outro script no seu blog que cause conflito, outro slide por exemplo.
      Experimente testar em um template sem nada mais, e verifique se não está confundindo as tags de abertura e fechamento...

      Excluir
  10. Olá, boa tarde, tudo bem? Achei muito interessante esta função e gostaria de saber se é possível configurar estes códigos para que os vídeos pudessem deslizar automaticamente sem precisar clicar nas setas para passar para os próximos vídeos.

    A ideia é usar esta função para substituir 2 scripts que tenho atualmente no final do meu blog justamente para esta função do canal no Youtube. (Meu blog está ficando pesado e quero eliminar alguns scripts desnecessários).

    Se quiser dar uma olhada onde quero inserir, está bem no fim da página em www.compreietestei.com.br
    Antecipadamente agradeço se puder esclarecer essa dúvida e bom feriado! Abs! Vicente

    ResponderExcluir
    Respostas
    1. Vicente, infelizmente não tem. O slide não tem a função scroll na tela maior. Tem que clicar ou nas setas ou nas miniaturas abaixo da tela maior...

      Excluir
    2. Entendi! Muito obrigado pelo retorno!

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



No Instagram