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>
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('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>
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='"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='Url_FeedBurner' 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>
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
Parabéns, você teve um conteúdo publicado no Linka Nisso.
ResponderExcluirUm abraço da equipe LN.
Boa noite!
ResponderExcluirTudo 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
Idenaldooo! Conseguiii! hahaha
ResponderExcluirAtravé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
ola, Gabriela...
ResponderExcluirTente 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
Não consegui colocar.. Tentei no meu "Teste" primeiro, mas não aparece, não sei prq..
ResponderExcluirE como faz para colocar o 'Compartilhe'?
Abraço! =)
Meu seu blog é show, not°10 desejo muito sucesso em sua caminhada e objetivo
ResponderExcluirUm grande abraço
O amigo deve ser como o dinheiro, cujo valor já conhecemos antes de termos necessidade dele,
ResponderExcluirpor 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
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
ResponderExcluirLeo
Me Responde uma Pergunta...
ResponderExcluirO Fundo desses Ícones, são De Acordo com o Site?
OU é Branco Mesmo?
Abraços....
-> Beko
Cara deveria ter descorberto você antes,suas dicas
ResponderExcluirsão objetivas e "fatais" valeuuu....
Olá querido,
ResponderExcluirachei 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!