13 de setembro de 2009

Envie seus posts para diversas redes sociais através do Sexy Social Bookmark


Atendendo aos pedidos de alguns leitores do blog, vou mostrar outro widget para envio de posts para redes sociais. Estou falando do "Sexy Social Bookmark" para blogues do Blogger/Blogspot. Esta versão está um pouco diferente da original, eu a deixei mais "abrasileirado".

1 - Faça o backup do seu template atual. Se você ainda não sabe como fazer, neste post ensinamos como deve ser feito.

2 - Vá em Layout -> Editar Htlm e marque a opção "Expandir modelos de widgets".

3 - Com a ajuda do Crtl+F encontre o seguinte trecho: ]]></b:skin>

Acima desse trecho, cole o código abaixo.

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(http://img200.imageshack.us/img200/1360/2ueii3t.png) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(http://img200.imageshack.us/img200/1360/2ueii3t.png) no-repeat right bottom;
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(&#39;http://img509.imageshack.us/img509/3131/sexysprite.png&#39;) 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>

4 - Novamente com a ajuda do Crtl+F encontre: <data:post.body/>

Cole abaixo dele, o seguinte 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='Url_FeedBurner' 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>

IMPORTANTE: Se no seu template exister mais de um <data:post.body/> insira o código acima, após o ÚLTIMO <data:post.body/> que você encontrar. Geralmente esta repetição acontece em templates que usam o hack "Leia Mais". Coloca-se o código dessa forma, pois é interessante ver widget quando o post estiver exposto por completo. Não esqueça de alterar o trecho Url_FeedBurner pelo seu link no feedburner.

5 - Visualize e se tudo estiver certo, salve.

AS MODIFICAÇÕES QUE REALIZEI

Como disse no início deste post, eu realizei algumas aterações no widget orginal, deixando-o mais "abrasileirado". A primeira alteração que diz foi a mudança da expressão "Shaning is Sexy" por "Compartilhar". Ficando assim:

Outra alteração que fiz foi no local de instalação do widget. Achei melhor colocá-lo após o trecho:
<p class='post-footer-line post-footer-line-3'/>
<b:if cond='data:post.allowComments'>
<div align='left'><div class='book'>

Cujo resultado pode ser visto na imagem abaixo:

É isso ai. Até a próxima.

Via Free Template

11 comentários:

  1. Parabéns, você teve um conteúdo publicado no Linka Nisso.

    Um abraço da equipe LN.

    ResponderExcluir
  2. Boa noite!
    Tudo bem e com vc?

    Ahh, muito obrigada! Fico feliz com o elogio!

    Tô dando uma olhada nesse blog q vc me mandou, parece q é bem fácil colocar ícone assim, só pondo a url antes do título.
    Sempre quis saber se tinha jeito!

    Nossa, muito obrigada mesmo!

    Parabéns pelo seu blog tb, ele é ótimo!
    Vc sabe fzer um monte de coisa!

    Beijos,
    Ótima semana pra vc tb! :D

    Gabriela

    ResponderExcluir
  3. Idenaldooo! Conseguiii! hahaha
    Através daquele blog q vc me indicouuu!
    Só q tá meio desalinhado, o ícone com o texto do título...
    Fica um espaço feio...

    E agora? hahah

    ResponderExcluir
  4. ola, Gabriela...

    Tente colocar uma imagem menor. Talvez isso ajude. Mas é assim mesmo, temos que ir fazendo testes até ficar do jeito que queremos.

    Na minha opinião, ficou muito bonito o efeito, mas isso é com vc. Tente o que eu sugeri. Coloque uma imagem menor.

    Qualquer coisas estamos aqui para ajudar. Pode contar sempre com a gente.

    Grande abraço.

    Idenaldo

    ResponderExcluir
  5. Não consegui colocar.. Tentei no meu "Teste" primeiro, mas não aparece, não sei prq..

    E como faz para colocar o 'Compartilhe'?

    Abraço! =)

    ResponderExcluir
  6. Meu seu blog é show, not°10 desejo muito sucesso em sua caminhada e objetivo
    Um grande abraço

    ResponderExcluir
  7. O amigo deve ser como o dinheiro, cujo valor já conhecemos antes de termos necessidade dele,
    por isso não vou fazer tal e qual o avozinho infeliz: Em vão,por toda parte,os óculos procura
    Tendo-os na ponta do nariz! E eu aprendi que para se crescer como pessoa e preciso me cercar de gente mais inteligente do que eu. Obrigado por serem meus amigos.
    Um bom final de semana para voce.
    Abraços forte

    ResponderExcluir
  8. Não tava indo, li alguns outros tutoriais. Para quem não conseguiu tente coloca o primeiro código ANTES da linha "head". E o segundo código depois da linha "data:post.body" mesmo. Bom eu consegui, espero que consigam também! Abraços
    Leo

    ResponderExcluir
  9. Me Responde uma Pergunta...
    O Fundo desses Ícones, são De Acordo com o Site?
    OU é Branco Mesmo?

    Abraços....

    -> Beko

    ResponderExcluir
  10. Cara deveria ter descorberto você antes,suas dicas
    são objetivas e "fatais" valeuuu....

    ResponderExcluir
  11. Olá querido,

    achei o blog interessantíssimo. Pena que não funcionou no meu essa dica. Simplesmente não aparece nada. Muito muito estranho.

    Mesmo assim, obrigada.

    Abraço!

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.