Box seguidores do Twitter e assinantes de Feeds

Umas das coisas mais importantes para fidelizar seus leitores e manter contato com eles é divulgar as formas desse contato. As mais eficientes são via redes-sociais, como o Twitter e disponibilizando seu conteúdo para atualizações via Feed. Incentive seu público a seguir você e seu blog para nunca perder contato com eles e atrair mais visitas para seu blog. Veja esse modelo de contador de seguidores e assinantes. Serve tanto no Blogger (blogspot), quanto no WordPress.org.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Já ensinamos um modelo bem completo que conta também com o número de posts e de comentários do Blog. Veja aqui:

Menu com ícones e contadores de artigos, feed, Twitter e comentários para Blogger

O que vou mostrar é mais objetivo e serve para dar mais destaque à sua conta do Twitter e atrair mais assinantes de seu Feed. Funciona tanto no Blogger (Blogspot) e também no WordPress.org, sem grandes modificações. O resultado esperado é como na imagem:

Adicionando o código CSS

Se você usa o Blogger = Abra o painel do Blogger, clique no menu "Layout" ~> "Editar HTML" e procure pela linha "]]></b:skin>". ACIMA disso cole a sequência de códigos abaixo.

Caso você use o WordPress = Acesse seu painel, clique no menu "Aparência" ~> "Editor" e procure pelo "Folha de estilos (style.css)" e role até a última linha para colar o seguinte código CSS.

 .box { background:url('img/bg-divider-box.gif') no-repeat center bottom; overflow:hidden; margin:1em 0; padding:2em 1.5em 3em; } 
.twitter-box a { background:url('https://ferramentasblog.com.br/imagens/bg-twitter.jpg') no-repeat left top; display:block; height:49px; letter-spacing: -0.04em; padding:13px 0 0 70px; width:205px;  } 
.twitter-box strong .rss-box strong { display:block; font-size:13px; } 
.rss-box { margin:0 0 1.5em 0; } 
.rss-box a { background:url('https://ferramentasblog.com.br/imagens/bg-rss.jpg') no-repeat left top; display:block; height:49px; letter-spacing: -0.03em; padding:13px 0 0 70px; width:205px; }

Não modifique nada aí e salve o modelo.

Adicionando o Gadget na Barra lateral

Agora vamos adicionar o gadget (elemento de página) na sidebar (barra lateral) de seu blog.

Se usa o Blogger = Vá em "Layout" ~> "Elementos da página" e adicione um gadget do tipo "HTML/Javascript" normalmente e dentro dele cole o seguinte código.

Caso use o WordPress = Abra o menu "Aparência", clique em "Widgets" e arraste um do tipo "Texto". Dentro disso cole o código.

 <div id="social" class="box">    
     <div class="twitter-box"> 
        <a href="URL_do_SEU_TWITTER"><strong>Siga no Twitter »</strong><br /><script type='text/javascript' src='https://ferramentasblog.com.br/twitter/twitter-php.php?usuario=NOME_TWITTER'></script> seguidores</a> 
    </div><!-- /twitter-box --> 
    <div class="rss-box"> 
        <a href="URL_do_SEU FEED"><strong>Assine o FEED »</strong><br /><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_do_FEED'></script> leitores</a> 
    </div><!-- /rss-box --> 
 </div><!-- /box -->

Agora faça as adaptações para exibir os seus dados, exatamente onde está indicado de vermelho apenas. Não mude mais nada além disso. Salve e veja o resultado em seu blog.

Outros Gadget para seu blog:

Fonte: Vi esse modelo no wwWhat’s New. Adaptei a partir do código-fonte deles.

16 Comentários

Xará primeiramente parabéns pelo Ferramentas Blog, conteúdo de primeira, segundo tenho visitado quase que diariamente seu blog atrás de novidades para implementar em meu blog, estou testanto este box que vc nos trás hoje, só que meu fundo do blog não é branco, verifiquei no código e não encontrei nenhuma possibilidade de mudar a cor do fundo, e a quantidade de seguidores não está aparecendo, poderias ajudar??? abraços

16 Comentários

Deixe um comentário Cancelar resposta