11 de ago de 2009

Botões sociais no Blogger com efeito


Encontrei no blog Widgets, este tutorial ensinando a colocar botões sociais, deste em que a pessoa pode relacionar as postagens que gosta. Já instalei aqui no Templates e repasso aa dica, com uma modificação: o fundo na cor escolhida por vc. Então, vamos fazer ?

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.



Vá até o HTML do seu blog e depois do código:
]]></b:skin>

Cole este próximo código:


<!--Social Bookmarking Widget start http://www.widgetblogger.co.cc-->
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background: #CCCCCC;
position:relative;
width:540px;
}


div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background: #CCCCCC;
position:absolute;
right:-17px;
}


div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}


div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}


div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;


}


.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}


.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}


</style>



*Códigos na cor vermelha representam a cor de fundo da barra de botões

Salve !

Agora clique em "Expandir modelos widget" e procure pelo código :

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

Depois dele cole o próximo código:



<div class='sexy-bookmarks'><ul class='socials'><li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='AQUI O ENDEREÇO DE SEU FEED' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul><span class='sexy-rightside'/></div>


*Troque o código na cor verde pelo endereço de seu Feed

12 comentários:

  1. fiz tudo como indicado no tuto. mas, deu em nada

    ResponderExcluir
  2. Adoro o seu Blog!
    Parabéns pelo trabalho.
    O novo visu ficou show!
    Beijo =*

    ResponderExcluir
  3. oi valeu pela dica estou começando agora estou gostado de blog sabe! deu certo regulei e ficou otimo parabens ae abraços..

    ResponderExcluir
  4. oi.
    Eu tentei fazer, só que apareceu um monte de pontinhos!
    Mais mesmo assim obrigada pela suas dicas, são ótimas para nós que não sabemos mexer em nossos bloggers.

    ResponderExcluir
  5. Oi , É QUE COMO SOU INICIANTE,NÃO SEI DIREITO ESSES TROÇOS. vC PODE ME DIZER O QUE SÃO fEEDS? MESMO ASSIM, MUITO OBRIGADA POR TUDO,ADOREI O BLOG

    ResponderExcluir
  6. fee, eu acho que você colou o primeiro código antes do ]]>< /b:skin > e não depois

    ResponderExcluir
  7. Tem como mudar o comprimento da barra? A área de posts do meu blog é menor. (pdromaciel.blogspot.com)

    ResponderExcluir
  8. Gostaria de saber como se pode apenas aumentar a coluna direita de um blog com o modelo normal do blogspot

    ResponderExcluir
  9. What a nice sharing button, indeed it is very very sexy.

    ResponderExcluir
  10. Por acaso sabe do codigo para o promova do orkut?

    Eu queria mudar algum desses icones e colocar pro promova do orkut, mas nao acho em local algum=\ Se puder me ajudar...

    ResponderExcluir
  11. cara, muito boa a dica, só que as imagens estão com problema e não aparece nada! Se puder arrumar ...

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube