Colocar icones para rede sociais no Blogger

Olá Amigos!

Hoje vou mostrar pra vocês um hack que peguei do Dicasblogger da Juliana Sardinha.
O que ele faz ?
Ele coloca pequenos ícones no seu template e facilita sua vida, ele envia seus posts para as grandes redes sociais como dihitt, technorati, google, yahoo etc.
Vai ficar mais ou menos assim:



Não é um bixo de sete cabeça não, é bastante simples, até eu compreendi como instalar =X.
Então chega de papo e mão na massa, ou melhor, no mouse e teclado.

Entre em Layout>>Editar HTML e cole dentro do CSS o seguinte código:

/* ----- 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 recomendo que vocês colem após o treicho "Posts" porque ai, ele vai ficar embaixo das postagens, fica mais legal.

/* ----- 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">

Agora cole o seguinte código:

<p></p><div
align="left"><div class="book">
<div class="rsociales">
<span class="blogk">
<ul>
<li><a href="data:post.emailPostUrl"
target="_blank" title="Enviar por Email"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://del.icio.us/post?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank" title="Incluir no del.icio.us"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://digg.com/submit?phase=3&amp;url=%22%20+%20data:post.url"
target="_blank" title="Incluir no Digg"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://dihitt.com.br?botao=enviar&amp;url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data:post.title"
target="_blank" title="Incluir no diHITT"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://www.linkk.com.br/submit.php?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank" title="Incluir no LinkK"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://rec6.via6.com/link.php?url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data:post.title"
target="_blank" title="Incluir no Rec6"><img
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://ueba.com.br/NovoLink?url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data: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/infoblogui/"><img
alt="Assinar feed" class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://www.technorati.com/faves?add=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank"><img alt="Agregar a Technorati"
class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank"><img alt="Agregar a Google"
class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://myweb2.search.yahoo.com/myresults/bookmarklet?u=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"
target="_blank"><img alt="Agregar a Yahoo!"
class="rsociales-sobre" src="http://imagem.png/"
/></a></li>
<li><a
href="http://www.blogger.com/%22http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data: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 em um site de sua preferência, eu hospedo no ImagesHack.us.
Substitua em cada linha http://imagem.gif pelo link de sua imagem.

Aqui disponibilizo os ícones para Download.

Ex:

<li><a
href="http://www.blogger.com/%22http://dihitt.com.br?botao=enviar&amp;url=%22%20+%20data:post.url%20+%20%22&amp;titulo=%22%20+%20data:post.title"
target="_blank" title="Incluir no diHITT"><img
class="rsociales-sobre"
src="http://imageshack.us/img/2862/infoblogui/dihitt.png"
/></a></li>
<li><a se="" de="" alterar="" o="" link="" info=""
blogui="" pelo="" do="" seu=""></a>
</li><li><a
href="http://feeds.feedburner.com/infoblogui/"><img
alt="Assinar feed" class="rsociales-sobre" src="http://imagem.gif/"
/></a></li>
<li><a>

Pronto galerinha, simples não é ?
Espero que tenham gostado.
Até mais!


.