Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Acessórios Widget Vanessa S.

Widget Botões Sociais Sexy Bookmark

Uma boa maneira de divulgar melhor o conteúdo do seu blog,é colocando ícones dos principais sites de Rede Social Bookmarks ao final de cada postagem.
Se você ainda não sabe o que é SOCIAL BOOKMARK, e como funciona, vou explicar.

De acordo com o Wikipédia “O Social Bookmarking, resumidamente, é um sistema de bookmarks (também conhecido como favoritos ou marcadores) online, público e gratuíto, que tem por finalidade disponibilizar seus favoritos na internet para o seu fácil acesso e para compartilhar com os usuários deste tipo de serviço. Pode ser classificado como parte do conceito que é chamado de Web 2.0.”

Quando você cria um post, se o seu leitor se interessar pelo conteúdo do mesmo, ele pode adicionar ou “favoritar” o seu artigo ou blog em mecanismos de Rede Social Bookmarks, podendo compartilhar o conteúdo do artigo adicionado com outros usuários.
Se você incluir ícones sociais ao final de cada postagem, facilita ainda mais aos usuários que queiram divulga-lo ou “favoritar” o seu artigo.
Atualmente, existem vários sites usados para favoritar links e artigos na Web.
Eles funcionam, basicamente, como Agregadores de Conteúdo.

Já deu para entender um pouco sobre o que é e como funciona a Rede Social Bookmark?

Então que eu tal já começar incluindo botões em seu blog para facilitar os leitores que queiram divulgar seus artigos?

Vou criar alguns tutoriais com modelos diferentes de Botões para Rede Social Bookmark, afim de facilitar a vocês na escolha e instalação dos mesmos.
Hoje vou começar ensinando a instalar um widget com Botões Sexy Social Bookmark igual a este que está na imagem demonstrativa:

Icones Social Sexy Bookmark

Instalar widget de botões sociais sexy bookmark no blog

Nunca esqueça que antes de qualquer alteração, é sempre bom fazer um backup do seu Template para evitar transtornos, se algo sair errado.

1º Passo:

Vá na edição HTML do seu blog, marque “Expandir Modelos de Widgets” e procure pela tag </head>
E cole o código a seguir logo ACIMA dela:


