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 para instalar em seu blog, como: Widget Botões Sociais Sexy Bookmark e o Widget Icones sociais com Bubble Effect.
Conforme prometido, hoje você vai aprender a instalar um menu de icones sociais, igual ao que eu uso aqui no Gothic Darkness.
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:

Vá na aba "design" (ou "layout"), 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

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
<div class='post-footer-line post-footer-line-2'>

Dependendo de seu modelo de template, as linhas acima poderão estar da seguinte maneira:
<p class='post-footer-line post-footer-line-2'/>
ou
<div class='post-footer-line post-footer-line-2'/>

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.

Confira algumas sugestões de ícones sociais e ícones do Google Buzz 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.


E ai, gostaram? Facil não?
Sei que ando "sumidinha", e fazia um tempo que não atualizava os tutoriais para vocês, mas ando adoentada. Continuarei a publicar tutoriais, mas por enquanto, não terão a mesma frequência que antes. E futuramente teremos novidades e algumas mudanças. Aguardem!
Bom, é isso!
Boa blogagem a todos!