Mostrando entradas con la etiqueta redes sociales. Mostrar todas las entradas
Mostrando entradas con la etiqueta redes sociales. Mostrar todas las entradas

viernes, 18 de marzo de 2016

BOTONES DE REDES SOCIALES PARA COMPARTIR EN BLOGGER.

Hace algùn tiempo hice un vìdeo en mi canal de Youtube, donde explico còmo poner botones para compartir en blogger usando el servicio de ShareThis: PUEDES VER EL VÌDEO AQUÌ. 

Pero al parecer la plataforma ha cambiado mucho, empezando porque ya no dan la opciòn de poner los botones en blogger y muchas personas me siguen preguntando còmo hacerlo.

Asì que para resolver algunas dudas y poder ayudarle a los visitantes de mi canal y mi blog, he querido compartir el còdigo que les permite tener esos botones en su blog de blogger.

Asì que aquì les dejo el còdigo con los botones, lo ùnico que tienen que hacer es copiarlo y pegarlo como un gadget en su blog. 
Una vez copien y peguen el còdigo en su blog, le dan en "Guardar los cambios".

Puedes ver el vìdeo donde explico paso a paso còmo poner el còdigo en su blog:  VER EL VÌDEO.


MUY IMPORTANTE: Debes reemplazar la parte donde estàn las "equis" por tu nombre de usuario de tu canal de Youtube.

"EL CÒDIGO SÒLO FUNCIONA PARA LAS PLANTILLAS QUE TRAE POR DEFECTO BLOGGER."


<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x= true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",{"sharethis":["large","ShareThis",""],"facebook":["large","Facebook",""],"googleplus":["large","Google  ",""],"twitter":["large","Tweet",""],"linkedin":["large","LinkedIn",""],"pinterest":["large","Pinterest",""],"email":["large","Email",""],"youtube":["large","Youtube Subscribe","",[["st_username","XXXXX"]]]}, "16866f9b-9c22-4160-ae70-e21570ec9b06");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch(err) {}}</script>

domingo, 28 de febrero de 2016

PONER CAJA DE SUSCRIPCIÒN AL FINAL DE LAS ENTRADAS.

En esta ocasiòn les traigo un còdigo que les puede servir para poner una caja personalizada de suscripciòn, ideal para poner al final de las entradas de tu blog.

La cual se verà asì: 




Lo ùnico que tienes que hacer es copiar este còdigo y pegarlo en un en el HTML cuando termines de redactar un post en tu blog para que se vea al final de tus entradas. 

