Resolvi juntar todas as informações em um único post, pois quando comecei a usar o Instafeed no blog, não encontrei um site que explicasse tudo. Alguns explicavam apenas como gerar o token e em outros encontrei o javascript necessário para criar o widget com as fotos do Instagram. Então para facilitar, todas as informações ficaram em um único post para vocês.

1. Criando o aplicativo

Acesse a página instagram/developer e faça o login com os dados da sua conta no Instagram. No primeiro acesso, irá solicitar um cadastro para a criação da conta desenvolvedor. Confirme as informações e na tela seguinte clique no botão Register a New Client.

Em seguida, irá abrir a tela para cadastrar o seu aplicativo. Você deve preencher com as informações na aba Details:



Não clique para registrar ainda. Acesse a aba Security e desmarque a opção Disable implicit OAuth. Feito isso, clique em Register no final da página.


Na tela seguinte irá apresentar o client id necessário para gerar o access token.

2. Criando o Access Token

Para criar o access token utilize a URL abaixo. Você deve substituir o YOUR_CLIENT_ID pelo código client id gerado nos passos anteriores.

https://instagram.com/oauth/authorize/?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost&response_type=token

Feito isso, cole essa URL no seu navegador. Ao acessar o este link, irá abrir a página do Instagram solicitando a autorização para o aplicativo.


Após esta tela, você será direcionado para outra página. O conteúdo dela não é importante, o que você precisa estará na URL da página. Tudo o que aparecer após "access_token=" é o que você precisa guardar.

3. Criar gadget com as imagens do Instagram

Antes de utilizar o código que irá mostrar as imagens do seu perfil no Instagram, você deve localizar o userId do seu perfil. Portanto, acesse este link e informe o seu User.

Em seguida, clique em Get Instagram User Id.



Agora, para adicionar um gadget com as fotos no seu blog, basta utilizar o código abaixo. Você pode testar o código com os seus dados acessando esta página aqui.



Entenda o que você deve alterar no código acima:

userId: É o ID que você gerou no passo número 3.
clientId: É o ID gerado ao criar o aplicativo na página do Instagram (passo 1).
accessToken: Follow this post to get your Access Token (passo 2).
limit: É o limite de imagens que irão aparecer no seu gadget. O Instagram tem um limite de 20 imagens.

4.Incluir o código no seu blog (blogger)

Acesse a guia Modelo do seu blog, procure pela linha ]]></b:skin> e ANTES dela inclua o código o código CSS que consta no 3º passo.

Já na guia Layout, adicione o gadget HTML/JAVSCRIPT e cole o código editado da guia HTML do 3º passo.

Feito isso, basta salvar as alterações.

Olá!

Cada vez mais recebo e-mails de blogueiros pedindo ajuda com código do blog, então depois de meses sem atualizar os tutoriais, o Seja Criativo irá voltar! \o/

Mas para que eu possa preparar tutoriais úteis para vocês, preciso de uma ajudinha: respondam ao formulário abaixo com o máximo de informações possível. São poucas perguntas e rápido de responder, então sem preguiça, ok? :P

O tutorial de hoje foi escolhido por leitores do Seja Criativo. Há algum tempo liberei o link de um formulário pedindo dicas de tutoriais que deveriam ser postados aqui. Recebi vários pedidos e todos serão divulgados em breve. Então vamos lá!

A ideia hoje é explicar como você pode personalizar os marcadores do seu blog com imagens e apesar de ser um tutorial simples, requer um tiquinho de atenção.

Como exemplo você pode conferir o Dezoito Primaveras.

Primeiro passo: Adicionar o CSS

Acesse o menu Modelo>Editar HTML e localize a linha ]]></b:skin>, acima dela adicione o código:
.icone-marcadores { position:absolute; left:-50px; top:5px; display:block; } .icone-marcadores img { width:35px; // largura da imagem height:35px; // altura da imagem }

Segundo passo: Adicionar o HTML

Procure pela linha <div class='post-footer-line post-footer-line-1'> e adicione abaixo o seguinte código:
<b:loop values="data:post.labels" var="label"> <a expr:href="data:label.url" href="https://www.blogger.com/null" rel="tag"> <script type="text/javascript">lebel_logo("<data:label.name/>");</script> </a> </b:loop>

Terceiro passo: Adicionar o Javascript

Acesse o menu Modelo>Editar HTML e localize a linha </head>, feito isso inclua o código abaixo acima dela.
<script type='text/javascript'> function lebel_logo(etiqueta) { imagenes = new Array(); imagenes[1] = "<img src='LINK-DA-SUA-IMAGEM-1' title='IMAGEM 1'/>" imagenes[2] = "<img src='LINK-DA-SUA-IMAGEM-2' title='IMAGEM 2'/>" imagenes[3] = "<img src='LINK-DA-SUA-IMAGEM-3' title='IMAGEM 3'/>" imagenes[4] = "<img src='LINK-DA-SUA-IMAGEM-4' title='IMAGEM 4'/>" imagenes[5] = "<img src='LINK-DA-SUA-IMAGEM-5' title='IMAGEM 5'/>" if (etiqueta == "IMAGEM 1") {document.write(imagenes[1]);} if (etiqueta == "IMAGEM 2") {document.write(imagenes[2]);} if (etiqueta == "IMAGEM 3") {document.write(imagenes[3]);} if (etiqueta == "IMAGEM 4") {document.write(imagenes[4]);} if (etiqueta == "IMAGEM 5") {document.write(imagenes[5]);} } </script>

Entenda o que você está adicionando ao seu código


O código que você adicionou no seu blog pode ser melhor visualizado na imagem acima. Para que você entenda, fiz algumas marcações importantes.

Obs. 1. As cores identificam quais linhas do código estão relacionadas.
Obs. 2. Se você quiser adicionar outro marcador você deve:

1. Adicionar a linha abaixo antes da primeira linha com conteúdo"if (etiqueta...":
imagenes[X] = "<img src='LINK-DA-SUA-IMAGEM-1' title='IMAGEM X'/>"

2. Adicionar antes das linhas 14 e 15 o seguinte código:
if (etiqueta == "IMAGEM X")  {document.write(imagenes[X]);}

Lembrando que o "X" é o número que deve ser utilizando nos dois códigos. Agora é só salvar e visualizar o resultado! Qualquer dúvida é só deixar o comentário na postagem ou acessar a página de contato do blog.

Um dos efeitos que eu mais gosto de usar na postagem é o jQuery Toggle. Ele permite que você "esconda" determinadas parte da sua postagem ou até mesmo conteúdos da sidebar com um código bem simples e rápido de implementar.

Apesar do nome diferente, é um efeito bastante conhecido. Um exemplo de blog que utiliza é o Madly Luv, a Aninha usa em vários tipos de postagens para deixar escondido um conteúdo mais extenso e detalhes sobre algum assunto.

Veja o exemplo:

IMPORTANTE!

Antes de começar você precisa adicionar no seu código a biblioteca jQuery versão 1.8, que esta sendo carregada direto da API do Google. Se você já tem adicionado no seu blog pode pular esta parte.

Vá até o menu Modelo>Editar HTML, adicione o código antes da linha </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Primeiro passo: Adicionar o Javascript

Para adicionar o script que irá executar a função de esconder e revelar o conteúdo, vá até o menu Modelo>Editar HTML e localize a linha: </head>. Logo acima adicione o seguinte código:

<!-- Script JQuery Toggle --> <script type='text/javascript'> $(document).ready(function() { $(".mostrar").hide(); $(".ocultar").click(function() { $(this).next(".mostrar").slideToggle(600); }); }); </script> <!-- Fim Script JQuery Toggle -->

Segundo passo: Adicionar o CSS

Para adicionar o CSS, vá até o menu Modelo>Editar HTML e localize a linha: ]]></b:skin>. Logo acima adicione o seguinte código:

