terça-feira, 29 de junho de 2010

Colocando barra de compartilhamento de redes sociais no rodapé das postagens



Esse é um ótimo menu de compartilhamentos com 20 icones das redes sociais, entre eles "Dihitt,Facebook,Twitter e vários outros", ele é bem elegante, com um efeito bem bacana.Além disso, o código ja apresenta algumas novidades do CSS3.Ele ficará localizado no fical do post, ao rodapé.

Para instalar, procure por ]]></b:skin> e cole o código abaixo antes dele e Salve.

/* BOOKMARKS by GB */

.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;
}

Em seguida , marque a opção Expandir modelos de widgets e cole o código abaixo antes de <div class='post-footer-line post-footer-line-3'/> Caso não encontre essa linha, procure por <p class='post-footer-line post-footer-line-3'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bookmarks'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;/&amp;t=&quot; + 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='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;/&amp;t=&quot; + 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='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot; + data:post.url + &quot;/&amp;h=&quot; + 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='&quot;http://www.syxt.com.br/rec6/link.php?url=&quot; + data:post.url + &quot;/&amp;=&quot; + 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='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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 exprhref='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;/&amp;title=&quot; + 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='&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://img188.imageshack.us/img188/41/yahoou.png'/></a>
<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://img188.imageshack.us/img188/4666/technorati.gif'/></a>
<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://img192.imageshack.us/img192/29/dihitt.png'/></a>
<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://img204.imageshack.us/img204/9272/ueba.png'/></a>
<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://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='&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://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>

Na parte destacada de vermelho, coloque a URL do seu blog.
Na parte destacada de azul, são as urls da imagem das redes sociais caso queira trocar.

Depois Salve!


Marcadores: , ,