Saiba como :"personalizar os botões para compartilhar Blogger "
Autor: edilene bds | Publicado: 2014-03-07T10:13:00-08:00



fonte:
oloblogger



PERSONALIZAR LOS BOTONES PARA COMPARTIR DE BLOGGER









No hace mucho comenté lo de la incorporación del&nbsp;botón Pinterest en el gadget de botones socialesde Blogger y en aquel momento recordé que tenía pendiente (entre otras muchas cosas), explicaros la manera en que se pueden personalizar esos botones para cambiar un poco su aspecto.Los botones originales están construidos mediante&nbsp;CSS sprites&nbsp;y por eso técnicamente es fácil cambiarlos mediante la simple sustitución de esa imagen que sirve de base. No obstante, como Blogger aplica automáticamente su propio CSS, también será necesario ajustar un poco esas reglas.Por otra parte está el botón +1 que se añade de manera distinta, por lo que veremos asimismo cómo cambiar su código para que estéticamente sea del mismo estilo que los otros.Veamos paso a paso todo esto y al final el código para hacerlo de una sola vez.

Diseñar una imagen con los nuevos botones
Esta es la parte en la que la maña de cada cual marcará el resultado final. Se trata de construir una sola imagen que contenga de forma ordenada las imágenes individuales de todos los botones.En un principio lo más cómodo sería tomar la imagen de la izquierda que es la que usa Blogger, cambiar su contenido respetando los límites para cada botón y por último, sustituir la original por la nuestra. Este es el caso sencillo, pero para ver más casos ya voy a empezar a&nbsp;destrozar&nbsp;cosas.De entrada no las voy a hacer de 18px como las originales, sino de 24px. Tendrán fondo transparente y en lugar de tres imágenes por botón voy a usar sólo dos, una para el estado normal en tonos de gris y otra a color para cuando se pase el puntero por encima.Lo básico es ser cuidadosos y que todas las imágenes estén ubicadas&nbsp;exactamente dentro de un cuadrado imaginario de 24x24px (en este ejemplo) y que cada uno esté bien acoplado con sus adyacentes sin dejar ni un píxel de más o de menos.Para más información ver este otro artículo sobre cómo hacerRollover con CSS y sprites&nbsp;y este otro sobre&nbsp;Generadores de sprites.¿Que de momento no queréis calentaros la cabeza con esto? Pues nada, usad esta imagen de la izquierda que es la que yo voy a utilizar en el ejemplo.

Añadir estilo para sobreescribir el de Blogger
Para el estilo de sus botones, Blogger mete automáticamente&nbsp;CSS&nbsp;cuando carga cada página, razón por la que no es visible en la plantilla y no lo podemos modificar, pero lo que sí podemos hacer es añadir nuestro propio CSS e incluir&nbsp;!importantdónde sea necesario para que nuestras reglas tengan prioridad.Hay muchas que no hay que modificar y como al final del post incluyo las necesarias, no voy a hacer aquí una relación exhaustiva y sólo voy a destacar la que incorpora el&nbsp;sprite. Es esta y ya incluye la nueva imagen que os mostré antes:

.share-button {width: 24px !important;height: 24px !important;background: url(http://4.bp.blogspot.com/-UKVaH5Nkc2s/UwizNGFng1I/AAAAAAAAOgc/69D47XdF9NA/s1600/sprite-redes24.png) no-repeat left !important;overflow: hidden;margin: 2px !important;position: relative;}
Nótese que he tenido que redimensionar a 24px y que he incorporado (opción) un pequeño margen para que los botones no queden todos pegados.

Cambiar el código del botón+1
Como supongo que lo que todos queremos es guardar una estética uniforme y el +1 siempre desentona un poco con el resto, será necesario modificar en la plantilla el código del gadget que genera este botón en concreto para así hacerlos todos homogéneos.&nbsp;Para ello editamos el gadget con&nbsp;id='shareButtons'&nbsp;y cambiamos lo que a continuación veis marcado en verde por lo siguiente. Con el cambio dejamos también el código original inutilizado con símbolos de comentarios por si más adelante queremos volver a cómo estaba.

&lt;b:if cond='data:top.showDummy'&gt;&lt;a class='goog-inline-block share-button sb-google' expr:href='&amp;quot;https://plus.google.com/share?url=&amp;quot; + data:post.url' expr:onclick='&amp;quot;window.open(this.href, \&amp;quot;_blank\&amp;quot;, \&amp;quot;height=430,width=640\&amp;quot;); return false;&amp;quot;' title='Compartir en Google+' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.shareToGoogleMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;!--&lt;div class='goog-inline-block dummy-container'&gt;&lt;data:post.dummyTag/&gt;&lt;/div&gt;--&gt;&lt;/b:if&gt;
Con eso el botón pasará de ser un +1 a un simple enlace que abre una ventana emergente para compartir en Google+, que es precisamente lo mismo que hacen el resto de botones de las otras redes (más información sobre&nbsp;URL's para compartir en redes sociales).

Un ejemplo completo
Si queréis ver cómo queda esto antes de lanzaros a crear vuestros propios botones o incluso si estos del ejemplo os gustan, podéis hacer el siguiente cambio en vuestra plantilla.Buscáis la línea

&nbsp;&lt;b:includable id='shareButtons' var='post'&gt;&nbsp;

y localizáis su cierre&nbsp;

&lt;/b:includable &gt;,&nbsp;

seleccionais todo el

includable&nbsp;

con las dos anteriores etiquetas de apertura y cierre inclusive y las sustituis por esto otro. Y si no queréis copiar y pegar tanto, pues simplemente seguir las indicaciones de los comentarios marcados en verde para cambiar el final del gadget y a continuación añadid el estilo.

&lt;b:includable id='shareButtons' var='post'&gt;&lt;b:if cond='data:top.showEmailButton'&gt;&lt;a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &amp;quot;&amp;amp;target=email&amp;quot;' expr:title='data:top.emailThisMsg' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.emailThisMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/b:if&gt;&lt;b:if cond='data:top.showBlogThisButton'&gt;&lt;a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &amp;quot;&amp;amp;target=blog&amp;quot;' expr:onclick='&amp;quot;window.open(this.href, \&amp;quot;_blank\&amp;quot;, \&amp;quot;height=270,width=475\&amp;quot;); return false;&amp;quot;' expr:title='data:top.blogThisMsg' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.blogThisMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/b:if&gt;&lt;b:if cond='data:top.showTwitterButton'&gt;&lt;a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &amp;quot;&amp;amp;target=twitter&amp;quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.shareToTwitterMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/b:if&gt;&lt;b:if cond='data:top.showFacebookButton'&gt;&lt;a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &amp;quot;&amp;amp;target=facebook&amp;quot;' expr:onclick='&amp;quot;window.open(this.href, \&amp;quot;_blank\&amp;quot;, \&amp;quot;height=430,width=640\&amp;quot;); return false;&amp;quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.shareToFacebookMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/b:if&gt;&lt;b:if cond='data:top.showOrkutButton'&gt;&lt;a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &amp;quot;&amp;amp;target=orkut&amp;quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.shareToOrkutMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/b:if&gt;&lt;b:if cond='data:top.showPinterestButton'&gt;&lt;a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &amp;quot;&amp;amp;target=pinterest&amp;quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.shareToPinterestMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/b:if&gt;&lt;b:if cond='data:top.showDummy'&gt;&lt;!-- CODIGO AÑADIDO --&gt;&lt;a class='goog-inline-block share-button sb-google' expr:href='&amp;quot;https://plus.google.com/share?url=&amp;quot; + data:post.url' expr:onclick='&amp;quot;window.open(this.href, \&amp;quot;_blank\&amp;quot;, \&amp;quot;height=430,width=640\&amp;quot;); return false;&amp;quot;' title='Compartir en Google+' target='_blank'&gt;&lt;span class='share-button-link-text'&gt;&lt;data:top.shareToGoogleMsg/&gt;&lt;/span&gt;&lt;/a&gt;&lt;!-- FIN CODIGO AÑADIDO E INICIO CODIGO ANULADO &lt;div class='goog-inline-block dummy-container'&gt;&lt;data:post.dummyTag/&gt;&lt;/div&gt;--&gt;&lt;/b:if&gt;&lt;style&gt;.post-share-buttons {text-align: center;width: 100%;}.share-button {width: 24px !important;height: 24px !important;background: url(https://dl.dropboxusercontent.com/u/57549161/Imagenes/sprite-redes24.png) no-repeat left !important;overflow: hidden;margin: 2px !important;position: relative;}a.sb-email {background-position: 0 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}a.sb-blog {background-position: -24px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}a.sb-twitter {background-position: -48px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}a.sb-facebook {background-position: -72px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}a.sb-pinterest {background-position: -96px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}a.sb-google {background-position: -120px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}a:hover.sb-email {background-position: 0 -24px !important;}a:hover.sb-blog {background-position: -24px -24px !important;}a:hover.sb-twitter {background-position: -48px -24px !important;}a:hover.sb-facebook {background-position: -72px -24px !important;}a:hover.sb-pinterest {background-position: -96px -24px !important;}a:hover.sb-google {background-position: -120px -24px !important;}&lt;/style&gt;&lt;/b:includable&gt;
He puesto el CSS necesario a continuación del gadget para una más fácil sustitución, pero también podéis ponerlo entre las etiquetas&nbsp;skin&nbsp;(sin las etiquetas&nbsp;style&nbsp;en ese caso).Si lo probáis veréis que también incluí un pequeño efecto para el hover con&nbsp;transition&nbsp;y si no, pues aquí abajo tendéis una demo del resultado pero con los enlaces anulados.




..."otro post al azar&nbsp;por si le encuentras utilidad o quizás prefieres ser más metódico "












fonte:
oloblogger


traduzido:





PERSONALIZE BOTÕES PARA COMPARTILHAR BLOGGER






 



Não muito tempo atrás eu comentei sobre a adição de&nbsp;botão Pinterest nos botões sociais gadgets&nbsp;para Blogger e naquele momento eu me lembrei que estava pendente (entre outras coisas), explique como você pode personalizar esses botões para mudar sua aparência ligeiramente .botões originais são construídos utilizando&nbsp;CSS sprites&nbsp;e que é tecnicamente fácil de mudar, simplesmente substituindo a imagem subjacente.&nbsp;No entanto, como Blogger aplicar automaticamente o seu próprio CSS, você também precisa de um pouco de ajustes essas regras.Depois, há o botão +1 é adicionado de forma diferente, assim também ver como alterar seu código para que ele seja esteticamente o mesmo estilo como os outros.&nbsp;Considere este passo a passo e, finalmente, o código para fazer uma uma vez.

Criando uma imagem com os novos botões
Esta é a parte em que a habilidade de cada um marcar o resultado final.&nbsp;É sobre a construção de uma única imagem contendo imagens individuais ordenados de todos os botões.&nbsp;Um princípio tão confortável seria para tirar a foto do lado esquerdo que está usando o Blogger, alterar o seu conteúdo dentro dos limites para cada botão e Finalmente, substituir o original com o nosso.&nbsp;Este é o caso mais simples, mas para ver mais casos e vai começar adestruir&nbsp;&nbsp;as coisas.&nbsp;início eu não gosto da 18px originais, mas 24px.&nbsp;Ter fundo transparente e colocar três imagens de botão vai usar apenas dois, um para estado normal em tons de cinza e outra cor quando o ponteiro passa sobre.&nbsp;coisa básica é ter cuidado para que todas as imagens são localizado exatamente dentro de um quadrado imaginário 24x24px (neste exemplo) e todos estão bem acoplado ao seu pixel adjacente sem deixar mais ou menos.&nbsp;Para mais informações veja este outro artigo sobre como&nbsp;Rollover com CSS e sprites&nbsp;e este sobre&nbsp;geradores de sprites&nbsp;.&nbsp;comentários Nós não queremos para aquecê-lo de cabeça com isso?&nbsp;Nada, fazer uso desta imagem à esquerda é a que eu vou usar no exemplo.

Adicione estilo para substituir o Blogger
Para estilizar seus botões, Blogger reproduz automaticamente CSS ao carregar cada página, por isso não é visível no modelo e não pode mudar, mas o que podemos fazer é adicionar o nosso próprio CSS para incluir&nbsp;! importante&nbsp;quando necessário que as nossas regras têm prioridade.&nbsp;Há muitos que não tem que mudar como o fim do post incluído o necessário, não vou fazer uma lista exaustiva aqui e eu vou apenas destacar incorporando o&nbsp;duende&nbsp;.É isso e já inclui a nova imagem que eu mostrei anteriormente:

. Share-botão {&nbsp;width: 24px importante;&nbsp;altura: 24px importante;&nbsp;fundo:&nbsp;! Importante deixado no-repeat;&nbsp;overflow: hidden;&nbsp;margin: 2px importante;!&nbsp;position: relative;&nbsp;}
Note-se que eu tinha que redimensionar para 24px e eu construí (opcional) uma pequena margem para que os botões não ficam todos presos.

Altere o código de um botão
Porque acho que o que todos nós queremos é manter uma estética uniforme e um pouco +1 sempre em desacordo com o resto precisa ser alterado no código do modelo que gera este gadget botão especificamente para eles e todo homogêneo.&nbsp;Para isso edite o gadget com&nbsp;id = 'shareButtons'&nbsp;e, em seguida, mudar o que vê verde marcado pela seguinte.&nbsp;Com a mudança também deixou os símbolos dos códigos originais desabilitado comentar se você mais tarde querer voltar a ser como era.

&lt;b:if cond='data:top.showDummy'&gt; &lt;a class = "goog-inline-block-botão de compartilhamento sb-google 'expr: href ='" https://plus.google.com/share? url = "+ dados: post.url 'expr: onclick =" "window.open (this.href, \" _blank \ ", \" height = 430, width = 640 \ ") retorno false; "" title = "Share on 'target =' _blank Google+ '&gt; &lt;span class='share-button-link-text'&gt; &lt;data:top.shareToGoogleMsg/&gt; &lt;/ span&gt; &lt;/ a&gt;&nbsp;&lt;! - &lt;div class='goog-inline-block dummy-container'&gt; &lt;data:post.dummyTag/&gt; &lt;/ div&gt; -&gt;&nbsp;&lt;/ b: if&gt;
Com isso, o botão vai mudar a partir de um 1 de um simples link que abre um pop-up para compartilhar no Google+, que é precisamente o que fez os outros botões nas outras redes (mais sobre&nbsp;URL de compartilhar em redes sociais&nbsp;) .



Um exemplo completo
Se você quiser ver como fica antes de jogá-lo para criar seus próprios botões ou mesmo se o exemplo que você gosta, você pode fazer as seguintes alterações ao seu modelo.&nbsp;você linha procurando&nbsp;

&lt;b:includable id='shareButtons' var='post'&gt;&nbsp;

localizáis e fechamento&nbsp;

&lt;/ b: includable&gt;&nbsp;,

&nbsp;você seleccionais tudo&nbsp;

includable

com as duas tags de abertura e fechamento anteriores e mesmo assim sustituis outro.&nbsp;E se você não vai copiar e colar esta causa basta seguir as direções de comentários marcados em verde para mudar o final do gadget e, em seguida, adicione-vos diante.

&lt;b:includable id='shareButtons' var='post'&gt;&nbsp;&lt;b:if cond='data:top.showEmailButton'&gt; &lt;a class = "goog-inline-block-botão de compartilhamento sb-email 'expr: href = 'data: post.sharePostUrl + "&amp; target = email"' expr: title = 'data: top.emailThisMsg' target = '_blank'&gt; &lt;span class='share-button-link-text'&gt; &lt;dados: top.emailThisMsg /&gt; &lt;/ span&gt; &lt;/ a&gt; &lt;/ b: if&gt; &lt;b:if cond='data:top.showBlogThisButton'&gt; &lt;a class = "goog-inline-block-botão de compartilhamento sb-blog ' expr: href = 'data: post.sharePostUrl + "&amp; target = blogue" expr: onclick = "" window.open (this.href, \ "_blank \", \ "height = 270, width = 475 \ ") return false;" 'expr: title =' data: 'target =' _blank top.blogThisMsg&gt; &lt;span class='share-button-link-text'&gt; &lt;dados: top. blogThisMsg /&gt; &lt;/ span&gt; &lt;/ a&gt; &lt;/ b: if&gt; &lt;b:if cond='data:top.showTwitterButton'&gt; &lt;a class = "goog-inline-block-botão de compartilhamento sb-twitter 'expr: href = 'data: post.sharePostUrl + "&amp; target = Twitter"' expr: title = 'data: top.shareToTwitterMsg' target = '_blank'&gt; &lt;span class='share-button-link-text'&gt; &lt; dados: top.shareToTwitterMsg /&gt; &lt;/ span&gt; &lt;/ a&gt; &lt;/ b: if&gt; &lt;b:if cond='data:top.showFacebookButton'&gt; &lt;a class = 'goog-inline-block-botão de compartilhamento sb- facebook 'expr: href =' data: post.sharePostUrl + "&amp; target = facebook" 'expr: onclick = "" window.open (this.href, \ "_blank \", \ "height = 430, width = 640 \ ") return false;" 'expr: title =' data: 'target =' _blank top.shareToFacebookMsg&gt; &lt;span class='share-button-link-text'&gt; &lt;dados: top.shareToFacebookMsg /&gt; &lt;/ span&gt; &lt;/ a&gt; &lt;/ b: if&gt; &lt;b:if cond='data:top.showOrkutButton'&gt; &lt;a class = "goog-inline-block-botão de compartilhamento sb-orkut ' expr: href = 'data: post.sharePostUrl + "&amp; target = orkut"' expr: title = 'data: top.shareToOrkutMsg' target = '_blank'&gt; &lt;'share-button-text-link' span class = &gt; &lt;data:top.shareToOrkutMsg/&gt; &lt;/ span&gt; &lt;/ a&gt; &lt;/ b: if&gt; &lt;b:if cond='data:top.showPinterestButton'&gt; &lt;goog-inline-block-botão de compartilhamento de classe = ' sb-pinterest 'expr: href =' data: post.sharePostUrl + "&amp; target = pinterest" 'expr: title =' data: 'target =' _blank top.shareToPinterestMsg "&gt; &lt;span class = 'botão de share- link-texto '&gt; &lt;data:top.shareToPinterestMsg/&gt; &lt;/ span&gt; &lt;/ a&gt; &lt;/ b: if&gt; &lt;b:if cond='data:top.showDummy'&gt;&nbsp;&lt;- código adicionado -&gt;!&nbsp;&lt;a class = "goog-inline-block-botão de compartilhamento sb-google 'expr: href ='" https://plus.google.com/share?url = "+ dados: post.url 'expr: onclick = '"window.open (this.href, \" _blank \ ", \" height = 430, width = 640 \ ") return false;" "title =" Compartilhar no Google+ "target = '_blank'&gt; &lt;span class='share-button-link-text'&gt; &lt;data:top.shareToGoogleMsg/&gt; &lt;/ span&gt; &lt;/ a&gt;&nbsp;&lt;- FIM ADICIONADO CODE CÓDIGO E PRINCIPAL CANCELADO &lt;div class = ' goog-inline-block manequim-container&gt; &lt;data:post.dummyTag/&gt; &lt;/ div&gt; -&gt;&nbsp;&lt;/ b: if&gt;&nbsp;&lt;style&gt;&nbsp;. pós-share-buttons {text-align: center; width: 100 %;}&nbsp;. botão share {width: 24px importante, height: 24px importante; fundo: url (https://dl.dropboxusercontent.com/u/57549161/Imagenes/sprite-redes24.png) esquerdo no-repeat ! importante; overflow: hidden; margin: 2px importante, position: relative;}&nbsp;a.sb-mail {background-position: 0 0 importantes;-moz-transição: todos os 0,5 s;-webkit-transição: todos os 0,5 s , a transição: todos os 0,5 s;}&nbsp;a.sb-blog {background-position:-24px 0 importantes;-moz-transição: todos os 0,5 s;-webkit-transição: todos os 0,5 s; transição: todos os 0,5 s;}&nbsp;uma . sb-twitter {background-position:-48px 0 importante;-moz-transition: todos os 0,5 s;-webkit-transition: todos os 0,5 s; transição: todos os 0,5 s;}&nbsp;a.sb-facebook {background-position: importante-72px 0;-moz-transition: todos os 0,5 s;-webkit-transition: todos os 0,5 s; transição: todos os 0,5 s;}&nbsp;a.sb-pinterest {background-position:-96px 0 importante;-moz-! transição: todos os 0,5 s;-webkit-transição: todos os 0,5 s; transição: todos os 0,5 s;}&nbsp;a.sb-google {background-position:-120px 0 importante;-moz-transition: todos os 0,5 s;-webkit- transição: todos os 0,5 s; transição: todos os 0,5 s;}&nbsp;a: hover.sb-mail {background-position: 0-24px importante;}&nbsp;TO hover.sb-blog {background-position:-24px 24px-importante! ,}&nbsp;a: hover.sb-twitter {background-position:-48px 24px-! importante;}&nbsp;TO hover.sb-facebook {background-position:-72px 24px-! importante;}&nbsp;TO hover.sb-pinterest { background-position:-96px 24px-! importante;}&nbsp;TO hover.sb-google {background-position:-120px-24px! importante;}&nbsp;&lt;/ style&gt;&nbsp;&lt;/ b: includable&gt;
..."CSS necessário, em seguida, o gadget para fácil substituição, mas também pode colocar entre as tags&nbsp;pele&nbsp;(sem marcas de&nbsp;estilo&nbsp;nesse caso.)&nbsp;Se você testar você vai ver que eu também incluiu um pequeno efeito em foco com&nbsp;a transição&nbsp;e se não, porque aqui você tende a demonstração do resultado, mas com ligações canceladas."






Vemos&nbsp;outro post aleatório&nbsp;se você achar que é útil ou talvez prefira ser mais metódica&nbsp;



fonte:
oloblogger



&nbsp;
&nbsp;