Botões para Compartilhar Postagens nas Redes Sociais

Coloque botões de compartilhamento no final das postagens de seu blog.

Apresentamos mais uma opção para divulgar os posts de seu blog nas redes sociais. Essa opção é aquela encontrada em muitos sites e blogs em que ficam os ícones das redes sociais no rodapé das postagens para que estas sejam compartilhadas por você e também pelos visitantes de sua página.

O diferencial desses botões de compartilhamento que mostraremos aqui é a qualidade, funcionalidade, imagens perfeitas e um efeito bem especial ao passar o mouse sobre as opções.

Além disso, a importância de poder contar com essa opção é a possibilidade de permitir em curto alcance que os visitantes de seu blog possam compartilhar suas postagens. E como a difusão de conteúdo nas redes sociais é gigante, suas postagens poderão ter um alcance bem maior e gerar cada vez mais visitas a seu blog.

Abaixo, a imagem de como ficará depois de instalado em seu blog:


Se você gostou do estilo, a notícia boa é que é bem simples de colocar em seu blog. Acompanhe o tutorial a seguir, faça os passos com atenção e desfrute do resultado.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.


Tutorial

>> Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".

>> Clique no código de seu template, pressione "CTRL+F" e pesquise por ]]></b:skin>

>> Logo ACIMA da tag pesquisada cole o código abaixo:
/*--------MBT Social Media Icon Set------*/
.mbt-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 7px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pg4GfdL9MHyGQgtZpXJTNvUBxQlyxBp31n8YGxJFaGSTutiBrF6YWbb1w9hA_xw4qcNxQqsDFstGstl9ouydFizYSpgb0rPa5P2wXY1tGRiF3vlzl7H3FceuEWXm1QuzEy_gvoDIb0kh/s1600/flapper.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.mbt-bookmarking a.digg {
background-position:0px -86px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -129px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.mbt-bookmarking a.technorati {
background-position:0px -430px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.mbt-bookmarking a.twitter {
background-position:0px -516px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.mbt-bookmarking a.facebook {
background-position:0px -172px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.mbt-bookmarking a.reddit {
background-position:0px -258px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -602px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.mbt-bookmarking a.rss {
background-position:0px -774px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -817px;
}

>> Pesquise agora por <div class='post-footer-line post-footer-line-1'>
Observação: Você poderá encontrar duas linhas com esse mesmo código, caso encontre opte pela segunda.

>> Logo ABAIXO da tag pesquisada cole o seguinte código:
<!--Social Media Icons-->
<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Compartilhe nas Redes Sociais:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' 


>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

Deixe seu comentário, pois ele é a motivação para nosso trabalho. 

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN