Compartilhe seus posts facilmente – Blogger
Compartilhar posts ficou ainda mais fácil. Aqui mesmo no Sem Preceito todos os meus posts possuem um código que exibe imagens de sites de compartilhamento que você podera enviar meus posts para eles. Este código ainda esta na sua primeira versão, ele exibi somente alguns sites, mas se você quer mais sites de compartilhamento recomendo que faça uma pesquisa no Google ou use o código do SoBoo, da empresa SEO Master, sendo que neste último é necessário o cadastro.
Por enquanto os sites que compõem este widget são:
Link Ninja, BlogBlogs, Rec6, Uêba, Twitter, Del.icio.us, Digg, Technorati, Reddit, Stumbleupon e Facebook. O widget conta também com uma imagem para o seu feed.
Se você quiser peça mais sites por comentários e/ou por formulário de contato.
Instalando o widget:
Vá em Layout » Editar HTML e faça um backup do seu template. Depois do backup feito adicione o código abaixo antes da tag ]]></b:skin>
/* Redes Sociais ----------------------------------------------- */
.redesociais{ line-height: 1.4em; text-align:left; margin:0; padding:0; }
.redesociais img{ border:0; margin:0; padding:0; }
Ficando assim:
/* Redes Sociais ----------------------------------------------- */
.redesociais{ line-height: 1.4em; text-align:left; margin:0; padding:0; }
.redesociais img{ border:0; margin:0; padding:0; }
]]></b:skin>
Clique em “Salvar”.
Agora marque a opção “Expandir modelos de widgets” e procure(Ctrl+F) por:
<div class=‘post-footer’>
Agora acrescente o código abaixo depois de <div class=’post-footer’>.
<p class='redesociais'><a expr:href='"http://linkninja.com.br/enviar_link.php?pn=linkada=" + data:post.url' target='_blank' title='Enviar para o Link Ninja'><img alt='Enviar para o Link Ninja' border='0' height='16' src='http://linkninja.com.br/ferramentas/enviar-para-o-link-ninja.jpg' width='16'/></a>
<a expr:href='"http://blogblogs.com.br/meu-blogblogs/bookmarks/adicionar?bookmark_url[url]=" + data:post.url + "&bookmarking[description]=" + data:post.title + "&commit=Gravar+Bookmark"' target='_blank' title='Enviar para o BlogBlogs'><img height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/blogblogs.png' width='16'/></a>
<a expr:href='"http://rec6.via6.com/link.php?url=" + data:post.url + "&titulo=" + data:post.title' target='_blank' title='Enviar para o REC6'><img height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/botao_rec6_16x16.gif' width='16'/></a>
<a expr:href='"http://ueba.com.br/NovoLink?url=" + data:post.url + "&origem=" + data:blog.title' target='_blank' title='Enviar para o Uêba'><img height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/ueba1.png' width='16'/></a>
<a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/twitter.png' width='16'/></a>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/delicious.png' width='16'/></a>
<a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/digg.png' width='16'/></a>
<a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/tech.png' width='16'/></a>
<a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/reddit.png' width='16'/></a>
<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/stum.png' width='16'/></a>
<a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/facebook.png' width='16'/></a>
<a href='/feeds/posts/default'><img border='0' height='16' src='http://i253.photobucket.com/albums/hh52/luanbochi/rss-1.png' width='16'/></a></p>
Clique em “Visualizar”, se estiver tudo certo, clique em “Salvar”.
Possivelmente as imagens aparecerão com bordas, como no exemplo abaixo:
Se quiser deixar assim, tudo bem. Mas se quiser tirar as bordas e os espaçamentos siga o tutorial abaixo.
Procure (Ctrl+F) em seu código por .post img o código que irá aparecer será parecido com este:
.post img { padding:4px; border:1px solid $bordercolor; }
Substitua agora o .post por .post-body ficando assim:
.post-body img { padding:4px; border:1px solid $bordercolor; }
Clique em “Salvar” e pronto!
Se tiver problemas nos códigos entre em contato, mas dificilmente dará problema, pois testei em vários templates. Se quiser você pode trocar as imagens e/ou incrementar mais o código colocando um estilo na tag .redesociais.
Gostou deste tutorial? Assine o feed e me siga no twitter!
Créditos: IndiceBlogger ~ Menu de links sociais no blogger.
oi eu não consigo por links de compartilhamento no meu blog, eu queria conseguir por nem que seja o mais simples, o twitter por exemplo, me ajuda please :/
@Jééh, você segui o tutorial certinho? Eu fiz aqui e funcionou perfeitamente.
vou tentar novamente
@Jééh, se não conseguir entre em contato comigo pelo formulário de contato. Assim poderei te ajudar melhor.
Oi Luan, não estou conseguindo colocar… aparece o seguinte erro:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “class”.
Descobri qual foi o problema. São as aspas. Tente copiar o código que esta nesse bloco de notas: http://docs.google.com/Doc?docid=0AbUO3PBJu5n7ZGY3azgyMnZfNjVnc3Izd3Nkeg&hl=pt_BR
oi @luam então acho que andei perto de conseguir, só que nas postagens que eu não tem imagen fica aparecendo um olho( acho que é isso) no lugar onde devia ser de uma imagem, o que eu faço? eu não vou concluir pra ficar dessa forma/fato ~>fotu de como se encontra
@Jééh, é meio culpa do script de resumo de post que você usa. Ele pega a primeira imagem do post todo e exibe no resumo. Se você não colocar uma imagem, ela vai aparecer.
@Luan então eu sou obrigada a por uma imagem em tods os posts?
Eu não diria obrigada. Mas se você não quiser exibir a imagem do Link Ninja seria bom colocar uma imagem. Pois não achei outra solução.
Opa! Valeu aí Luan Felipe! Era isso o que eu estava precisando!!
Aqui funcionou certinho
eu fiz e deu certinho… vlw gent!!