Widget compartilhar postagens em midias sociais
Autor: Ivan | Publicado: 2009-11-21T00:32:00Z



Olá leitores,



Sociais mídias aumentam a visibilidade de um blog e atraem inúmeras visitas sejam instantaneamente ou posteriormente. Encontrei um widget chamado sexy bookmaks que foi adaptado pelo Idenaldo Rodrigues do blogger na web, ele já havia realizado algumas modificações. No entanto, eu acrescentei algumas mídias sociais Brasileiras e exclui as mídias sociais Americanas, editei e crie algumas imagens que estavam ausentes. Retirei trechos de códigos que não tinham função, para caregar mais rapidamente, modifiquei o plano de fundo para que mesmo pessoas que não utilizam templates com a cor de fundo em branco pudessem colocá-lo em seus blogs e o resultado é este:





Este widget facilita muito o trabalho de otimização e incentiva a participação dos seus leitores com a possibilidade de compartilhar as notícias em sociais mídias. 








Para instalar o widget é necessário ter um leve conhecimento de HTML, no entanto qualquer pessoa que esteja familiarizado com a edição do HTML no bloger consegue instalá-lo facilmente.
&nbsp;O primeiro passo para instalar este widget é acessar seu blog e fazer login. Em seguida no painel de controle acesse o botão layout e selecione a opção editar HTML.
Faça um backup do seu template acessando a opção baixar modelo completo, para assegurar que qualquer mudança efetuada incorretamente possa ser revertida carregando a opção fazer upload.





Após fazer backup do template selecione a opção expandir modelos de widget, logo no inicio do código HTML do template antes da tag HEAD cole este código abaixo.


 &lt;style type='text/css'&gt; div.sexy-bookmarks { height:54px; background:#ffffff left bottom; position:relative; width:600px; }  div.sexy-bookmarks span.sexy-rightside { width:17px; height:50px; background:ffffff 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:50px !important; cursor:pointer !important; padding:0 !important; }  div.sexy-bookmarks ul.socials a { display:block !important; width:50px !important; height:29px !important; font-size:0 !important; color:transparent !important;  } .delicious { background-position:left top ; background:url('http://i48.tinypic.com/290vmmg.gif') no-repeat } .delicious:hover { background-position:left bottom ; background:url('http://i50.tinypic.com/282p8c9.gif') no-repeat } .digg { background-position:-1px top ; background:url('http://i45.tinypic.com/6irvj8.gif') no-repeat } .digg:hover { background-position:-1px bottom ; background:url('http://i45.tinypic.com/11r6gk6.gif') no-repeat } .technorati { background-position:-1px top; background:url('http://i45.tinypic.com/2qwiuzd.gif') no-repeat } .technorati:hover { background-position:-1px bottom; background:url('http://i50.tinypic.com/k54tcn.gif') no-repeat } .dihitt { background-position:-1px top ; background:url('http://i46.tinypic.com/qox1ug.gif') no-repeat } .dihitt:hover { background-position:-1px bottom ; background:url('http://i45.tinypic.com/xqih.gif') no-repeat }  .blogblogs { background-position:-1px top ; background:url('http://i49.tinypic.com/9swbiw.gif') no-repeat } .blogblogs:hover { background-position:-1px bottom ; background:url('http://i47.tinypic.com/fji7md.gif') no-repeat } .rec6 { background-position:-1px top ; background:url('http://i49.tinypic.com/206zyok.gif') no-repeat } .rec6:hover { background-position:-1px bottom ; background:url('http://i45.tinypic.com/15r1abq.gif') no-repeat } .facebook { background-position:-1px top ; background:url('http://i45.tinypic.com/5xvp5u.gif') no-repeat } .facebook:hover { background-position:-1px bottom ; background:url('http://i49.tinypic.com/hrlsp1.gif') no-repeat } .twitter { background-position:-1px top ; background:url('http://i49.tinypic.com/15oflkw.gif') no-repeat } .twitter:hover { background-position:-1px bottom ; background:url('http://i46.tinypic.com/2eogm60.gif') no-repeat } .syndicate { background-position:-1px top ; background:url('http://i47.tinypic.com/oaargj.gif') no-repeat } .syndicate:hover { background-position:-1px bottom ; background:url('http://i50.tinypic.com/wk36ux.gif') no-repeat } .email { background-position:-1px top ; background:url('http://i50.tinypic.com/2r633mg.gif') no-repeat } .email:hover { background-position:-1px bottom ; background:url('http://i49.tinypic.com/2dhsigj.gif') no-repeat } .osegredodosblogs { background-position:right top ; background:url('http://i50.tinypic.com/so25hg.gif') no-repeat } .osegredodosblogs:hover { background-position:right bottom ; background:url('http://i49.tinypic.com/2ldj6o2.gif') no-repeat }  &lt;/style&gt;





Pressionando as teclas Ctrl F simultaneamente, digite o texto na caixa de pesquisa data:post.body o ultimo texto de seu template. Cole em seguida de data:post.body o trecho abaixo:


&lt;div class='sexy-bookmarks'&gt;&lt;ul class='socials'&gt;&lt;li class='delicious'&gt;&lt;a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='digg'&gt;&lt;a expr:href='" http://digg.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='technorati'&gt;&lt;a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='dihitt'&gt;&lt;a expr:href='" http://www.dihitt.com.br/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='blogblogs'&gt;&lt;a expr:href='" http://blogblogs.com.br/meu-blogblogs/bookmarks/adicionar?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='rec6'&gt;&lt;a expr:href='" http://rec6.via6.com//link.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='facebook'&gt;&lt;a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='twitter'&gt;&lt;a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='syndicate'&gt;&lt;a href='Coloque aqui o seu endereço do feedburn'title='Assinar feeds RSS'/&gt;&lt;/li&gt;  &lt;li class='email'&gt;&lt;a expr:href='" mailto:?subject=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'/&gt;&lt;/li&gt;  &lt;li class='osegredodosblogs'&gt;&lt;a href='http://osegredodosblogs.blogspot.com/2009/11/compartlhar-postagens-midias-sociais.html'title='Adapted'target='_blank'/&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;span class='sexy-rightside'/&gt;&lt;/div&gt;


Acesse a opção visualizar e se estiver tudo certo salve.
Para alterar a cor do plano de fundo modifique o código hexadecimal na linha background substiuindo o código pela cor que desejar. Altere também onde está escrito coloque aqui o seu endereço do Feedburn para o seu endereço URL o feedburn.&nbsp;Qualquer dúvida deixe um comentário.