Participe da nossa comunidade de Mulheres Empreendedoras!

Cadastre-se para receber as novidades do blog direto no seu e-mail!

 

30 novembro 2016

COMO ADICIONAR O INSTAGRAM NO RODAPÉ DO BLOG

INSTAGRAM NO RODAPÉ DO BLOG

Você vai conferir um tutorial completo de como adicionar o instagram no rodapé do blog, de forma simples mas profissional.

O Instagram é uma rede social de compartilhamento de imagens e vídeos que milhares de pessoas usam todos os dias para se conectar com os seus seguidores, e se você deseja aumentar as visualizações do seu blog, esse aplicativo é a ferramenta certa.

Por esse e tantos outros motivos é fundamental que você blogueira faça parte dessa rede. E pra você que não perdeu tempo e já divulga o seu conteúdo no Instagram, hoje o manual da blogueira preparou um tutorial de como adicionar o Instagram no rodapé do blog de forma simples e profissional.


 Criando o código do instagram 

Passo 1. Acesse o site snapwidget.

Passo 2. Clique em Sign Up para efetuar seu cadastro. O site te oferece a opção de se cadastrar normalmente disponibilizando o nome e e-mail, ou utilizando sua conta no facebook. Qualquer opção leva menos de 2 minutos para se concluir.  Pule para o passo 3 se já for cadastrado.


INSTAGRAM NO RODAPÉ DO BLOG

Passo 3. Após clicar em Log in você tem acesso ao site como cadastrado e poderá criar o seu widget normalmente. Para começar, clique em Edit Widget como a imagem abaixo ilustra. 

INSTAGRAM NO RODAPÉ DO BLOG


Passo 4. Em seguida é aberta o painel de criação do widget do Instagram. Nela é feita as edições das miniaturas, como a escolha do estilo do layout, o tamanho, a cor de fundo e os efeitos ao passar o mouse em cima das imagens. Acompanhe abaixo a função de cada um.

Username: Local onde fica o nome do usuário da conta. Antes de começar as edições é preciso autorizar o uso da conta no site snap widget. Esse passo é conduzido pelo próprio site.
Description: Desconsidere essa parte.
Thumbnail Size:  Tamanho das miniaturas.
Layout: Estilo das miniaturas. Ou seja, você pode escolher a quantidade de imagens e de colunas. No exemplo abaixo, o número 8 representa a quantidade de imagens e o número 1 a quantidade de coluna.
Photo Border: Adiciona bordas nas miniaturas.
Background Color: Adiciona cor de fundo nas miniaturas.
Photo Padding: Adiciona espaço entre as miniaturas.
Hover Effect: Adiciona efeito feed ao passar o mouse sobre as miniaturas.
Sharing Buttons: Adiciona botões de compartilhamento ao passar o mouse nas miniaturas.
Responsive: Desconsidere.

Elementos da parte inferior do painel.

Preview in new windowns: Exibe a miniatura em uma página.
Preview: Exibe a miniatura em tempo real, no próprio painel de edição.
Update widget: Exibe o código do widget.


INSTAGRAM NO RODAPÉ DO BLOG



Passo 5. Depois de clicar em Update widget uma janela é aberta exibindo o código pronto para ser usado. Selecione e copie o código, como a imagem abaixo ilustra. Guarde esse código para ser usado no passo 6.

INSTAGRAM NO RODAPÉ DO BLOG


Passo 6:  Logo em seguida, acesse o painel do seu blogger e clique em layout, adicionar um gadget (abaixo de footer-1) e selecione a opção html/java script e cole dentro da janela que se abrir, o seguinte código:

<div style='float: left; margin-left: -116px;'>

Cole aqui o código do instagram

</div>

Entendendo...

O local destacado de vermelho, é aonde você vai adicionar o código que acabamos de criar no site snap widget. A linha div que envolve o código serve para dar alinhamento, fazendo com que as miniaturas ocupem toda largura do rodapé.

Em margin-left você arrasta as miniaturas para a esquerda, lembrando que quanto maior for o número, mais pra esquerda elas vão ficar. Dentro do código que criamos no site snap widget tem as opções de width (largura) e height (altura) que podem ser alteradas, caso for necessário. 


INSTAGRAM NO RODAPÉ DO BLOG


Personalizando o título do Instagram no rodapé do blog

Passo 1. Para criar um título personalizado é bem simples. Basta encontrar o código de identificação do gadget, e para facilitar a busca adicione um título no gadget, e em seguida acesse o painel de edição do seu layout clicando em modelo, editar html. Clique dentro do painel, e em seguida aperte ctrl+f e escreva o título que você adicionou no gadget dentro a caixa de busca e dê enter. 

