10 novembro 2015

#TutoriaisDaJaque ♡ Colocar Instagram no Rodapé do Blog

OIIIIE MEUS TESUDOOOS!

 Olheeeem o que vooooltou aqui para o OAB tananananaaaa siiiim o #TutoriaisDaJaque. Desde quando mudei o template do blog muuuuitos tesudos pedem para eu ensinar como que faz para colocar um widget do Instagram no rodapé do blog. Eu era doidinha para fazer no meu mas nunca conseguia, fucei o mundo através do Google e não achei nenhum tutorial que me ajudasse e então resolvi colocar a cara e a coragem nos códigos e deu super ceeeeerto!
 

Vá no seu editor de imagem e crie uma imagem de 1500px x 315px.
Faça um fundo da cor desejada e escreva algo em cima, por exemplo como a imagem ao lado (Clique aqui para fazer download) como estamos aprendendo sugiro que você faça uma imagem parecida com essa - Faça o download da imagem em sua maquina, você verá que ela tem um fundo transparente. Caso queira utilizar essa imagem em seu blog fique a vontade ;)


 Dentro da caixinha de HTML/JavaScript coloque:

<div id='Instagram'>COLE AQUI O CÓDIGO DO SNAPWIDGET</div>

Vá em MODELO > EDITAR HTML > Clique dentro da caixinha de códigos e tecle CTRL + F pesquise por Instagram.
Assim que você pesquisar por Instagram irá aparecer id='HTML' Fique MUITO atento a numeração que está ao lado de HTML pois você usará ele no passo a seguir!

Pesquise por ]]></b:skin> e acima dele cole:

/* Instagram no Rodapé
----------------------------------------*/
#HTML1{
background: url(http://static.tumblr.com/wlnblxn/NnTnxklhj/ultimas_do_insta.png) no-repeat; /* Imagem de fundo*/
text-alig:left; /*Verifique qual é o melhor para você. Left (esquerda); Right (Direita); center (centralizado do meio)
padding: 80px 0px; /* Altura entre o background e as imagens do Instagram
Onde coloquei #HTML1 coloque o numero do HTML que aparecerá no seu código no passo 7.

 Volte em Layout > Footer 1 > Apague o título "Instagram" que colocamos no passo 6!

Fiiiiiim! Gente, desse jeito que fiz e expliquei deu super certo para mim. Fiz em um blog de teste e também ficou bem direitinho. Caso você tenha seguido todos os passos e não tenha conseguido fazer pode deixar um comentário com o link do seu blog para que eu possa verificar e tentar te ajudar ;)
 Espero MUITO que tenha dado para entender e que vocês consigam fazer isso em seus blogs.


45 comentários:

  1. Que maravilha. Muito obrigada, eu estava atrás desse tutorial e nunca encontrava. Pensava que era um bicho de 7 cabeças, mas não! rs
    Simples Bella
    Beijos ♥

    ResponderExcluir
    Respostas
    1. É bem simples né Nanda? E fica tão bonito haha

      Três beijos, lindona <3

      Excluir
  2. Ogrigada ❤❤❤ Me ajudou muito!Eu já sabia como colocar o instagram , mas só não sabia como colocar imagem em título junto no roodapé.Era o tutorial que eu precisava! Muito obrigada!❤
    Hey faz um tutorial ensinando a deixar o layout responsivo mas personalizado para celular?!

    ResponderExcluir
    Respostas
    1. Quuue bom, Gabiiiii <3
      Então, deixar o layout responsivo é beeem complicado e estou aprendendo ainda mas pra celular é bem facil, é só você ir em MODELO > (AO LADO DE EDITAR HTML TEM UM TREQUINHO DE DISPOSITIVO MOVEL E DAI VOCÊ SÓ DESMARCA A OPÇÃO QUE TEM LÁ) e pronto kkkkk
      Mas vou anotar aqui e fazer um tutorial mais explicadinho. Obrigada pela sugestão <3

      3 Beijos pra você :****

      Excluir
  3. Nossa, você me ajudou muito. Ótimo tutorial, foi super útil, obrigada!
    http://www.leticiakoliveira.com/

    ResponderExcluir
  4. Jaque como que deixa as imagens do instagram ocupando todo o espaço, igual ao do seu blog?
    Eu fiz o tutorial certinho, mas as imagens ficaram pequenas e centralizadas, eu queria que elas ficassem grande (como a sua) e ocupando toda a largura do blog.Eu até tentei aumentar o tamanho, mas mesmo assim elas continuam centralizadas, e não ocupam toda largura.

    ResponderExcluir
  5. Jaque não tem como colocar "1400" em Thumbnail Size, eles só permitem 3 números :( eu não consigo :(

    ResponderExcluir
  6. Jaque, ajuda a gente, como que faz para colocar na página inteira ? O Thumbnail Size não permite colocar 1400 =/

    ResponderExcluir
    Respostas
    1. Barbará, falei com você lá no grupo do Follow Your Dreams ;)

      Excluir
  7. Muito obrigadaaa, ajudou bastante hehe

    ResponderExcluir
  8. Muito obrigadaaa, ajudou bastante hehe

    ResponderExcluir
  9. Não consegui colocar a imagem :( poxa queria tanto.
    Eu segui tudo direitinho.

    ResponderExcluir
    Respostas
    1. Só a imagem que não foi? Deve ter feito alguma coisinha pra não ter ido :/

      Excluir
    2. tentei entrar no seu blog pra pegar seu contato para poder te ajudar mas teu blog está bloqueado :/

      Excluir
  10. Hey, tudo bem?
    Eu tentei colocar o instagram de acordo com o tutorial, mas ele não sai exatamente igual ao seu.
    Poderia me ajudar, por favor?

    ResponderExcluir
    Respostas
    1. Daisy, alguma coisinha você deve ter feito de errado para não conseguir :/
      Nos templates que faço para minhas clientes eu sempre sigo esse Tutorial e dá certo em tooodos. Mas posso tentra te ajudar sim! Vou entrar em contato com você atraves do seu blog :*

      Excluir
  11. Oi Jaque, descobri seu blog hoje em uma busca pelo Google, e deu super certo suas dicas, muito obrigada.

    ResponderExcluir
    Respostas
    1. fico tão feliz quando as pessoas descobrem meu blog através do google, cê não tem noção. Que bom que deu certo, Miria <3
      Bem vindaaaa

      Excluir
  12. Oiee meu amor eu nao consegui por em meu blog nao, a imagem nao aparece :/
    www.atrasdpenteadeira.com

    ResponderExcluir
    Respostas
    1. amoreeee, a imagem tá lá siiim!
      Você só tem que mudar os numeros no padding ou colocar um margin para que a imagem suubaa, dai vai aparecer a imagem ;)

      Excluir
  13. Não fica na largura total do blog, só centralizado :/

    ResponderExcluir
    Respostas
    1. Stefani, pra ficar mais na largura total do blog, no snapwidget, em "disposição" ao invés de você colocar 7x1 coloca 9x1... 10x1... até ficar na largura total do seu blog

      Excluir
  14. OI JAQUE NÃO ESTOU CONSEGUINDO SEMPRE QUE ESCREVO MEU NOME DE USUARIO LA NO SITE NÃO APARECE MINHAS FOTOS APARECE UMA CARINHA TRISTE ASSIM: :(

    ResponderExcluir
    Respostas
    1. suas fotos do instagram são bloqueadas? se forem não tem como fazer isso!
      desbloqueia e você vai conseguuuir! :****

      Excluir
    2. as minhas fotos são bloqueadas sim!!!! vou tentar agora . queria fazer isso a seculos . bjs muito obrigada.

      Excluir
  15. oi, adorei o tutorial. mas tenho uma duvida rs quando abro o modelo dá pra ver só a imagem que vc disponibilizou "ultimas do instagram' mas nao aparecem as fotos do insta. e quando coloco "vizualizar blog" só aparece as minhas fotos e não aparece a imagem.O que faço? rs

    ResponderExcluir
    Respostas
    1. Amoree, pra eu poder te ajudar eu preciso do link do blog que você fez isso. As vezes a imagem está lá sim!!! só que está abaixo das suas fotos do Instagram, dai tem que alterar os numeros do MARGIN até a imagem subiir

      Excluir
  16. Obrigadissíma!!!

    http://zipereblush.blogspot.pt/

    ResponderExcluir
  17. Jaque a imagem fica em baixo das fotos, como faço para arrumar?

    ResponderExcluir
    Respostas
    1. Andressa, você quem te alterar os numero do MARGIN até que a imagem fiquei acima das suas fotos

      Excluir
  18. Muito explicadinho <3 Deu certo, obrigada linda!

    ResponderExcluir
  19. Melhor tuto de instagram que já vi! Muito Obrigada pela ajuda :*

    http://laisarabelo.blogspot.com.br/

    ResponderExcluir
  20. amei esse tuto, mais a imagem esta ficando em cima das fotos do insta, não estou conseguindo ajustar.

    ResponderExcluir
    Respostas
    1. oi amoree, você tem que ajustando no CSS, no margin até que fique bom <3
      Vou ensinar um outro jeito de colocar rodapé no blog <33

      Excluir
  21. Adorei Jaque!!! Mas não consegui colocar a imagem!!!

    Amei seu blog!


    Beijos da Nah
    www.oxifalei.com.br
    Instagram: @oxi.falei
    Snap: nath.thamires
    Youtube: Oxi,falei

    ResponderExcluir
    Respostas
    1. poxa Nah, que pena :/
      vou atualizar esse tutorial e o qual vou faze TODO mundo vai conseguir, certeza!

      beijoooos, lindona! <3

      Excluir
  22. Olá, eu gostaria de saber se você faria um tutorial de como colocar a opção comentar pelo Facebook, no blog?

    ResponderExcluir