Icones para redes socais no Blogger

Que tal colocar pequenos ícones no seu template para facilitar o envio dos seus posts para as redes sociais e para os favoritos ( bookmarks )?

Assim como  no Dicas Blogger:



É relativamente fácil...Vamos lá?

Entre no HTML do seu template e cole dentro do CSS o seguinte codigo:

/* -----   Bookmarking  ----- */
.book {
margin-top:5px;
        background:#fdfdfd;
        padding:2px 2px 2px 2px;
        border:1px solid #f0f0f0;
}
.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Eu optei por colar após o trecho "Posts"

/* -----   Posts   ----- */          
      (todo o código)
/* -----   Bookmarking  ----- */

Depois clique em "expandir modelos de widgets".

Procure por esta linha:

<p class='post-footer-line post-footer-line-3'/>

Cole então o seguinte código, logo abaixo :

<div align='left'><div class='book'>
<div class='rsociales'>
<span class='blogk'>
<ul>
<li><a expr:href='data:post.emailPostUrl'
target='_blank' title='Enviar por Email'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></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='Incluir no
del.icio.us'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot;
+ data:post.url' target='_blank' title='Incluir no
Digg'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
diHITT'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://www.linkk.com.br/submit.php?url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank' title='Incluir no
LinkK'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://rec6.via6.com/link.php?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Rec6'><img class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://ueba.com.br/NovoLink?url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
Uêba'><img
class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
href='http://feeds.feedburner.com/dicasblogger/'><img
alt='Assinar feed' class='rsociales-sobre'
src='http://IMAGEM.gif'/></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'><img alt='Agregar a
Technorati' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Google' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a
expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Yahoo!' class='rsociales-sobre'
src='http://IMAGEM.png'/></a></li>
<li><a
expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot;
+ data:post.url + &quot;&amp;title=&quot; +
data:post.title' target='_blank'><img alt='Agregar a
Blogmarks' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
</ul>
</span>
</div>
</div>
</div>

Para cada ícone, você deverá linkar a imagem correspondente, hospedando-a no seu site de preferência.
Substitua em cada linha http://IMAGEM.gif pelo link de sua imagem .

Já disponibilizei os ícones para  DOWNLOAD.

Exemplo:

<li><a
expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot;
+ data:post.url + &quot;&amp;titulo=&quot; +
data:post.title' target='_blank' title='Incluir no
diHITT'><img class='rsociales-sobre'
src='http://i257.photobucket.com/albums/hh221/jusardinha/dihitt.png'/></a></li>
<li><a

Lembre-se de alterar o link do feed do Dicas Blogger pelo do seu blog:

<li><a
href='http://feeds.feedburner.com/dicasblogger/'><img
alt='Assinar feed' class='rsociales-sobre'
src='http://IMAGEM.gif'/></a></li>
<li><a

E mais um template, saindo do forno, no final de semana.