19 de setembro de 2016

Como configurar um domínio personalizado no Blogger

Opa! Neste post irei ensinar você á configurar seu domínio personalizado, ou seja, .com .com.br .net.. enfim, hoje existe diversas extensões no mercado.


Bom não vou ficar enrolando muito aqui, vamos logo aprender como configurar o seu domínio AGORA no blogger!

Configurando seu domínio personalizado no Blogger

Let's go..
  1. Acesse o Painel do Blogger
  2. Vá até Configurações do seu blog desejado e na aba Básico você vai visualizar a sessão Publicação.
  3. Clique em Configurar um URL de terceiros para seu blog e insira o seu domínio com o www. antes.
  4. Após introduzir o seu endereço de domínio, clique em Salvar. Neste momento o sistema vai te retornar uma mensagem mostrando as configurações para você fazer no seu provedor.
  5. O risco em preto na imagem acima é um chave de CNAME que o blogger gera para cada blog, então não compartilhe ele com ninguém, apenas configure no seu provedor (onde comprou seu domínio). o risco tem o intuito de apenas te alertar de  não compartilhar a chave
Os primeiros passos foram dados! Agora vamos continuar, para isso, anote os dados que o blogger gerou como mostrado acima, de preferência deixe a janela aberta (para copiar as informações) e abra uma nova aba e acesse o provedor onde você comprou o domínio.

Aqui neste exemplo eu usarei o Registro.br como exemplo de configuração, se o seu for outro não se preocupe pois não vai mudar muita coisa a configuração. Mas se ainda sim você não conseguir por ser diferente, deixe um comentário que eu te ajudo, combinado?

Configurando o domínio na Registro.br

Vamos lá..
  1. Acesse sua conta na Registro.br
  2. Na tela seguinte, clique sobre o seu domínio
  3. Em seguida role a página até a sessão DNS e clique em Editar Zona depois Modo Avançado
  4. Agora você vai criar as entradas CNAME, para isso clique em Nova Entrada e selecione a opção CNAME.
  5. Configure como na imagem acima e Salve.
Pronto seu domínio já está configurado! Agora você precisa esperar algumas horas e depois retorne no Blogger e repita os primeiros passos desse tutorial, porém na hora de salvar a mensagem de configuração vai ocultar e o blogger vai aceitar o seu domínio :).


É isso, qualquer dúvida deixe nos comentários abaixo que terei o prazer em lhe responder.
5 estrelas - baseado em 59 votos

3 de setembro de 2016

Como adicionar um Sitemap no Google Webmasters Tools

Hoje em dia não basta ter um site bonito e não ter um bom SEO (Search Engine Optimization), o problema é que muita gente quer que simplesmente o site apareça nos mecanismos de busca como uma ‘mágica’. Sabemos que o processo é demorado, por isso apresentamos hoje a ferramenta da Google Webmasters, e com ela vamos indexar as páginas do site utilizando o Sitemap.
Por isso é importante que você tenha o Sitemap em mãos, caso não tenha recomendamos que leia esse artigo:

