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: , ,

7 Comentários:

Às 30 de junho de 2010 17:03 , Anonymous Anônimo disse...

Amigo, to precisano de sua ajuda
tem um windget nesta url

http://www.gigya.com/site/partners/api.aspx#&&history=InPage;Simple

que estou tentano colocar enbaixo dos post, so que nao estou conseguido, ele e para compartilhamento, e bem legal, talves peça acdastro mas e free....

 
Às 30 de junho de 2010 23:51 , Blogger Códigos Blogger disse...

Vish amigo, eu num conheço esse site não =/.Ele oferece vários tipos de widgets,qual VC QUER INSTALAR?
lOGIN , SHARE , Connect , Toolbar , Friend Selector OU Wildfire?

 
Às 1 de julho de 2010 14:15 , Anonymous Anônimo disse...

Seria o Wildfire, que um windget de copartilhamento...

 
Às 1 de julho de 2010 14:54 , Blogger Códigos Blogger disse...

Faça o seguinte, copie o código da primeira caixa, faça o login no blogger,va em 'Design' - 'Editar html' e e cole o código entre as tag head e Salve!
Em seguida copie o código da segunda caixa, vá no editar html, marque a caixinha 'expandir modelos de widgets' e procrure por uma daquelas linhas do terceiro paragrafo do tuto acima, e cole o código abaixo dela e salve.

Por favor, não comente como anônimo.Obrigado =)

 
Às 9 de julho de 2010 21:32 , Blogger Clube da risada disse...

Nossa, essa postagem é perfeita, me ajudou muito mesmo! Amanhã irei colocar no meu blog, isso irá ajudar demais! Abs!

 
Às 21 de agosto de 2010 19:00 , Blogger web loukura disse...

amigo eu botei isso em meu blog e deu certo mais queria que pegasse na frente na home do meu blog so pega abrindo cada postagem queria que tivesse na frente tanbem se não não tem graça seria mais facil para meu seguidores fazer pela frente me ajud valeu entre em contato pelo meu email grogretube@hotmail.com
adorei seu blog cara muito bom mesmo
se poder me ajudar,valeu

 
Às 15 de setembro de 2010 11:25 , Blogger Agro Mecanica Tatui disse...

EXCELENTE!
COM CERTEZA DARA UM BOM RESULTADO!
Marcelo

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial