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/AVvXsEhfOD7Zhq6isVyk1h0O-VwYSnsyTzq7WX3QYiiVIYzdnEtnQV_pOlXy1jKI3tjtbiXXHx6i1qdL2cD5V47JWphHZkWdh_SWemkcYrTLK-P8T8m1mbTUN9fIsVHvoHO5KYPpXAs84LJh7idp/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' target='_blank' title='Digg this :>'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>
<!-- Technorati -->
<a class='technorati' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank' title='Fave this :>'/>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>
<!--Facebook-->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :>'/>
<!-- Yahoo -->
<a class='yahoo' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :>'/>
<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"'/>
</b:if></div><div style="clear:both"></div>
>> 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.
0 comentários:
Postar um comentário