Vamos ao que interessa, o primeiro passo para adicionar o Sitemap é fazer login na ferramenta, acesse: https://www.google.com/webmasters/ e Clique em Fazer Login no Search Console como na imagem abaixo:
Clique em Fazer Login no Search Console
Passo Nº01
Feito isso abrirá a página do Webmasters, e no canto superior direito você vai encontrar um botão em vermelho escrito ADICIONAR UMA PROPRIEDADE clicando sobre ela abrirá um box e nele você digita a url do seu site e clica em continuar, como na imagem abaixo:
Passo Nº02
Em seguida ele vai pedir para verificar a propriedade, clique na aba “Métodos Alternativos” e selecione “Tag HTML” em seguida copie o código de verificação e cole logo após <head> ficando assim:
Se você utiliza o WordPress você vai encontrar a tag <head> no header.php
Feito isso clique em VERIFICAR
Se tudo ocorrer bem aparecerá a seguinte mensagem: 
Caso não apareça essa mensagem refaça o procedimento desde o começo.
Clique em Continuar. Pronto seu site já está verificado e agora podemos inserir o Sitemap.
Com a tela do Webmasters Tools aberta clique na aba Rastreamento > Sitemaps, feito isso aparecerá no canto superior direito um botão em vermelho assim ADICIONAR/TESTAR SITEMAP clique sobre ele e abrirá um box perguntando sua Sitemap.
Antes de enviar a Sitemap, vamos testar para ver se está funcionando corretamente, adicione o link do seu Sitemap e clique em “Sitemap de teste
Lembrando que post-sitemap.xml é o Sitemap da Ajuda em Códigos, cada site tem o seu Sitemap, por isso é importante que você tenha o seu em mãos.
Depois de clicar em Sitemap de teste a ferramenta vai analisar e exibir um botão em azul escrito Ver resultados do teste, clique sobre ele e se a tela aparecer como na imagem abaixo o seu sitemap está correto.
Agora que testamos nosso Sitemap podemos enviar ele, para isso repita o passo anterior e clique em Enviar Sitemap ao invés de Sitemap de teste.
E pronto seu Sitemap foi adicionado com sucesso, agora é só aguardar, em média o Google demora 72 horas para indexar todas as páginas enviadas.
5 estrelas - baseado em 759 votos

Saiba o que é Sitemap e a importância dele para seu blog


O que é um Sitemap?

Um Sitemap é um arquivo em que é possível listar as páginas de seu site para informar o Google e os outros mecanismos de pesquisa sobre a organização do conteúdo do site. Rastreadores da Web de mecanismos de pesquisa, como o Googlebot, leem esse arquivo para rastrear seu site de forma mais inteligente.

A situação ideal é que as páginas do site estejam devidamente vinculadas, para que nossos rastreadores da Web detectem a maior parte de seu site. Mesmo assim, um Sitemap é uma ferramenta útil que pode melhorar o rastreamento do site, especialmente quando ele atende a um dos seguintes critérios:
  • O site é bastante grande. Como resultado, é mais provável que os rastreadores da Web do Google ignorem o rastreamento de algumas páginas novas ou atualizadas recentemente.
  • Seu site tem um grande arquivo de páginas de conteúdo que estão isoladas ou não estão bem vinculadas entre si. Se as páginas do site não fazem referência umas às outras naturalmente, é possível listá-las em um Sitemap para garantir que o Google não ignore algumas das páginas.
  • Seu site é novo e tem poucos links externos. O Googlebot e outros rastreadores percorrem a Web seguindo os links de uma página para outra. Como resultado, se nenhum site estiver vinculado a suas páginas, o Google pode não detectá-las.
  • Seu site usa conteúdo rich media, é exibido no Google Notícias ou usa anotações compatíveis com outros Sitemaps. O Google pode extrair informações adicionais dos Sitemaps para a pesquisa, quando necessário.


Além disso, o Sitemap pode fornecer metadados valiosos associados às páginas que você lista nesse Sitemap: metadados são informações sobre uma página da Web, por exemplo, quando a página foi atualizada, quantas vezes a página é alterada e a importância da página em relação a outros URLs no site.

Veja também: Como adicionar um Sitemap no Google Webmasters Tools

5 estrelas - baseado em 29 votos

24 de agosto de 2016

Gadget de Calendário para Blogger

Apresento à vocês um Gadget bastante simples e funcional com objetivo de marcar o dia, mês e ano aos visitantes do seu blog, ou seja, um calendário!


O calendário em si é o mesmo representado na imagem acima e pode ser utilizado em qualquer tipo de blog ou site. A principal funcionalidade dele é a marcação do dia da semana, muito legal né?

