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

Redes Sociais Widget Vanessa S.

Widget Menu de icones sociais no rodapé (botões enviar postagens)

Vocês já sabem que uma boa maneira de divulgar melhor o conteúdo do seu blog,é colocando botões de ícones dos principais sites de Rede Social Bookmarks ao final de cada postagem, permitindo que seu leitor envie suas postagens publicadas diretamente nas redes sociais.
Em outros tutoriais publicados, você já conferiu alguns widgets de botões de divulgação nas redes sociais para instalar em seu blog.

Neste widget, os icones possuem um efeito de transparência, ao passar o mouse em cima de cada um deles.
Vocês verão como é fácil e rápido instalar este menu no rodapé de seus posts.

1º Passo – Aplicar estilos CSS:

Acesse o painel do Blogger, e clique no menu “modelo”, e clique em “editar HTML”, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole logo ACIMA dela:


/* Menu Social Bookmark
------------------------------- */
.bookmarkbox {
margin-top:5px;
padding:2px 2px 2px 2px;
}

.bookmarkbox h3{
padding-bottom:10px;
font-size:110%; /*Tamanho da fonte do título*/
padding-top:5px;
text-transform:none;
}

.rsociais ul {
display:inline;
margin:0px !important;
padding:0px;
}
.rsociais li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0px;
padding:2px;
}

.rsociais img {
border:0px none;
float:none;
margin:0px;
padding:0px;
background:transparent;
}
.rsociais-sobre {
opacity:1;
}
.rsociais-sobre:hover {
opacity:0.6;filter:alpha(opacity=60);
}

2º Passo – Instalar os ícones (código html)

Agora vamos incluir os códigos html dos ícones no rodapé dos posts.
Volte no menu “modelo” e entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure pela tag:

class='post-footer-line post-footer-line-1

Cole o código a seguir logo abaixo desta linha:


<!-- Início Menu Social Bookmark -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'><div class='bookmarkbox'>
<h3>Compartilhe!</h3>
<div class='rsociais'>
<ul>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS Feed'><img class='rsociais-sobre' src='URL-ICONE-FEED'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='del.icio.us'><img class='rsociais-sobre' src='URL-ICONE-DELICIUS'/></a></li>

<li><a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' target='_blank' title='Digg'><img class='rsociais-sobre' src='URL-ICONE-DIGG'/></a></li>

<li><a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Technorati'><img alt='Technorati' class='rsociais-sobre' src='URL-ICONE-TECHNORATI'/></a></li>

<li><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twiiter'><img alt='Tweet this' class='rsociais-sobre' src='URL-ICONE-TWITTER'/></a></li>

<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='rsociais-sobre' src='URL-ICONE-STUMBLEUPON'/></a></li>

<li><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'><img alt='Facebook' class='rsociais-sobre' src='URL-ICONE-FACEBOOK'/></a></li>

<li><a expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot; + data:post.url + &quot;&amp;tt=&quot; + data:post.title' rel='nofollow' target='_blank' title='Promova este post no orkut'><img alt='orkut' class='rsociais-sobre' src='URL-ICONE-ORKUT'/></a></li>

<li><a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title' target='_blank' title='Compartilhe no Google Buzz'><img alt='Google Buzz' class='rsociais-sobre' src='URL-ICONE-GOOGLE-BUZZ'/></a></li>
</ul>
</div>
</div>
</div>
</b:if><!-- Fim Menu Social Bookmark -->

Salve as modificações!

Se preferir, veja neste post outras opções de local mais adequado para colar o código html dos ícones.

Confira algumas sugestões de ícones sociais que eu disponibilizei para download.
Escolha os icones que mais lhe agrada, hospede-os no seu site preferido e adicione o endereço dele nos locais indicados e destacados no código acima.
No 2º passo, você só precisará editar os endereços das suas imagens ícones, os links para envio já estão configurados automaticamente.

Se preferir, recomendo que você veja o artigo sobre Botões AddThis com ícones Personalizados com opções mais atualizadas de redes sociais.

Boa blogagem a todos!

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.