Na imagem abaixo você pode conferir o exemplo do código de identificação do gadget que criei em um blog de testes. Qualquer código começa com HTML, somente o número que diferencia um gadget do outro.

INSTAGRAM NO RODAPÉ DO BLOG


Passo 2.  Ainda no painel procure por ]]></b:skin> na mesma caixa de busca que utilizamos no passo 1 e acima da linha encontrada, cole um dos códigos a seguir que preparei para você:  

Personalizando com uma fonte 


INSTAGRAM NO RODAPÉ DO BLOG


/*--- Inicio do instagram no rodapé do blog por www.manualdablogueira.com.br --- */

#SEUCÓDIGO h2 { /*-- Código de identificação do título do rodapé --*/
font-family: 'Arial', sans-serif; /*-- Nome da fonte --*/
font-size: 13px; /*-- Tamanho da fonte --*/
text-align: center; /*-- Centraliza a fonte --*/
color: #000000; /*-- Cor da fonte --*/
}
/*--- Fim do instagram no rodapé do blog por www.manualdablogueira.com.br --- */ 


Personalizando com uma imagem 


INSTAGRAM NO RODAPÉ DO BLOG


/*--- Inicio do instagram no rodapé do blog por www.manualdablogueira.com.br --- */

#SEUCÓDIGO h2 { /*-- Código de identificação do título do rodapé --*/
color: transparent; /*-- Cor da fonte --*/
background: url('http://migre.me/vCDP6') no-repeat; /*-- Fundo do título --*/
padding: 35px 0px;
}
/*--- Fim do instagram no rodapé do blog por www.manualdablogueira.com.br --- */ 

Observação: Eu criei um título para presentear você, espero que goste. Mas caso deseje criar o seu próprio título, basta deletar o link destacado de roxo e adicionar a url da imagem que deseja.

Gostou do tutorial? Não esqueça de compartilhar com os amigos, de seguir o manual em "faça parte" que fica na lateral do blog e de curtir nossa página no facebook para não perder nossas atualizações. Um enorme beijo e até a próxima.

15 comentários:

  1. não consigo personalizar o titulo, sigo todos os passos, mas o titulo não muda nada

    meumelhormomentto.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom Emily,

      Infelizmente você deve está fazendo algo errado, porque o tutorial está 100% correto. Refaça com calma que você vai consegui! Boa sorte <3

      Excluir
    2. Oi Emily, Tudo bom?

      Eu revisei o tutorial e me deparei com um erro... Ao invés de ser abaixo, o código deve ser colocado acima de ]]> peço mil desculpas. Agora vai dar certinho! Bjs!

      Excluir
  2. Oii linda :)

    Eu queria saber como vc escreve nas imagens, com esse quadrado em cima. Eu tento várias vezes e não consigo fazer :(

    ResponderExcluir
    Respostas
    1. Olá Luana,

      Pode ficar tranquila que em breve vou fazer um post ensinando a forma de como eu edito minhas imagens 0/\0 valeu pela sugestão!

      Excluir
  3. Olá Lorena!
    Primeiramente, seu blog é maravilhoso! Tô viciada <3
    Olha, não tô conseguindo personalizar o título do instagram não :(
    Mas o resto deu tudo certinho :D :D

    ResponderExcluir
    Respostas
    1. Olá, Eu fico feliz em saber que acompanha o Manual <3 Eu revisei o tutorial e me deparei com um erro... Ao invés de ser abaixo, o código deve ser colocado acima de ]]> peço mil desculpas. Agora vai dar certinho!

      Excluir
  4. Obrigada pelo tutorial <3 Não sei o que faria se não fosse suas dicas haha

    ResponderExcluir
    Respostas
    1. Eu que agradeço Larissa <3

      Mil beijos e Feliz ano novo!!!

      Excluir
  5. o melhor tutorial que ja encontrei. obrigada. bjs

    ResponderExcluir
  6. Muito boa a Dica da imagem acrescentei no código da imagem /background: url('URL da Imagem') no-repeat center/ para deixa-la centralizado e do titulo apos edição e ou antes mesmo deixei um (.) ponto pois sem titulo não aparece a imagem!

    Parabéns mesmo pelo Blog!

    Att Receitas & Dicas www.web-receitas.com

    ResponderExcluir
    Respostas
    1. Fiz uma visita e realmente ficou muito bom! Ahh... Seu blog é perfeito, parabéns! Vou conferir todas as receitas mais tarde. Grande beijo :*

      Excluir

Manual Da Blogueira. Todos os direitos reservados © Desenvolvido por Lory Design Studio
Usamos cookies próprios e de terceiros que entre outras coisas recolhem dados sobre seus hábitos de navegação para mostrar publicidades personalizadas e realizar análises de uso de nosso site.
Se continares navegando consideramos que aceita seu uso. Entendi Mais informações