<style type='text/css'> div.sexy-bookmarks {
height:54px;
background:url('http://3.bp.blogspot.com/_lz4W5aRri7U/TPMu1ebIWdI/AAAAAAAABpU/jAJybGhBd-Y/s1600/sharingsprite.png') no-repeat left bottom; position:relative;
width:540px; }
div.sexy-bookmarks span.sexy-rightside { width:0px; height:54px;
background:url('http://lh3.ggpht.com/_3eh_nW6DoIE/TLDyP6JTgVI/AAAAAAAABV8/oTIaT5hQWwA/Sexysprite.png') no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-bookmarks ul.socials {
margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
div.sexy-bookmarks ul.socials li {
display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; }
div.sexy-bookmarks ul.socials a {
display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('http://lh3.ggpht.com/_3eh_nW6DoIE/TLDyP6JTgVI/AAAAAAAABV8/oTIaT5hQWwA/Sexysprite.png') no-repeat !important; }
.sexy-furl { background-position:-300px top !important; }
.sexy-furl:hover { background-position:-300px bottom !important; }
.sexy-digg { background-position:-500px top !important; }
.sexy-digg:hover { background-position:-500px bottom !important; }
.sexy-reddit { background-position:-100px top !important; }
.sexy-reddit:hover { background-position:-100px bottom !important; }
.sexy-stumble { background-position:-50px top !important; }
.sexy-stumble:hover { background-position:-50px bottom !important; }
.sexy-delicious { background-position:left top !important; }
.sexy-delicious:hover { background-position:left bottom !important; }
.sexy-yahoo { background-position:-650px top !important; }
.sexy-yahoo:hover { background-position:-650px bottom !important; }
.sexy-blinklist { background-position:-600px top !important; }
.sexy-blinklist:hover { background-position:-600px bottom !important; }
.sexy-technorati { background-position:-700px top !important; }
.sexy-technorati:hover { background-position:-700px bottom !important; }
.sexy-myspace { background-position:-200px top !important; }
.sexy-myspace:hover { background-position:-200px bottom !important; }
.sexy-twitter { background-position:-350px top !important; }
.sexy-twitter:hover { background-position:-350px bottom !important; }
.sexy-facebook { background-position:-450px top !important; }
.sexy-facebook:hover { background-position:-450px bottom !important; }
.sexy-mixx { background-position:-250px top !important; }
.sexy-mixx:hover { background-position:-250px bottom !important; }
.sexy-script-style { background-position:-400px top !important; }
.sexy-script-style:hover { background-position:-400px bottom !important; }
.sexy-designfloat { background-position:-550px top !important; }
.sexy-designfloat:hover { background-position:-550px bottom !important; }
.sexy-syndicate { background-position:-150px top !important; }
.sexy-syndicate:hover { background-position:-150px bottom !important; }
.sexy-email { background-position:-753px top !important; }
.sexy-email:hover { background-position:-753px bottom !important; } </style>

Salve as alterações.

ATENÇÃO:

Eu aconselho que você faça download das imagens ícones usadas neste widget, salve no seu pc e hospede-as no seu site preferido, para evitar que as imagens saiam do ar por problemas de hospedagens!
Depois de hospedadas, copie a url de cada imagem e substitua pela url das imagens que estão no código! Isso é muito importante,ok?
1. sharingsprite.png
2. Sexysprite.png

2º Passo:

Agora você deve configurar seu template, para que os botões apareçam logo no rodapé abaixo de suas postagens.
Volte na edição HTML do seu blog, marque “Expandir Modelos de Widgets” e procure pela tag <div class=’post-footer’>


<div class='post-footer'>

E cole o código a seguir logo ABAIXO desta tag:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Enviar no Delicious'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg este Post'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adicionar no Technorati'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Adicionar no Reddit'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble este Post'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartilhe no DesignFloat'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartilhe no Facebook'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartilhe no Twitter'/></li>
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartilhe no Furl'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/naeemnur' rel='nofollow' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartilhe por Email'/></li>
</ul><span class='sexy-rightside'/></div><div class='sexy-link'>

</div>
</b:if>

Salve e pronto!
Neste Widget, os botões de Rede Social Bookmark possuem um efeito que ao passar o mouse em cima cada icone sobe.

No código acima, os botões aparecerão apenas nas páginas internas do blog. Caso você queira que eles apareçam também na página inicial, basta apagar a 1ª e a última linha do código (destacados em vermelho).

Confira outros tipos de widgets com Botões para enviar e compartilhar seus posts nas Redes Sociais:

Assim você pode escolher qual deles prefere instalar no seu template.

Se quiser, confira também alguns Icones Sociais para baixar.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

18 Comentários

  1. Boa postagem !!!

  2. .:: Clau ::. disse:

    Willian
    Vc tem que usar uma "div" de alinhamento.
    1)Coloca esse código aqui: <div style='align: center'>
    Logo abaixo da 1ª linha (que está em vermelho).
    2)Depois coloca esse aqui: </div>
    Logo acima do </b:if>

  3. William disse:

    Clau como faço para por esses botoes no centro ??
    até mais

  4. .:: Clau ::. disse:

    Gileat
    No código acima, os botões aparecerão apenas nas páginas internas do blog. Caso você queira que eles apareçam também na página inicial, basta apagar a 1ª e a última linha do código (destacados em vermelho).

    Abner
    Valeu pela dica 😉

    Willian
    Para esses botões não! Mas vc pode usar o código do addthis. No artigo acima tem o link para o post: Botões AddThis compartilhar post nas redes sociais

  5. William disse:

    Como colocar contagem nesses botoes ??
    Tipo se eu compartilhar no twitter ter um 1 emcima do botao twitter..
    É possivel ?
    se sim pode me ajudar ?
    até mais

  6. Abner disse:

    Clau nota dez mais faltou informar que para o feed RSS funcionar deve alterar a url do feed pelo nosso feed por exemplo http://feeds2.feedburner.com/mundo-blogger

    class='sexy-syndicate'><a href='http://feeds2.feedburner.com/naeemnur&#39; rel='nofollow' title='Subscribe to RSS'

    vai dica para não ficar erros no codigo vlw

  7. Gileat disse:

    Primeiramente gostaria de agradecer pela excelente postagem. Agora vai a pergunta, os botões só estão aparecendo na página interna do meu blog, gostaria que eles ficassem visiveis no home. Tenho que mudar algo no código?

  8. .:: Clau ::. disse:

    João Pedro
    É só vc tentar descobrir a linha que está instalado o código deste recurso que vc citou no seu template, e colar o código dos botões de compartilhamento logo acima dele.

  9. João Pedro Santana disse:

    Muito obrigado, deu certinho.
    Mas eu tenho o widget "Poderá gostar também de" e queria saber se tem algum jeito de os botões de compartilhamento aparecessem antes dele .

  10. Manuel Benicio disse:

    oi clau parabéns pelo blog muito bom mesmo, tirei daqui muita coisa pra fazer o meu, ultimamente tive esse problemas das imagens sumirem, só consegui resolver uma parte graças a esse seu tutorial aqui, se bem que o nome compartilhar ficou pequeno, mais tá melhor do que sem imagens, vc faz um trabalho muito bom, voltarei sempre aqui, abraços

  11. .:: Clau ::. disse:

    Pessoal,
    As imagens estavam hospedadas no tinypic e foram retiradas do ar pelo próprio site.
    Eu atualizei as imagens, mas eu aconselho que vcs salvem as imagens no pc e hospedem-as no site preferido de vcs pra evitar q aconteça de novo de sairem do ar.

  12. Dantas Neto disse:

    Clau só um aviso, aqui no meu blog os icones não estão aparecendo, acredito que eles foram removidos.

    Séra que tem como você consertar isso? desde já obrigado.

  13. Goatkvlt Perversor disse:

    Olá
    as imagens das redes socias foram deletadas
    voce pode arrumar porfavor
    desde já lhe agradeço

  14. ::Clau:: disse:

    @meninadabahia.com.br:
    Vou providenciar esse tutorial sim, inclusive já era pra ter feito, a correria que tá fogo..mas aguarde que logo sai…=)
    Obrigada pelo comentário e pela visita e volte sempre!

  15. meninadabahia.com.br disse:

    Clau, vc tem o tutorial do "gostou desse artigo? Favorite e compartilhe que nem o seu?? Adorei o seu.

  16. Claudinha Monteiro disse:

    Adorei a dica!Estava horas procurando um widget de rede sociais, esse é ótimo.
    Uma coisa: no Blogger, se vc clicar em Layout, depois em Adicionar um Gadget, selecionando a caixa HTML/Java Script e por fim colando os dois códigos em seguida, também dá certo, e é mais rápido do que configurar o modelo HTML.

  17. Vitória de Oliveira disse:

    eu estava procurando isso mesmo, obrigado ficou otimo muito obrigado

  18. ?Carla_Witch Princess? disse:

    Clau, encontrei os códigos dos widgets que vc
    tinha me mandado….
    Obrigada, amiga! Já instalei os dois no blog.
    Bjinhossssssss

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.