21 junho 2016

Como colocar a caixa de instagram no blog

Olá, hoje dou inicio a mais uma saga de posts aqui. Que é a saga "dicas para blogger". Onde vou colocar mini tutoriais ensinando um pouco do que sei de html e designer. Nestes anos de blog aprendi muitas coisas, e vou começar a deixar registrado aqui também para pessoas mais leigas que eu, aprendam também. Afinal, este é o intuito de ter um blog. Passar o conhecimento para frente.

Estava mudando o layout do blog, e vi que o site que usava o widget para por as fotos do instagram no blog, não estava mais funcionando. Então tive que procurar outro para suprir minhas necessidades. Procurando, achei o LightWidget. E é bem fácil de mexer e eficaz. Vamos ao passo a passo.

1- Primeiro de tudo, você vai entrar aqui https://lightwidget.com/ e a página vai aparecer para você, como no print abaixo.

2- Após isso, clique no botão vermelho "log in" e conecte ao seu instagram.

3- Após isso, vai aparecer esta janela abaixo. Coloque sua url onde está marcado, ou se quiser colocar uma caixa de fotos no seu blog, com pessoas que utilizarem uma "x" hashtag, coloque a hashtag no campo abaixo, e deixe o campo da sua url do insta em branco.

4- Depois disso, mude na parte "number of columns". Aqui vai ser a quantidade de colunas que você quer de fotos na sua caixa. No "number of rows" é a quantidade de fotos que terá na sua caixa. Mude de acordo com o desejado. O "Image hover effect" é o efeito que terá suas fotos após serem passadas o mouse por cima delas. Escolha como desejar.

5- Depois de adaptar tudo como deseja, aperte em "preview" para ver como ficou. Se não tiver de acordo, mude novamente os efeitos e a quantidade de fotos que irão aparecer, e aperte no "preview" novamente.

6- Depois que estiver do seu gosto, aperte em "get code" e espere carregar seu código.

7- Após gerar seu código, abrirá uma caixa com o seu código. Copie o código que aparecer e vá para o blogger.

8- Vai no painel do blogger>Layout> Sidebar (ai tem que ver onde você quer colocar a caixa. Geralmente se usa na sidebar. Eu uso no fim do blog, como podem ver). Independente do lugar escolhido será o mesmo processo. Aperte em "Adicionar um Gadget > HTML/JavaScript". Cole seu código copiado, nesta caixa que aparecer. Salve e pronto.