Cerca de três dias atrás eu estou andando ao redor da web e
encontrar um bom tutorial sobre como adicionar bookmarks sociais.
Na verdade, sobre o blogger, muitos têm escrito. Mas, eu
nunca encontrei com algo sexy. Sim, tem uma
título curto "add é sexy", muito estilista e também
sexy .... :). Por favor, veja a imagem abaixo.
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. Encontrei esse recuso no Free Template, porém como gosto sempre de mexer, fiz algumas alterações em relação ao original, deixando-o um pouco mais "abrasileirado".
Vamos lá...
1º Passo - Faça o backup do seu template atual. Se você ainda não sabe como fazer, neste post ensinamos como deve ser feito.
2º Passo - Vá em Layout -> Editar Htlm e MARQUE a opção "Expandir modelos de widgets"
3º Passo - Com a ajuda do Crtl+F encontre o seguinte trecho:
]]></b:skin>
Logo 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º Passo - 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 nofeedburner.
5º Passo - 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:
Se o widget não funcionam ou não aparecem,
Isso porque as imagens não seja ultrapassado.
Aqui está o pacote de imagem. Clique aqui para baixar
Após isso, altere o endereço da imagem no código
no Capítulo Um, etapa 2, que piscam
É isso ai, pessoal. Até a próxima.
0 comentários:
Postar um comentário