"Hoy es: . Comparte tu Blog Hablachento a tus amigos en tus redes sociales...
Juegos divertidos para que los conozcas
Cuanto Quieres Ganar Tu Eliges la Cantidad DonInfinity
» »Unlabelled » Añade a tu Blogger botones de Facebook, Twitter, Google+, LinkedIn, Pinteret, Pocketa en un solo paso
jueves, 7 de mayo de 2015





A continuación te voy a enseñar 3 formas de añadir a tu Blogger botones de redes sociales como Facebook, Twitter, Google+, LinkedIn, Pinteret, Pocketa para que puedan tus visitantes y lectores compartir en las redes sociales tus temas o noticias que publiques en tu blogger, son pasos muy sencillo solo debes de prestar atención en cuanto a copiar y pegar los códigos en el lugar correcto de tu Blogger, trabajaremos con la opción PLANTILLA > Editar HTML.

Veamos la primera apariencia de estos botones:

  Si te gusta esa apariencia en tu blogger comencemos entonces a trabajar en insertar este código:

Código HTML:
<!-- BOTONES SOCIALES GETSHARES --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $(&quot;#buttons&quot;),
counter: {
position: &quot;inside&quot;
},
share: {
url: &quot;<data:post.canonicalUrl/>&quot;,
imageUrl: &quot;<data:post.firstImageUrl/>&quot;,
message: &quot;<data:post.title/>&quot; + &quot; <data:post.canonicalUrl/> Vía: @oloman&quot;
}
};
new GetShare($.extend(settings, {network: &quot;googleplus&quot;}));
new GetShare($.extend(settings, {network: &quot;twitter&quot;}));
new GetShare($.extend(settings, {network: &quot;facebook&quot;}));
new GetShare($.extend(settings, {network: &quot;linkedin&quot;}));
new GetShare($.extend(settings, {network: &quot;pinterest&quot;}));
new GetShare($.extend(settings, {network: &quot;pocket&quot;}));
//Más redes en http://getshar.es/
}).call(this);
</script>
</b:if>

Debes de buscar el lugar adecuado donde se pueda ver en cada tema del Blogger en mi caso lo copie y lo pegue después del código : <div class='blog-pager' id='blog-pager'>

Fin de la primera apariencia, pasemos a la siguiente apariencia de los botones Facebook, Twitter, Google+, LinkedIn, Pinteret, Pocketa en tu Blogger:

 Esto son botones para compartir y una Sharebar Responsive sin plugin.


 

 Paso 1: Muy sencillo añadir el css:
