Como colocar instagram responsivo no blog

segunda-feira, fevereiro 01, 2016 0 Comments A+ a-


Esse é o primeiro tutorial do blog, não é nada complicado e bem rápido de se fazer, apesar da aparência da postagem ser um pouco longa é porque fiz tudo explicadinho, para não perder tempo, vá até a opção que deseja, é só ler o que está destacado em verde. Acredito eu que quase todos vocês tenham instagram e usam algum widget (aquele negócio na sidebar que mostra as fotos do app) no blog. O que trago hoje para vocês é um meio de ter essas fotos mostradas também na versão mobile do blog, já que o mesmo é responsivo! 

Vocês já devem ter visto minhas fotos do instagram no final da página no blog, e fica um amorzinho. O melhor de tudo é que fica super bonito na versão mobile também. Eu vou ensinar para vocês duas formas de usar esse gadget, uma igual uso aqui no blog e outra normal, igual todos costumam usar. Não vi necessidade de um vídeo, então qualquer dúvida é só deixar nos comentários, certo?


Você pode seguir o tutorial normalmente independente de querer usar o gadget igual ao meu ou normal, quando tiver de haver qualquer mudança eu avisarei, então segue tranquilo, jovem.


Primeiramente, acesse o site: http://instansive.com
Agora, nos primeiros dois campos em branco vão as informações importantes.
  • Em @username, coloque o seu nome do instagram, no caso o meu @letrasemvida.
  • Em #hashtag você pode escolher que apenas as fotos marcadas com aquela hashtag apareçam no gadget, por exemplo, meu ig é pessoal e só as vezes eu posto fotos do blog e quero que só elas apareçam, você vai ver a tag que você coloca nessas fotos e colocar ali, ex: #blogger. Caso não queria isso (como eu), é só deixar em branco (função legal, não é?).Agora vem uma parte mu
 Se você quiser o widget normal, colocado na sidebar que é o mais comum, temos três opções para você. No primeiro campo da caixa "Initial settings (click add to adjust responsive options)" escolha a opção que deseja. Para não perder tempo vá direto a explicação que lhe é útil!
Opção Grid 
  • A opção Grid deixa as imagens em colunas, como se fossem grades mesmo, é a opção mais comum e usada por blogueiros. 
Em Number of columns você escolhe quantas colunas quer que o gadget tenha.

Em Number of rows você determina quantas imagem vocês quer que apareça em cada coluna (na vertical), quanto mais imagens maior a altura do gadget.

Em Image hover effect tem oito (sim, 8) opções de efeitos para a sua foto, para não me prologar vou fazer um resumão:
  1. None, deixa sem nenhum efeito.
  2. Fade In, quando você passa o mouse em cima da foto ela fica esbranquiçada. E em Fade Out é ao contrário, as fotos já estão esbranquiçadas e quando você passa o mouse por cima dele a foto fica normal.
  3. Zoom In, quando você passe o mouse sobre a foto ela dá um pequeno zoom. Zoom Out á deixa as imagens com uma pequeno zoom e quando você passa o mouse sobre elas a imagem fica normal. E em Zoom and rotate a imagem fica normal e quando você passe o mouse sobre a foto ele dá um zoom maior rotacionando levemente a imagem.
As outras três caixinhas que nos restam não são tão importante na minha opinião então não irei alongar a postagem por aqui, são apenas alguns  efeitos que não acho elegante de se usar, mas se você quiser, fique a vontade para testar por lá!

Opção Slideshow

  • A opção Slideshow (como o próprio nome já diz) faz com que o widget fique em forme de um slide da sidebar, eu particularmente acho legal, mas se seus blog já tem outros slides como o meu, acredito que fique com um pouco de poluição visual.
Em Number of photos você determina quantas fotos passarão  no seu slides, por exemplo, se colocar 15 nesse campo, suas ultimas 15 fotos recentes aparecerão no slide.

Em Image hover effect tem três opções de efeitos para a sua foto:
  1. None, deixa sem nenhum efeito.
  2. Fade In, quando você passa o mouse em cima da foto ela fica esbranquiçada.
  3. Fade Out, deixa todas as fotos com efeito esbranquiçado.

Opção Columns (pinterest style)

  • A opção Columns (pinterest style) deixa o gadget parecido com o do pinterest, eu não acho muito atraente, mas se você gosta é bem simples de configura-lo.
Em Number of columns você escolhe quantas colunas quer que o gadget tenha, o padrão é três e eu acho mais bonito, porém se quiser alterar fique a vontade.

Em Number of photos vocês escolhe quantas fotos você deseja que tenha ali, quanto mais fotos tiver mais será a altura do gadget, certo?

Na ultima caixinha, que está escrito "Amount of space between pictures (in pixels). Set to 0 to remove padding." eu não descobri a diferença que faz alterar os números, eu os alterei e não vi diferença alguma, se você sabe diz nos comentários que eu atualizo a postagem.

   Se você quer um gadget igual ao meu preste atenção aqui!

Em Type of widget deixa a opção Grid selecionada (aquela la do começo, lembra?).
Preste atenção aqui!
Em Number of columns você coloca o valor: 10.

E pronto, a configuração fica á seu gosto, é a mesma coisa do Grid normal, fácil não? É só voltar lá no comecinho da postagem e ir configurando como quiser!

Para a imagem ficar correta precisa ter 10 colunas, para deixar o widget igual ao meu você NÃO pode coloca-lo na sidebar, você deve coloca-lo no Footer-widget no seu layout!

Uma shinigami que gosta de ler e é apaixonada por joguinhos, sonha em lançar um livro e um dia ir para o Japão. Fallenatica e k-popper, chora quase sempre que escuta Lie.