.ocultar { cursor:pointer; font-weight:bold; font-size:14px; /* edite tamanho da fonte */ color:#3D81EE; /* edite cor do link */ padding:10px; margin:0 auto; } .mostrar { padding: 10px; }

Terceiro passo: Adicionar o HTML

Esta parte deve ser adicionada no local onde você quer utilizar, por exemplo: se for dentro da sua postagem, para adicionar o código, você deve criar a postagem e habilitar a opção: "HTML". Em seguida, localize a posição do post onde deseja utilizar e insira o código abaixo:

<div class='ocultar'> >> Mostar / Ocultar conteúdo << </div> <div class='mostrar'> Insira aqui o conteúdo que deve ficar escondido. </div>

Obs.: Se você quiser adicionar o efeito na sidebar, basta ir em Layout>Adicionar Gadget>HTML/Javascript e adicionar o código do terceiro passo. Vale lembrar que o primeiro e segundo passo você deve seguir normalmente, mesmo que você inclua o efeito na sidebar.

Fácil, não é? Separei alguns link úteis para quem quiser entender mais sobre este script.

• Efeito Revelar/Esconder Conteúdo do Post
• Efeito jQuery Toggle para revelar e esconder
• Botão Exibir/Esconder Div com jQuery
• Efeito Toggle com CSS e jQuery
• Mostrar e esconder div com efeito Toggle jQuery

Um dos últimos comentários que recebi aqui no Seja Criativo, veio com várias dicas de tutoriais simples e importantes. Então vou aproveitar esta semana para postar alguns deles.

O primeiro tutorial que eu escolhi foi o da caixa busca personalizada. É um código simples, mas que sempre traz aquela ideia do copia e cola que a grande maioria dos blogueiros estão acostumados. Muitos tutoriais não explicam o código e acaba que você utiliza sem nem saber o que está copiando. Então vou além da explicação, vou deixar no finalzinho do post alguns link bacanas para quem quer ideias para personalizar a caixa de busca.

Vamos lá!

Obs.: Lembrando que todos os tutoriais disponibilizados aqui utilizam o Template Minima, para baixar basta acessar o link (download).

Obs. 2: Façam o backup do Template antes para evitar problemas futuros.

Primeiro passo: Entendo a estrutura

Antes de pensar na aparência da caixa de busca, é importante conhecer o código que você está utilizando. A estrutura é basicamente esta:

Segundo passo: O HTML

<div id='busca'> <form action="/search" class="search" method="get"> <input id="txtbusca" name="q" type="text" value="" placeholder="Digite o que você procura" /> <input id="btnBusca" type="submit" value="Ok"/> </form> </div>

Terceiro passo: O CSS

<style type="text/css"> #busca { margin:0 auto; padding:0; } #txtbusca { border:0px solid #222; background:#EEE; width:260px; height:23px; margin:0 auto; padding:5px 0 5px 5px; float:left; // posição do campo line-height:36px; // altura da linha } #btnBusca { background:#00cccc; position:relative; border:0px solid #222; color:#FFF; margin:0 auto; padding:10px; border:0 none; font-size:11px; font-weight:bold; text-transform:uppercase; } #btnBusca:hover { background:#99cccc; }<style>
E o resultado final:

Obs. 3: Lembrando que o CSS você pode usar e abusar da sua criatividade! :)

Quarto passo: Adicionando ao seu blog

1. Antes de mais nada, faça login em sua conta e acesse o painel do blogger;
2. Clique no menu "Layout" > "Adicionar um Gadget";
3. Adicione o gadget "HTML/JavaScript";
4. Cole as duas partes do código informado acima;
5. Salve e organize o gadget onde desejar.

Prontinho! Código simples e fácil de editar. Vou deixar aqui embaixo, alguns links para quem quiser se aventurar um pouquinho mais. Beijos!

Desenvolvendo layouts para caixas de pesquisa em páginas Web.
Criar caixa de pesquisa para blog.
Caixa de pesquisa para blog.

Olá, olá!

Depois de tantos pedidos, aqui estamos mais uma vez. Faz um bom tempo que estou prometendo disponibilizar outro Template Free para vocês, mas acabou que eu me enrolei com vários outros trabalhos e deixei o Template de lado. Desta vez resolvi criar um layout simples, clean e o mais próximo de ser responsivo que eu consegui fazer, rs.

Se vocês tiverem qualquer problema com a instalação, por favor entre em contato através da página de contatos do blog ou mande um e-mail para contato@dezoitoprimaveras.com.br.