Código:
/*Sharebar*/
.sharesimple{width:100%;margin-top:10px;margin-bottom:10px;}
.sharesimple ul{margin:0;padding:0;}
.share-buttons{list-style: none;}
.share-buttons li{display: inline;}
.sharebar{width:100%;height:50px;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfB0XfpVgo9tdR_vCez-HOBOPNaQJmnxGDmRXQRkHMi4aFDIhne1TI0FV38NHASbq-6M2exNDBlmhfz0njlUD8ofwOAjnTS4S9zHPr0d5mKH1tznLcrZPGY7Uz__9flxnEsHo76woTJRWo/s1600/sharebarfondo.png");z-index:100;position:fixed;bottom:0px;}
.sharebarsimple{width:80%;margin-top:0px;margin-bottom:0px;margin:0 auto;z-index:1000;position:relative;}
.sharebarsimple ul{margin:0;padding:0;}
.sharebarbuttons{list-style: none;}
.sharebarbuttons li{display: inline;}
.sharetitle{Font-weight:700;color:#fff;font-size:30px;display:inline;float:left;margin-right:10px;margin-top:5px;}
  media screen and (max-width:550px){
.sharesimple{text-align:center;}
.sharetitle{display:none}
.sharebarsimple{width:100%;text-align:center;}
}




Paso 2:Buscamos la ubicación en donde queremos los botones para compartir y pegamos el siguiente código:

Código:
<h3>Compartir</h3>
 <div class="sharesimple">
<ul class="share-buttons">
 <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgficJRZeQBTaEBXXDj9gZI_VzZFQcvv8i68YF_LO2Ap2i06jkWPEuhEop-rUJ7eVRYDSSKV9VIv_B5-hY8TQi_UwygZ5kYsVtbvqi6Tf-rh2_YS_xb8g6XIv9zCEm6AGczEdH_sKB7FLUN/s1600/facebook.png'/></a></li>
 <li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGONssbb9DncZctpy5_A2nWyQTyzuA7WVDeTjG7ssXiWfVOfXDiTnViTLu9U1pryEKu5YfoXY1ia-HJ_dhltxs-Y0qmcj8Lmh90cvYbs5V07ZMMO16WJiwTxX-sxjr3fYGwxL5i7JOVBDx/s1600/twitter.png'/></a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuM4UrDFZuCzSxpj77Yvf4qotetj6BoQP2gErjXhMPZvoqIzXIN8k2IIlgQW3chpl_6PylNHv-S0jKPrie4eNHyszJPHE_dHtY4kPQ4SooSweguX3Z2q78LscbNIQYkWysBf8WGlrY5AvL/s1600/gplus.png'/></a></li>
<li><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel="nofollow" title="Compartir en Pinterest"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwBpAiGA6yQNjzoCm1EeBdhoI-ySbw3qsESyVbuG70PQcRfhAw_OfU6CDmhD6CMUx-5FHhnLlDuONvcXMxqcwbburTG5x4H1wbz4F_nvoE-ocZn5mOOf0ZxYmqxWnuQAtuD_bVXpIEBTc/s1600/pinterest.png'/></a></li>
<li><a href="http://www.tumblr.com/share" title="Compartir en Tumblr" rel="nofollow" target="_blank" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcjKwoF5MwFQN_JclWd0C-EyEZE3LOyBkhx10SCUyOyAjlacsrrwvH1C4Ou1Jx-YdXoCCyYoXH-fq8SVnCNYTEWXlOxAlwtbzQ-j9HhcYt_lWVENl9sS4f1td6nUA4i04mHLNSga0_WSsL/s1600/tumblr.png'/></a></li>
</ul>
</div>


Paso 3: Nos colocamos en el footer o incluso debajo de la etiqueta <body> y colocamos el siguiente código:

Código:
<div class="sharebar"><div class="sharebarsimple"><div class="sharetitle">Compartir</div><ul class="sharebarbuttons">
 <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgficJRZeQBTaEBXXDj9gZI_VzZFQcvv8i68YF_LO2Ap2i06jkWPEuhEop-rUJ7eVRYDSSKV9VIv_B5-hY8TQi_UwygZ5kYsVtbvqi6Tf-rh2_YS_xb8g6XIv9zCEm6AGczEdH_sKB7FLUN/s1600/facebook.png'/></a></li>
 <li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGONssbb9DncZctpy5_A2nWyQTyzuA7WVDeTjG7ssXiWfVOfXDiTnViTLu9U1pryEKu5YfoXY1ia-HJ_dhltxs-Y0qmcj8Lmh90cvYbs5V07ZMMO16WJiwTxX-sxjr3fYGwxL5i7JOVBDx/s1600/twitter.png'/></a></li>
<li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuM4UrDFZuCzSxpj77Yvf4qotetj6BoQP2gErjXhMPZvoqIzXIN8k2IIlgQW3chpl_6PylNHv-S0jKPrie4eNHyszJPHE_dHtY4kPQ4SooSweguX3Z2q78LscbNIQYkWysBf8WGlrY5AvL/s1600/gplus.png'/></a></li>
<li><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel="nofollow" title="Compartir en Pinterest"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwBpAiGA6yQNjzoCm1EeBdhoI-ySbw3qsESyVbuG70PQcRfhAw_OfU6CDmhD6CMUx-5FHhnLlDuONvcXMxqcwbburTG5x4H1wbz4F_nvoE-ocZn5mOOf0ZxYmqxWnuQAtuD_bVXpIEBTc/s1600/pinterest.png'/></a></li>
<li><a href="http://www.tumblr.com/share" title="Compartir en Tumblr" rel="nofollow" target="_blank" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcjKwoF5MwFQN_JclWd0C-EyEZE3LOyBkhx10SCUyOyAjlacsrrwvH1C4Ou1Jx-YdXoCCyYoXH-fq8SVnCNYTEWXlOxAlwtbzQ-j9HhcYt_lWVENl9sS4f1td6nUA4i04mHLNSga0_WSsL/s1600/tumblr.png'/></a></li>
</ul></div></div>


Paso 4: Guardamos y listo.


Fin de la segunda apariencia, pasemos a la tercera apariencia de los botones Facebook, Twitter, Google+, LinkedIn entre otros:



 Entrar en la Edición HTML del blog y marcar la casilla Expandir plantillas de artilugios, luego busca la etiqueta:


Código:
<div class='post-footer-line post-footer-line-1'>
Exactamente después de esto pegamos lo siguiente
Código HTML:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0' cellpadding='6' style='width: 50%;'><tbody>
<tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td>
</tr>
</tbody></table></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcddcb73e3ba0d2"></script>
</b:if>
guardar
Publicado por David Torres en jueves, mayo 07, 2015

Anuncio Patrocinado
ANUNCIO



-- ↑ Suscribete gratis AQUI ↑ para enviarte las actualizaciones por E-Mail --



Escribe un comentario...

Protegido por Copyscape Herramienta plagio
Next
Entrada más reciente
Previous
Entrada antigua

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Fotos Google El 90% de las personas que duran 10 minutos viendo estas imágenes se reñajan y eliminan el estrés del día.

Etiquetas