Recuerda cambiar donde estàn las "equis" por tus nombres de usuario de redes sociales. Si quieres puedes ver el vìdeo donde te explico paso a paso còmo hacerlo AQUÌ.

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7MS9p6_zF25kroYXRd90pJY4nwjzC3djZA5mU1Kt6UT6tJUNyvHePpoydN23y9uA2lf8Cp9d_guiCiHo99aarK4wY1PfpvkOtNcx3UxSvIOtjmsni01zoeUi5nY5BdRJQSqkzMmm60I94/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.dcsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 rgba(104, 249, 101, 0.34);
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
</b:if><br />
<center>
<div id="emailwidget-outer">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div id="emailwidget">
<table style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%px;">
<tbody>
<tr style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<td align="left" style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"><div style="font-size: 22px; font-weight: bold; margin: 0px 0px 5px;">
<span style="color: blue;">Suscríbete por E-mail</span></div>
<form action="http://feedburner.google.com/fb/a/mailverify" class="feedburner" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=XXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="XXXX" />
<input name="loc" type="hidden" value="en_US" />
<input class="dcstyle" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ingresa tu e-mail&quot;;}" onfocus="if (this.value == &quot;Ingresa tu e-mail&quot;) {this.value = &quot;&quot;}" type="text" value="Ingresa tu e-mail" />
<input alt="" class="dcsubmit" title="" type="submit" value="Suscribirme" />
</form>
</td>
<td style="border: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;"><div style="font-size: 14px; font-weight: bold; margin: 0px 0px 5px;">
o sígueme en:</div>
<a href="https://www.youtube.com/user/XXXXX"><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhau6iJj918DyyKsknZY69oEjXNCuT9i6g7TDMGbCtfVuf1Nu8FFhkNk300_y6e8WSjPAJ7zjEnfabZ6YO2NcTnz2jen_Ep9Xt2gXC5LTdeYxgJZ9-2MoJRGX2zu9XRUiJ0D5ygqrZtZffm/s200/you.png" width="30" /></a>
<a href="https://twitter.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVo12GYzzeHz339H4UbMYoy-bMTEDts-0AElA9_Df-qNy9MsBelAb1C-HIaE-oe7LPwftPEuQgiisz-XXkjlcHQh4jUJe82U0FGvBWDUwAS3GfgowhaDL2kXkZJO0ZrZHlZrUYI7u-nYY/s1600/twitter-30%C3%9743.png" /></a>
<a href="https://www.facebook.com/pages/XXXXX/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEa0yCitkGvSyANwNAVNRnVqlNfAgELEtJPGqpijZhBt-2yw6rrRBvi7fbCzFUo0BScdFqWDUcHCDPJDvqtvaNrCOUv2t0y0r_moM73MOdntrid6uUsb70Gq00bK74RMZQEbSTlxYoZQI/s1600/facebook-30%C3%9743.png" /></a>
<a href="https://plus.google.com/u/0/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilEVxmkejREhX7mg0k-dpmgXLDAUNkeRLK1LxkYT1rEK4rmlRFtwJAY9cCbqddZcPNPDPFQU9ZqFtxcHYswUbSU2oUCC89DYyJlEsyoSQGBFwk-IkSJwZ60to35eDiZzXS9guaFKBndRM/s1600/googleplus-30%C3%9743.png" /></a>
</td>
</tr>
</tbody></table>
<div align="center">
<span style="color: white; font-size: 8px; font-style: italic;"><span decoration="none" style="color: white;"></span></span></div>
</div>
</div>
</center>

sábado, 28 de marzo de 2015

BOTONES FLOTANTES PARA COMPARTIR EN MI BLOG.

Hola a todos, en un vìdeo que hice para mi canal de youtube explico còmo poner botones para compartir en blogger usando "share this", pero a varias personas no les funcionan ya que han descargado otras plantillas diferentes a las que ofrece blogger por defecto.
Asì que en este post les voy a compartir un còdigo HTML para que lo pongan en su blog y que funciona muy bien en plantillas template, blogger, wordpress u otras que instales.

Es una barra de botones flotantes que se verà asi:




Para agregar estos botones debes ir en el caso de Blogger a Diseño, Añadir gadget, HTML/JavaScript y en el caso de Wordpress es Apariencia, Widgets y ahí pegas lo siguiente:


<!-- Floating widget starts provided--><style type="text/css">
.sb{
background:#f0f0f0;
cursor:pointer;
color:#fff;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; margin-left:8px;
font:12px sans-serif;
}
.sb:hover{
background:#777;
}
.tl {text-align:center;font-size:10px;font-weight:bold }
#Ps {position:fixed; bottom:15%; margin-left:-800px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; padding:0 0 2px 0;z-index:10;}
#Ps .sb {float:left;clear:both;margin:5px 2px 0 5px;}
#Ps:hover {-moz-border-radius:6px;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);border: 1px solid #ddd;}
</style>
<div id='Ps'>
<div class='sb' id='fblb'>
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
</div>
<div class='sb' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sb' id='gpo'>
<a class="addthis_button_google_plusone" g:plusoneize="tall"></a>
</div>
<div class='sb' id='Tw'>
<a class="addthis_button_tweet" tw:count="vertical"></a></div>
<div class='sb' >
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50bf6c151159d2c0"></script>
</div><!-- Floating widget End provided-->


Para cambiar la posiciòn  de los botones solo debes modificar en la parte donde dice: margin-left:-800px

Espero que te sirva y recuerda que puedes suscribirte a mi blog o canal de youtube, si tienes alguna pregunta no dudes en contactarme.

GANA DINERO POR ACORTAR TUS ENLACES