1 de setembro de 2017

Adicionar Widget Compartilhar Posts com Contador no Blogger

Um widget para compartilhar posts é muito importante em um Blogger, além de aumentar o tráfego do seu site, melhora o posicionamento do mesmo.



Neste tutorial vou ensinar como colocar um widget moderno e funcional em seus posts do blogger. É o mesmo da imagem acima.

Para adicionar, vamos usar um plugin chamado donReach Social Tools, esse plugin é fácil de usar, personalizar, responsivo e o melhor: GRATUITO! Além de ter um design agradável fazendo com que os visitantes compartilhem mais seus posts.

Como adicionar Widget Compartilhar com Contador no Blogger

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.
  1. Acesse o Painel do Blogger
  2. Vá até Tema do blog desejado e clique em Editar HTML, clique sobre o editor e tecle CTRL+F e procure por ]]></b:skin> logo acima cole:
  3. 
    /* CodigosBlogger Widget Compartilhar */
    .don-share .don-share-total .don-count {
    font-size: 40px !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #86898d !important;
    border-right: 1px solid #eee !important;
    padding-right: 18px !important;
    margin-right: 20px !important;
    margin-bottom: 0 !important;
    padding-top: 15px !important;
    }
    .don-share .don-share-total .don-count:after {
    line-height: 30px !important;
    color: #a6a6a6 !important;
    font-weight: 300 !important;
    font-size: 12px !important;
    text-transform: capitalize !important;
    content: "Compartilhe!" !important;
    }
    .don-btn {
    background-image: none !important;
    box-shadow: none !important;
    }
    .don-share i {
    font-size: 16px !important;
    }
    .don-share .don-share-total:after {
    display: none !important;
    }
    .don-share .don-share-total {
    margin: 0 !important;
    }
    .don-share {
    padding: 10px 0 0 20px!important;
    } 
    [class*=' don-share-'], [class^=don-share-]{
        margin-top: 15px !important;
    }
    
    
  4. Agora procure por <data:post.body/> (normalmente é no segundo trecho encontrado) e logo acima cole:
  5. 
    <b:if cond='data:blog.pageType == "item"'>
    <div class='don-share' data-limit='3'>
      <div class='don-share-total'/>
      <div class='don-share-facebook'/>
      <div class='don-share-twitter'/>
      <div class='don-share-pinterest'/>
    </div>
    </b:if>
    
  6. Procure por </body> e logo acima cole:
  7. 
    &lt;script type=&#39;text/javascript&#39;&gt;
    (function() {
    var dr = document.createElement(&#39;script&#39;);
    dr.type = &#39;text/javascript&#39;; dr.async = true;
    dr.src = &#39;http://codigosblogger-com.umbler.net/js/shareCodigosBlogger.js&#39;;
    (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dr);
    })();
    &lt;/script&gt;
    
  8. Salve o Modelo
Pronto, agora seus posts tem um compartilhador totalmente moderno e com contador.

Dúvidas? deixe seu comentário abaixo
5 estrelas - baseado em 759 votos

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.


Abrir lista de emoticonFechar lista de emoticon