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.
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 == "item"'>
<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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>
<!--DIGG-->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + 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.
Comentários