[TUTORIAL] Ícones de Redes Sociais

Tenha mais leitores em seu blog! Aumente o SEO de seu blog divulgando em mais redes sociais as suas mensagens!

--> Tutoriais Especiais <--
Ícones de Redes Sociais

1º - Entre em seu Painel de Controle:
Entre em seu painel de Controle a Seção de Edição de HTML;

Guia Design - Clique na guia denominada 'Design' ara editar o Design do blog.

Aba Editar HTML - Clique nesta aba para podermos editar o HTML base do blog.

2º - Códigos a serem Adicionados:
Teremos de dicionar 2 códigos em diferentes partes do código HTML base de nosso blog, prestem atenção;

Código CSS

procure por ]]></b:skin> e cole o código CSS abaixo antes dele:

Código:

/* BOOKMARKS */

.bookmarks {
text-align: center;
}
.bookmarks img {
border: none;
opacity:0.4;
filter:alpha(opacity=40);
border: 2px solid silver;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 2px;
width: 18px;
height: 18px;
}
.bookmarks img:hover {
opacity:1;
filter:alpha(opacity=1);
border: 2px solid silver;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 2px;
}

este código não precisa de alteração. Salve esta alteração.

Código HTML

Marque a opção Expandir modelos de widgets.
Procure por <div class='post-footer-line post-footer-line-3'> e cole o código abaixo antes:

Código:

<b:if cond='data:blog.pageType == "item"'>
<div class='bookmarks'>
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='http://img443.imageshack.us/img443/2451/diggq.png' title='Digg'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='del.icio.us'><img alt='del.icio.us' class='sociable-hovers' src='http://img163.imageshack.us/img163/8637/deliciousn.png' title='del.icio.us'/></a>
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "/&amp;t=" + data:post.title' rel='nofollow' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='http://img338.imageshack.us/img338/6397/facebookiconqf.gif' title='Facebook'/></a>
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='http://img87.imageshack.us/img87/1899/googlei.gif' title='Google'/></a>
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='BlinkList'><img alt='BlinkList' class='sociable-hovers' src='http://img338.imageshack.us/img338/8854/blinklist.png' title='BlinkList'/></a>
<a expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "/&amp;t=" + data:post.title' rel='nofollow' target='_blank' title='MySpace'><img alt='MySpace' class='sociable-hovers' src='http://img338.imageshack.us/img338/707/bookmarksitemyspace.gif' title='MySpace'/></a>
<a expr:href='"http://www.newsvine.com/_tools/seed&amp;save?u=" + data:post.url + "/&amp;h=" + data:post.title' rel='nofollow' target='_blank' title='NewsVine'><img alt='NewsVine' class='sociable-hovers' src='http://img217.imageshack.us/img217/3537/iconnewsvine.gif' title='NewsVine'/></a>
<a expr:href='"http://www.syxt.com.br/rec6/link.php?url=" + data:post.url + "/&amp;=" + data:post.title' rel='nofollow' target='_blank' title='Rec6'><img alt='Rec6' class='sociable-hovers' src='http://img580.imageshack.us/img580/7093/rec6.png' title='Rec6'/></a>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='http://img217.imageshack.us/img217/921/ssiconreddit.jpg' title='Reddit'/></a>
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Spurl'><img alt='Spurl' class='sociable-hovers' src='http://img217.imageshack.us/img217/9018/spurl.gif' title='Spurl'/></a>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='http://img87.imageshack.us/img87/3241/stumbleupon.gif' title='StumbleUpon'/></a>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "/&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='TwitThis'><img alt='TwitThis' class='sociable-hovers' src='http://img87.imageshack.us/img87/9946/icotwitter.jpg' title='TwitThis'/></a>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://img188.imageshack.us/img188/41/yahoou.png'/></a>
<a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://img188.imageshack.us/img188/4666/technorati.gif'/></a>
<a expr:href='"http://dihitt.com.br?botao=enviar&amp;url=" + data:post.url + "&amp;titulo=" + data:post.title' target='_blank' title='Incluir no diHITT'><img class='rsociales-sobre' src='http://img192.imageshack.us/img192/29/dihitt.png'/></a>
<a expr:href='"http://ueba.com.br/NovoLink?url=" + data:post.url + "&amp;titulo=" + data:post.title' target='_blank' title='Incluir no Uêba'><img class='rsociales-sobre' src='http://img204.imageshack.us/img204/9272/ueba.png'/></a>
<a expr:href='"http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://img293.imageshack.us/img293/4683/blogmarks.gif'/></a>
<a expr:href='data:post.emailPostUrl' target='_blank' title='Enviar por Email'><img class='rsociales-sobre' src='http://img87.imageshack.us/img87/923/mail2.png'/></a>
<a expr:href='"http://www.linkk.com.br/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Incluir no LinkK'><img class='rsociales-sobre' src='http://img580.imageshack.us/img580/8496/linkk.png'/></a>
<a href='http://SEUBLOG.blogspot.com/feeds/posts/default'><img alt='Assinar feed' class='rsociales-sobre' src='http://img62.imageshack.us/img62/3664/ffeediconmd7f6717.gif'/></a>
</div>
</b:if>

Ao final do código, têm escrito 'SEUBLOG' troque pelo endereço do seu blog e Salve.

3º - Resultado:

Imagens
Antes	Depois

---

© Fórum dos Bloggers

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Ícones de Redes Sociais