Como adicionar o Gadget

  1. Acesse o Painel do Blogger
  2. Vá até Layout do seu blog desejado e escolha a área em que quer adicionar o gadget e clique em Adicionar um Gadget e escolha o HTML/JavaScript e cole o seguinte código:
  3. <style>
    #calendario{
    width: 100%;
    height: 195px;
    }
    </style>
    <div id="calendario">
    <script language="JavaScript">
    <!-- Begin
    var dia_da_semana = new Array('Dom','Seg','Ter','Qua','Qui','Sex','Sab');
    var mes_do_ano = new Array('Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
    var Calendar = new Date();
    var ano = Calendar.getFullYear();      
    var mes = Calendar.getMonth();    
    var hoje = Calendar.getDate();    
    var dia = Calendar.getDay();  
    var DIA_DA_SEMANA = 7;    
    var DIA_DO_MES = 31;    
    var imprimir;    
    Calendar.setDate(1);    
    Calendar.setMonth(mes);    
    var TR_start = '<TR>';
    var TR_end = '</TR>';
    var highlight_start = '<TD WIDTH="29"><TABLE CELLSPACING=0 BGCOLOR=E0F8F7><TR><TD WIDTH=29><B><CENTER>';
    var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
    var TD_start = '<TD WIDTH="25"><CENTER>';
    var TD_end = '</CENTER></TD>';
    imprimir =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=1ba0e1><TR><TD>';
    imprimir += '<TABLE BORDER=1 BORDERCOLOR=eeeeee CELLSPACING=0 CELLPADDING=2>' + TR_start;
    imprimir += '<TD COLSPAN="' + DIA_DA_SEMANA + '" BGCOLOR="#f2a41d"><CENTER><B>';
    imprimir += mes_do_ano[mes].fontcolor("White")  + ' <font color="White">  ' + ano + '</font></B>' + TD_end + TR_end;
    imprimir += TR_start;
    for(index=0; index < DIA_DA_SEMANA; index++)
    {
    if(dia == index)
    imprimir += TD_start + '<B>' + dia_da_semana[index] + '</B>' + TD_end;
    else
    imprimir += TD_start + dia_da_semana[index] + TD_end;
    }
    imprimir += TD_end + TR_end;
    imprimir += TR_start;
    for(index=0; index < Calendar.getDay(); index++)
    imprimir += TD_start + '  ' + TD_end;
    for(index=0; index < DIA_DO_MES; index++)
    {
    if( Calendar.getDate() > index )
    {
      week_day =Calendar.getDay();
      if(week_day == 0)
      imprimir += TR_start;
      if(week_day != DIA_DA_SEMANA)
      {
      var day  = Calendar.getDate();
      if( hoje==Calendar.getDate() )
      imprimir += highlight_start + day + highlight_end + TD_end;
      else
      imprimir += TD_start + day + TD_end;
      }
      if(week_day == DIA_DA_SEMANA)
      imprimir += TR_end;
      }
      Calendar.setDate(Calendar.getDate()+1);
    }
    imprimir += '</TD></TR></TABLE></TABLE>';
    
    document.write(imprimir);
    </script></div>
    
  4. Clique em Salvar e pronto!
Seu calendário já está funcionando, se você quiser personalizar a cor de fundo onde marca o mês e ano, pesquise por #f2a41d no código e troque pelo código da cor desejada.

Dúvidas? deixe um comentário.
5 estrelas - baseado em 759 votos

Inferior flutuante Facebook Like Box Widget para Blogger


Às vezes sentimos a necessidade de se envolver mais com o nosso público no Facebook. Fazer uma fã page crescer não é fácil e nem impossível, porém requer de alguns cuidados por parte de nós, blogueiros.

O primeiro cuidado que você deve ter é colocar uma caixa de curtir no seu blog, isso faz com que o visitante curta sua página sem ele precisar acessar o endereço do facebook em si. Pensando nisso estou trazendo para este post um widget bastante discreto e ao mesmo tempo impressionante, eu digo isso pois estou utilizando ele aqui no blog e os resultados são ótimos!

Como instalar

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Clique sobre o editor e tecle CTRL+F e procure por </b:skin> e logo acima do trecho cole o seguinte código:
  4. #open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
    .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
    .slideUp{
     animation-name: slideUp;
     -webkit-animation-name: slideUp; 
    
     animation-duration: 1s; 
     -webkit-animation-duration: 1s;
    
     animation-timing-function: ease; 
     -webkit-animation-timing-function: ease;
    
     visibility: visible !important;   
    }
    
    @keyframes slideUp {
     0% {
      transform: translateY(100%);
     }
     50%{
      transform: translateY(-8%);
     }
     65%{
      transform: translateY(4%);
     }
     80%{
      transform: translateY(-4%);
     }
     95%{
      transform: translateY(2%);
     }   
     100% {
      transform: translateY(0%);
     } 
    }
    
    @-webkit-keyframes slideUp {
     0% {
      -webkit-transform: translateY(100%);
     }
     50%{
      -webkit-transform: translateY(-8%);
     }
     65%{
      -webkit-transform: translateY(4%);
     }
     80%{
      -webkit-transform: translateY(-4%);
     }
     95%{
      -webkit-transform: translateY(2%);
     }   
     100% {
      -webkit-transform: translateY(0%);
     } 
    }
    
  5. Agora acima de </body> cole o seguinte código:
  6. <div class='slideUp' id='open-fb'>
    <a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Fechar'><i class='fa fa-times'/></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/AJUDAEMCODIGO' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FAJUDAEMCODIGO&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
    </span></div></div>
    <script type='text/javascript'>
    
    function show(target) {
        document.getElementById(target).style.display = &#39;block&#39;;
    }
    
    function hide(target) {
        document.getElementById(target).style.display = &#39;none&#39;;
    }
    </script>
    
No trecho destacado AJUDAEMCODIGO, troque pelo usuário da sua página no Facebook, esse usuário é o nosso aqui do Códigos Blogger.

É isso, espero que tenha curtido esta dica e se ficou alguma dúvida, poste um comentário que eu tento ajudar =)


