Olá, e seja muito bem vindo a mais uma parte de nossa série de dicas para blogueiros iniciantes e profissionais, hoje nós vamos falar dos famosos botões de compartilhamento. E antes que você pergunte, sim, o Blogger normalmente já vem com esses botões, o problema é que eles são muito apagados e pequenos, então vamos te ensinar a colocar botões novos, com mais opções, e de graça, basta você seguir o tutorial a seguir passo-a-passo e tudo vai dar certo.
Antes de mais nada...
Antes de mais nada é bom você saber algumas coisas, primeiro de tudo, se você prestar atenção verá que partes do código falam sobre o Google+, a extinta rede social do Google, como ela não existe mais nós retiramos o botão dela do código principal. Também é bom saber que só porque você colocou esses botões seu site não vai ficar mais popular, o número de compartilhamentos provavelmente não vai crescer só porque você colocou botões novos iguais outros sites prometem, e por último, sim, os códigos são grandes pra caramba, mas se você quiser botões iguais aos nossos vai ter de usar eles. Ok? Agora que você tem tudo isso em mente vamos aos códigos.
Botões de compartilhamento para Blogger
Se vocês não mudarem nada no código seus botões irão ficar igual aos nossos. Para começar vá até seu painel no Blogger e clique em "Tema", agora clique em "Editar HTML". No meio desses códigos encontre </head> , e acima desse código você vai colar o seguinte:
<style type='text/css'>
/*<![CDATA[*/
.share_responsive{position:relative;width:100% !important; height:40px;margin:30px 0!important;padding:0}
.share-btn,.share-btn li,.share_responsive h4{margin:0;padding:0}
.share_responsive h4{height:40px;width:13%;position:absolute;top:0;left:0;z-index:2}
.share-btn{height:40px;padding:0;margin:0!important;width:100%;}
.share-btn:after{clear:both}
.share-btn:after,.share-btn:before{content:' ';display:table}
.share-btn li{box-sizing:border-box;width:12.5%;height:100%;line-height:40px;padding:0!important;margin:0!important;list-style-type:none!important;transition:all .3s ease-in-out;float:left;border:0!important}
.share-btn li.btn-line a,.share-btn li.btn-line a:hover{background-color:#00C300}
.share-btn li.btn-facebook a{background-color:#306199}
.share-btn li.btn-facebook a:hover{background-color:#244872}
.share-btn li.btn-tumblr a{background-color:#32506d}
.share-btn li.btn-tumblr a:hover{background-color:#22364a}
.share-btn li.btn-linkedin a{background-color:#007bb6}
.share-btn li.btn-linkedin a:hover{background-color:#005983}
.share-btn li.btn-twitter a{background-color:#26c4f1}
.share-btn li.btn-twitter a:hover{background-color:#0eaad6}
.share-btn li.btn-pinterest a{background-color:#b81621}
.share-btn li.btn-pinterest a:hover{background-color:#8a1119}
.share-btn li.btn-whatsapp a{background-color:#43d854}
.share-btn li.btn-whatsapp a:hover{background-color:#28c039}
.share-btn li.btn-bbm a,.share-btn li.btn-bbm a:hover{background-color:#000}
.share-btn li a,.share_responsive .show-share .show-more{background-color:#ccc;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;height:40px;padding:0;position:relative;text-align:center;text-decoration:none;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;}
.share_responsive .show-share .show-more{line-height:40px;width:100%;float:left;margin:0;top:0;left:0;cursor:pointer;background-color:#2196f3;position:absolute;top:0;left:0;z-index:2}
.share_responsive .show-share .share-text{font-size:16px;width:0%;height:40px;line-height:40px;overflow:hidden;background:#efefef;position:absolute;top:0;right:0;left:10%;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: width 2s;transition: width 2s;z-index:1}
.share_responsive .show-share:hover{width:100%;}
.share_responsive .show-share:hover .show-more{width:10%;}
.share_responsive .show-share:hover .share-text{width:90%;padding:0 10px;}
.share-btn li a .btn-icon{display:block;cursor:pointer}
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:24px;width:24px;vertical-align:middle}
.share-btn li.btn-googleplus a .btn-icon svg{height:30px;width:30px}
.share-btn li.btn-line a .btn-icon svg{height:44px;width:44px}
.share-btn li.btn-bbm a .btn-icon svg{height:34px;width:34px}
.share-btn li.btn-bbm a,.share-btn li.btn-line a{padding:0}
.share-btn li.btn-bbm a .btn-icon,.share-btn li.btn-line a .btn-icon{padding-top:0}
.share-btn li a .btn-icon svg circle,.share-btn li a .btn-icon svg path,.share_responsive .show-share svg path{fill:#fff}
.share-btn li a .btn-text{color:#fff}
.share-btn li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
@media screen and (max-width:414px){
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:18px;width:18px;vertical-align:middle}
.share-btn li.btn-googleplus a .btn-icon svg{height:24px;width:24px}
.share-btn li.btn-line a .btn-icon svg{height:38px;width:38px}
.share-btn li.btn-bbm a .btn-icon svg{height:28px;width:28px}
}
@media screen and (max-width:375px){
.share-btn li a .btn-icon svg,.share_responsive .show-share svg{height:14px;width:14px;vertical-align:middle}
.share-btn li.btn-googleplus a .btn-icon svg{height:20px;width:20px}
.share-btn li.btn-line a .btn-icon svg{height:30px;width:30px}
.share-btn li.btn-bbm a .btn-icon svg{height:22px;width:22px}
.share_responsive,.share_responsive h4,.share-btn,.share-btn li a,.share_responsive .show-share .show-more,.share_responsive .show-share .show-more,.share_responsive .show-share .share-text{height:30px;}
.share-btn li,.share_responsive .show-share .show-more,.share_responsive .show-share .share-text{line-height:30px;}
.share_responsive .show-share .share-text{font-size:12px;}
}
/*]]>*/
</style>
Agora você vai encontrar o código <b:includable id='shareButtons' var='post'> no seu código HTML, e abaixo dele você vai colar isso aqui:
<b:includable id='share-btn-responsive' var='post'>
<div class='share_responsive'>
<h4 class='show-share'>
<div class='show-more'>
<svg viewBox='0 0 24 24'>
<path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z' fill='#000000'/>
</svg>
</div>
<div class='share-text'>Compartilhe essa matéria!</div>
</h4>
<ul class='share-btn'>
<li class='btn-blank'/>
<li class='btn-facebook'>
<a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' target='_blank' title='Compartilhe no Facebook'>
<span class='btn-icon'>
<svg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'><path d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z'/></svg>
</span>
</a>
</li>
<li class='btn-twitter'>
<a expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' target='_blank' title='Compartilhe no Twitter'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z'/></svg>
</span>
</a>
</li>
<li class='btn-tumblr'>
<a expr:href='"http://tumblr.com/share/link?url=" + data:post.url + "&name=" + data:post.title + "&description=" + data:post.snippet' target='_blank' title='Compartilhe no Tumblr'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M18.02 21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 1.863-.03 3.934-.795 4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z'/></svg>
</span>
</a>
</li>
<li class='btn-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' target='_blank' title='Compartilhe no Linkedin'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/></svg>
</span>
</a>
</li>
<li class='btn-pinterest'>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' target='_blank' title='Compartilhe no Pinterest'>
<span class='btn-icon'>
<svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/></svg>
</span>
</a>
</li>
<li class='btn-whatsapp'>
<a data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%3A%20" + data:post.url' target='_blank' title='Compartilhe no Whatsapp'>
<span class='btn-icon'>
<svg height='90' viewBox='0 0 90 90' width='90' xmlns='http://www.w3.org/2000/svg'><path d='M90 43.84c0 24.214-19.78 43.842-44.182 43.842a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.63 21.415 0 45.818 0 70.223 0 90 19.628 90 43.84zM45.818 6.983c-20.484 0-37.146 16.535-37.146 36.86 0 8.064 2.63 15.533 7.076 21.61l-4.64 13.688 14.274-4.537A37.122 37.122 0 0 0 45.82 80.7c20.48 0 37.145-16.533 37.145-36.857S66.3 6.983 45.818 6.983zm22.31 46.956c-.272-.447-.993-.717-2.075-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.36-1.717-.54-2.438.536-.72 1.076-2.797 3.495-3.43 4.212-.632.72-1.263.81-2.347.27-1.082-.536-4.57-1.672-8.708-5.332-3.22-2.848-5.393-6.364-6.025-7.44-.63-1.076-.066-1.657.475-2.192.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.718.182-1.345-.09-1.884-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.793-2.436-1.793-.63 0-1.353-.09-2.075-.09-.722 0-1.896.27-2.89 1.344-.99 1.077-3.788 3.677-3.788 8.964 0 5.288 3.88 10.397 4.422 11.113.54.716 7.49 11.92 18.5 16.223 11.01 4.3 11.01 2.866 12.996 2.686 1.984-.18 6.406-2.6 7.312-5.107.9-2.513.9-4.664.63-5.112z'/></svg>
</span>
</a>
</li>
</ul>
</div>
</b:includable>
Agora seu código está pronto, mas falta ativar ele, mas essa é a parte mais fácil de todas. Para ativar os botões basta ir em <div class='post-footer-line post-footer-line-1'> , a segunda instância do código, não a primeira ok? Agora bem abaixo disso cole:
<b:include data='post' name='share-btn-responsive'/>
E pronto! Seus botões estão prontos para serem usados, foi fácil não foi? Como sempre se algo der errado pode deixar um comentário aqui embaixo, mas nós nunca tivemos reclamações com nossos tutoriais antes.
Se você quiser venha curtir nosso facebook, lá temos nossas melhores matérias que você pode acessar de maneira direta.
Nenhum comentário:
Postar um comentário