24 Comentários

  1. Eduardo disse:

    No meu nao aparece nada ‘-‘

  2. Não tem como colocar no HTML/javascript?Para quem tem dificuldade de entender html é bem mais fácil.
    Eu ficaria muito agradecida.
    Fica com DEUS e obrigada.

  3. Rhuan disse:

    Olá, boa tarde… das tres sugestões de caminhos que você mecionou, eu não estou conseguindo encontrar nem um dos tres… tem algum outro caminho?
    “2º Passo – Instalar os ícones

    Agora vamos incluir os icones no rodapé dos posts.
    Volte na aba “design” (ou “layout”), entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure pela tag

    Dependendo de seu modelo de template, as linhas acima poderão estar da seguinte maneira:

    ou
    ” nesta parte…
    Obrigado desd de já!

    • Vanessa disse:

      Rhuan, experimente localizar :
      class=’post-footer-line post-footer-line-1

      se não existir essa tag no seu template, lamento,mas não terei como ajudar, pois existe muita variação de código de template para template.

  4. ALUIZIO MEDEIROS disse:

    Parabéns pelas dicas.

  5. Samanta disse:

    OLá !!

    Vivia namorando esta barra no seu blog e agora coloquei no meu !! adorei !
    Valeu por compartilhar !

    beijossssss

  6. Pedreira Skate disse:

    Olá! Muito obrigado por compartilhar conosco está gama de conteúdo. Meus parabéns.

    Eu pediria por gentileza para ajudar-me com um detalhe pois ao clicar na opção " Twitter " o twitthis está enviando uma mensagem secundaria. Minha pergunta és: Existe alguma forma de retira-la ?!

    Atenciosamente.

  7. .:: Clau ::. disse:

    «O» msd
    Conseguir instalar alguns recursos pode variar de template para template. Não há como eu ajudar, mas posso deixar uma sugestão: Vc pode tentar incluir o código que não tem no seu template logo no término da tag de fechamento do post-footer-line-1, ou então, instalar os icones na tag 3 que já tem no seu template.

  8. «O» msd «?» disse:

    O meu html não tem div post foot 2… tem o 3 e o 1 e não tem o 2 :S

  9. .:: Clau ::. disse:

    Obrigada Tiago!
    Volte sempre!

  10. tiago disse:

    Obrigado pela atenção a mesma! =)

    O teu blog está excelente e com boas dicas..

    Tudo de bom para ti… xxx

  11. .:: Clau ::. disse:

    pentedois
    Não sei o q pode ter acontecido, não tenho como te ajudar.

  12. pentedois disse:

    ola Clau!

    Tou com um problema no botão de partilha do addthis..

    Quando clico para partilhar ele não partilha o texto mas sim uma parte que eu tenho de texto nos comentários.

    Alguma forma de resolver isso, ja procurei por todo o lado e não arranjo solução.

    achas que me podes ajudar? =/

  13. .:: Clau ::. disse:

    rubens
    É o efeito sombra nos textos. Dá uma passada no menu índice de Tutoriais Blogger que vc vai encontrar o tutorial que ensina a aplicar este efeito.

  14. rubens disse:

    Olá, eu gostaria de saber qual código você usa pare fazer esse efeito no title do seu blog!

  15. Kakashi disse:

    clau é que la só explica como colocar em pop-up
    queria que aparecesse na msm pagina incorporada

    http://www.noticiaeblog.com/2010/06/adicione-opcao-responder-comentarios-no.html

  16. ?? Mel ? mendes? ? ? disse:

    Sim,Clau! Agora deu certo…ficaram na horizontal. Que bom que pude ajudar em algo.Adoro suas "lições",aprendo muito contigo.Beijo e até mais!:)

  17. ::Clau:: disse:

    ?? Mel ? mendes? ? ?:
    Eu encontrei um erro no código,mas já corrigi. O correto é colar o código do 1º passo ACIMA de "skin" e não abaixo como estava no tutorial.
    Tenta alterar no seu template ou refazer a colagem do código.
    Agora vai dar certo, com certeza. Os icones ficavam um abaixo do oureo pq o html não estava interpretando os estilos css, mas agora está corrigido.
    Obrigada pelo comentário, até pq me serviu de alerta para corrigir o erro q eu havia cometido 🙂

  18. ?? Mel ? mendes? ? ? disse:

    Oi,Clau,tudo bem? Testei em dois blogs diferentes e olha que doidera,a primeira parte do código que se cola abaixo de ]]> aparece escrita sob o navbar depois de salvar todos os passos…Que estranho,né? Fiz e refiz,até decorei,mas sempre acontece. Poderia então poe esses ícones no sidebar? Outras coisa,eles ficaram em ambos blogs na vertical…seria essim mesmo?Poderia me esclarecer onde errei,por gentileza? Obrigado,sei que volta e meia te encho a paciência,mas já utilizei várias dicas suas e deu super certo.

  19. ::Clau:: disse:

    @Vera:
    Eu quem agradeço pela visita e pelo comentário.

  20. Vera disse:

    Excelente dica!
    Parabens pelo blog, esta fantastico, com muitos artigos interessantes.
    Obrigada por compartilhar…
    Beijosss
    *teclado sem acentos.

  21. ::Clau:: disse:

    @Kakashi:
    Pq? vc não consegui entender o tutorial postado, é isso?
    Eu não entendi direito o teu pedido…rs

  22. Kakashi disse:

    tem como vc editar esse tutorial de add o "responder comentario" no blog, colocando pra responder na mesma pagina incorporada

    tipo: quando clicar em responder comentario ele vir aqui pro #comment-form e add o @ e o nome de usuario

    http://www.noticiaeblog.com/2010/06/adicione-opcao-responder-comentarios-no.html

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