5 estrelas - baseado em 59 votos

12 de julho de 2016

Pacote de meta tags otimizado 2016 para Blogger


O SEO (Search Engine Optimization) é uma das partes se não a mais importante para um blog de sucesso. Já publicamos aqui algumas dicas para melhorar o SEO do seu blog, onde abordamos diversos fatores que podem ajudar ou atrapalhar o SEO.

Neste artigo abordaremos as meta tags e mostraremos o melhor 'pacote' de metas para blogger. Essa meta tags foi pensada para elevar seu blog nos resultados de buscas.

Recursos da meta tags

  1. SEO completo: Pacote completo para embalar o seu blogger.
  2. Títulos otimizados: Todos os títulos de paginas e posts otimizados.
  3. Comentários otimizados: Robôs ajudam indexar comentários do blog.
  4. Arquivos/Categorias: Índice de sua página de arquivos separadamente.
  5. Etiquetas/Tags: Índice de sua página de etiquetas separadamente.
  6. Verificação de código Google, Binge e Alexa: Verificação de todas as ferramentas para webmaster usando ID.
  7. Facebook e Twitter: Toda estrutura para as principais redes sociais pronta, facilitando o compartilhamento de conteúdo do seu blog.
  8. Robôs indexam seu blog no dia
  9. Google + Nome do autor e imagem de perfil compatível
  10. Facebook fã page compatível

Aplicando no blog

Agora que você já viu todos os recursos que esse pacote vai oferecer para o seu blog, é hora de você aprender a instalar ele no blog. Para isso siga os passos a seguir.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. No editor, tecle CTRL+F5 e procure por <head> e logo abaixo cole o seguinte código
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Página não encontrada - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/GOOGLE+ID/posts' rel='publisher'/>
<link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/>
<link href='https://plus.google.com/GOOGLE+ID' rel='me'/>
<meta content='GOOGLE-WEBMASTER-CODE' name='google-site-verification'/>
<meta content='BING-WEBMASTER-CODE' name='msvalidate.01'/>
<meta content='ALEXA-VERIFY-CODE' name='alexaVerifyID'/>
<meta content='São Paulo, Brasil' name='geo.placename'/>
<meta content='SEU-NOME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Brasil' name='geo.country'/>
<meta content='pt_BR' property='og:locale'/>
<meta content='pt-br' property='og:locale:alternate'/>
<meta name="language" content="portuguese"/>
<meta content='https://www.facebook.com/NOME-DA-PAGINA' property='article:author'/>
<meta content='https://www.facebook.com/NOME-DA-PAGINA' property='article:publisher'/>
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/>
<meta content='@usuario-twitter' name='twitter:site'/>
<meta content='@usuario-twitter' name='twitter:creator'/>
Altere as partes destacadas de acordo com as suas informações. Salve o modelo.

Pronto agora o seu blog está 100% otimizado para mecanismos de busca e compartilhamento em redes sociais.

Dúvidas? deixe um comentário. 


Classificação: 5 Pacote de meta tags otimizado 2016 para Blogger por em . Melhore o posicionamento do seu blog com meta tags atuais e otimizadas para blogger.

6 de julho de 2016

Caixa de captura de e-mails com redes sociais para usar como widget no blogger




Sabemos que a captura de e-mail em um blog é essencial para ter o leitor por perto, no blogger acostumamos usar o FeedBurner para capturar e sempre deixar o leitor por dentro das novidades do nosso blog.

Na hora de pedir o e-mail do visitante é muito importante que o design seja atraente e coerente com a identidade visual do seu blog, passando mais profissionalismo além do blog ficar mais bonito.

Pensando nisso, trouxe um modelo de caixa de capturar e-mails com icones das redes sociais, você pode instalar onde desejar no seu blog, seja nos posts ou sidebar.
  • Como criar uma conta no FeedBurner para meu blog?
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

Introdução

Começando com uma caixa bem elegante indo para o tema mais escuro, lembrando que as caixas são personalizadas através do CSS, então você conseguirá deixar como quiser.

Resultado:

Receba nossas novidades por e-mail


Como instalar

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Procure por </head> e acima dele cole o seguinte trecho:
  4. <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
  5. Agora procure por ]]></b:skin> e acima cole o seguinte código:

  6. #subscribebox{background:#576269;padding:20px;color:#fff;font-size:15px;text-align:center;}/*Responsavel pelo fundo da caixa, troque o background para a cor que desejar*/
    .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
    .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
    .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
    .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
    .follow-subscribe-social ul li:last-child{margin:0}
    .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
    .follow-subscribe-social ul li a:hover{color:#fff}
    form.subscribe{margin-top:-7px}
    form.subscribe input{display:block;width:100%}
    .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff} .subscribe-email:focus{outline:0}
    form.subscribe .placeholder{color:#cacaca}
    form.subscribe input:-ms-input-placeholder{color:#cacaca}
    form.subscribe input::-webkit-input-placeholder{color:#cacaca}
    form.subscribe input:-moz-placeholder{color:#fafafa}
    form.subscribe input::-moz-placeholder{color:#fafafa}
    .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;cursor:pointer;}/*Troque o background para alterar a cor do botão Inscrever-se*/
    .subscribe-button:hover{background-color:#f1d640}
    .subscribe-button:focus{outline:0}
  7. Salve o modelo
  8. Depois vá até Layout, escolha a área que quer exibir a caixa e clique em Adicionar Gadget e escolha HTML/JavaScript e cole:
  9. <div id="subscribebox">
    <div class="follow-subscribe-social">
    <ul>
    <li><a href="#LINK" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-google"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-dribbble"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
    </div>
    <h3>Receba nossas novidades por e-mail</h3>
    <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-DO-FEED' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-DO-FEED, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='USUARIO-DO-FEED'/>
    <input name='loc' type='hidden' value='pt_BR'/>
    <input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Digite seu melhor e-mail&quot;;}' onfocus='if (this.value == &quot;Digite seu melhor e-mail&quot;) {this.value = &quot;&quot;;}' value='Digite seu melhor e-mail'/>
    <input class="subscribe-button" type="submit" value="Quero Receber" />
    </form>
    </div>
Feito isso, altere o #LINK para os respectivos links de cada rede social, você pode excluir a linha da rede social que não for utilizar. Altere também o trecho destacado USUARIO-DO-FEED pelo seu usuário quando você cadastrou seu blog no FeedBurner e salve.

Dúvidas? deixe um comentário.

Classificação: 5Caixa de captura de e-mails com redes sociais para usar como widget no blogger por em . Aprenda a colocar uma caixa de captura de e-mails elegante no blogger.