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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + 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
fiz tudo como indicado no tuto. mas, deu em nada
ResponderExcluirAdoro o seu Blog!
ResponderExcluirParabéns pelo trabalho.
O novo visu ficou show!
Beijo =*
oi valeu pela dica estou começando agora estou gostado de blog sabe! deu certo regulei e ficou otimo parabens ae abraços..
ResponderExcluiroi.
ResponderExcluirEu 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.
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
ResponderExcluirplease atleast give us a backlink..
ResponderExcluirfee, eu acho que você colou o primeiro código antes do ]]>< /b:skin > e não depois
ResponderExcluirTem como mudar o comprimento da barra? A área de posts do meu blog é menor. (pdromaciel.blogspot.com)
ResponderExcluirGostaria de saber como se pode apenas aumentar a coluna direita de um blog com o modelo normal do blogspot
ResponderExcluirWhat a nice sharing button, indeed it is very very sexy.
ResponderExcluirPor acaso sabe do codigo para o promova do orkut?
ResponderExcluirEu queria mudar algum desses icones e colocar pro promova do orkut, mas nao acho em local algum=\ Se puder me ajudar...
cara, muito boa a dica, só que as imagens estão com problema e não aparece nada! Se puder arrumar ...
ResponderExcluir