Colocar um botão de compartilhamento nas redes sociais no post é extremamente útil para a divulgação do seu blog, e é isso que vou ensinar neste tutorial!
Com esse simples tutorial você pode ganhar mais visualizações e isso é uma das coisas que nós mais queremos, não é mesmo?
Antes de fazer os passos desse tutorial eu recomendo que você faça um backup do seu modelo, para prevenir caso algo dê errado.
Como colocar um botão de compartilhamento:
1º- Primeiramente você tem que ir em "Modelo" e logo em seguida em "Editar HTML"2º- Feito isso você vai clicar dentro do código, assim que clicar, aperte as teclas Ctrl + F e aparecerá uma caixa de pesquisa no canto superior direito do código.
3º- Copie isto <div class='post-footer-line post-footer-line-2'> e cole na caixa. Clique em enter. *Provavelmente você encontrará dois códigos iguais, mas neste caso vamos precisar apenas do segundo.
Abaixo deste código que você pesquisou você precisará colar o seguinte código:
<div class='share'>
<p>Compartilhe o post: </p>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><i class='fa fa-twitter'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'><i class='fa fa-facebook'/></a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><i class='fa fa-google-plus'/></a>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url' target='_blank'><i class='fa fa-linkedin'/></a>
<a expr:href='"http://www.tumblr.com/share/link?url="+ data:post.url' target='_blank'><i class='fa fa-tumblr'/></a>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/></a>
<a href='mailto:?'><i class='fa fa-envelope-o'/></a>
</div>
<p>Compartilhe o post: </p>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><i class='fa fa-twitter'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'><i class='fa fa-facebook'/></a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><i class='fa fa-google-plus'/></a>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url' target='_blank'><i class='fa fa-linkedin'/></a>
<a expr:href='"http://www.tumblr.com/share/link?url="+ data:post.url' target='_blank'><i class='fa fa-tumblr'/></a>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/></a>
<a href='mailto:?'><i class='fa fa-envelope-o'/></a>
</div>
4º- Procure por <head> e adicione o seguinte código ABAIXO dele:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Agora é hora de personalizar o seu botão de compartilhamento! 😍
Abra a caixa de pesquisa do mesmo modo que você fez no segundo passo, mas dessa vez você irá pesquisar por: ]]></b:skin>
Escolha o modelo que mais combina com o seu blog e cole ACIMA de ]]></b:skin>
* O penúltimo botão (pinterest) sempre vai está diferente para mostrar como é a hover do botão de compartilhamento, ou seja, como o botão fica quando passa o mouse em cima dele.
MODELO 1:
/* BOTÕES DE COMPARTILHAMENTO - FEITOS POR: ALEXIA EVELLYN | BLOG: https://pronto-postei.blogspot.com */
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}
MODELO 2:
/* BOTÕES DE COMPARTILHAMENTO - FEITOS POR: ALEXIA EVELLYN | BLOG: https://pronto-postei.blogspot.com */
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}
MODELO 3:
/* BOTÕES DE COMPARTILHAMENTO - FEITOS POR: ALEXIA EVELLYN | BLOG: https://pronto-postei.blogspot.com */
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}
.share {
margin-top: -5em;
display: table;
float: left;
margin-left: 10em;
}
.share p {
margin:0px 95px 10px;
font: italic 11px Lato;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.share > a {margin: 0 5px; display: inline-block; vertical-align: top;}
.share a {
text-align: center;
font-size: 13px;
font-weight: 400;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
background: #000;
color: #fff;
transition: 0.5s;
margin: 3px -42px -2px 44px;
}
.share a:hover {
background: #ff1492;
color: #fff;
}
Existem mil e uma maneira de personalizar esses botões de compartilhamento, trouxe três botões básicos, mas se vocês quiserem mais opções é só pedir! 😉
Espero que vocês tenham gostado deste post! Comentem abaixo o que acharam e deem sugestões de para os próximos tutoriais 😊
Amei o poste, obrigada por fazer <3 só que eu não conseguir colocar no meu blog ficam só bolinhas pretas, como eu ainda não tenho fiz neste de teste e em outro, testegaleri.blogspot.com.br
ResponderExcluirDe nada linda, quando tiver mais sugestões é só pedir :)
ExcluirVocê provavelmente não tem a font awesome no blog, vou editar o post para que não tenha erro. bjs
Oiii Que blog lindo!!
ResponderExcluirAmei :)
Mil beijos!
alecsandratamila.blogspot.com
Muito obrigada! Obrigada também pela sua visita, volte mais vezes :)
ExcluirBeijos
Oiii Aleh! Faz um tuto mostrando como personalizar botão de compartilhar igual ao seu!!! Muita gente vai amar <3 inclusive eu! :* bjos amei seu blog!! Sucesso!
ResponderExcluirNa linha que tá escrito ".share a " você tira a cor do background e em "color" você coloca a cor que quiser nos icones ai vai ficar igual o meu, não tem segredo! Se você quiser que fique exatamente igual ao meu (com esse efeito hover) ai eu posso fazer um tutorial :) Muito obrigada pelo seu comentário <3
ExcluirServiu muito bem!
ResponderExcluirFico feliz! Obrigada pelo comentário e pela visita <3
ExcluirMuito obrigada!!!! Procurei em tudo quanto era lugar rsrs. Aqui foi simples as instuçoes e ficou lindo!!! Há tempos estava procurando esses botões que fazem falta demais no blog!
ResponderExcluirMUITO OBRIGADA!!!!
www.ingrid-flor.blospot.com
Olá! Coloquei tudo no blog, mas não teve nenhuma diferença. Não mudou nada, não funcionou.
ResponderExcluirso faltou a opcao de whatsapp ne... atualize por favor.
ResponderExcluirComo posso colocar a opção de Linkedin?
ResponderExcluirnao funcionou no meu
ResponderExcluirO que aconteceu? Se quiser, me envia um e-mail para que eu possa te ajudar!
Excluirnão funcionou :(
ResponderExcluir