Este Widget muito estiloso oferece um meio simples para que seu artigos sejam, difundidos rapidamente pois o leitor pode envia-lo para diversos meios de divulgação rápido com um clique, além de ser bonito e ter a tecnologia do CSS 3 tornando as bordas arredondas sem nenhum artifício de imagem. Para instala-lo veja o pequeno tutorial abaixo:
Instalando
1) Acesse o painel do Blogger2) Vá em Layout->Editar HTML->Marque Expandir Modelos de Widgets
3) Procure pelo seguinte trecho, utilize as tecla CTRL e F:
<div class='post-footer-line post-footer-line-3'>Adicione abaixo do código anterior o seguinte:<div id='Compartilhar'>
<style type='text/css'>
#widget {
background:#dde9ff;
border: solid 1px;
border-color:#4dbfe5;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
</style>
<table id='widget'>
<tr>
<td><a expr:href='"http://twitter.com/home/?status=" + data:post.title + "%20" + data:post.url' title='Enviar para o Twitter'><img height='40px' src='http://4.bp.blogspot.com/_8AL-4bHE9zs/S7vUeD5_POI/AAAAAAAABmQ/937Kpo0P4Ok/1.png' widht='40px'/></a></td>
<td><a expr:href='"http://promote.orkut.com/preview?nt=orkut.com&du=" + data:post.url + "&tt=" + data:post.title + "&tn=http://api.thumbalizr.com/?url=" + data:post.url + "&width=250&cn=@noticiaeblog"' target='_blank' title='Enviar para o Orkut'><img height='40px' src='http://3.bp.blogspot.com/_8AL-4bHE9zs/S7vUe4jmJQI/AAAAAAAABmU/l--iVXl7_dc/2.png' widht='40px'/></a></td>
<td><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' title='Salvar no Delicious'><img height='40px' src='http://4.bp.blogspot.com/_8AL-4bHE9zs/S7vUf-ukMuI/AAAAAAAABmY/vjzziRfab5Q/3.png' widht='40px'/></a></td>
<td><a expr:href='"http://www.reddit.com/submit?url=" + data:post.url' title='Enviar para o Reddit'><img height='40px' src='http://1.bp.blogspot.com/_8AL-4bHE9zs/S7vUhfLtF5I/AAAAAAAABmc/U9L175tmLq4/4.png' widht='40px'/></a></td>
<td><a expr:href='"http://digg.com/submit?url=" + data:post.url' title='Enviar para o Digg'><img height='40px' src='http://2.bp.blogspot.com/_8AL-4bHE9zs/S7vUh2oXRUI/AAAAAAAABmg/g-JnYAH5IN4/5.png' widht='40px'/></a></td>
<td><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='Enviar para o Stumbleupon'><img height='40px' src='http://2.bp.blogspot.com/_8AL-4bHE9zs/S7vUjONt-jI/AAAAAAAABmk/Y3gVcTjI68c/6.png' widht='40px'/></a></td>
</tr>
</table>
</div>Obs: Altere o trecho em vermelho por uma descição para todos os posts do seu blog.4) Salve as alterações e visualize.
11 Comentários
nossa.. realmente era o q faltava pra mim.. ja procurei tanto e num axava..
mas akii.. tem cmo trocar a cor azul ao redor por outra?
@Daniele, tem sim basta modificar este trecho em negrito border-color:#4dbfe5;
obrigadaaa
Que show, muito bom
mas eu ainda prefiro os Sexy Bookmarks (que levanta quando você passa o mouse) tem mais redes sociais
http://www.jethot.com.br/2010/03/botoes-de-compartilhar-para-o-blogger.html
Seu blog tem todas as informações que um blogueiro precisa. Amei seus posts, eles são bastante explicativos. Mandei um e-mail para você.Este post é fantástico. Já salvei outros posts no bloco de notas para inserir no meu blog e este será o próximo.
Jc Denton .. esse que você mandou ai nao presta, é muita coisa e ainda por cima sempre da algo errado aki no layout
Amigão, parabéns pelo Blog.
Tenho duas dúvidas:
1ª: esse fundo meio azul por detrás dos bonequinhos pode ficar preto ? Caso a resposta seja sim, me fale como e se precisar de algum código, já posta ele aqui pra mim por favor.
2ª: Tem como diminuir um pouquinho tamanho desse serviço ?
Obrigado desde já!
eu não entendi essa parte em vermelho
como assim descição?o q quer dizer isso?
Muito obrigado funcionou!
Nunca acho essa linha e fico sem fazer um monte de coisa=///
@Thata'
Oi Thata seguinte:. nesta parte em vermelho(noticiaeblog) vc apaga o que está escrito lá(noticiaeblog)e coloca o nome do teu blog Ex:. thata.blogspot
(não precisa colocar .com)
abraço
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.