Widget de suscripciones para blogger
Tener un widget de suscripciones para tu
blog de Blogger, hace que la gente se suscriba a tu blog por medio de este
espectacular widget.
El widget de suscripciones que les voy a enseñar como insertarlo en su blog de Blogger tiene las siguientes características:
El widget de suscripciones que les voy a enseñar como insertarlo en su blog de Blogger tiene las siguientes características:
- Caja de su pagina de Google+
- Caja FanPage de Facebook
- Caja FanPage de Facebook
- Icono de recomendar su pagina web en Google+
- Follow de Twitter
- Icono de Rss
- Icono de Twitter
- Icono de Facebook
- Y por ultimo la caja de suscripciones de
su blog de Blogger
Este widget de suscripciones
se encuentra ubicado en el sidebar de un blog, en el cual podrás ver su funcionamiento.
Con este widget los usuarios de la red podrán suscribirse y obtener todos los días las nuevas actualizaciones de tu blog de Blogger, siempre y cuando vayas publicando nuevos temas. El widget de suscripciones lleva el nombre de "Suscríbete"
Con este widget los usuarios de la red podrán suscribirse y obtener todos los días las nuevas actualizaciones de tu blog de Blogger, siempre y cuando vayas publicando nuevos temas. El widget de suscripciones lleva el nombre de "Suscríbete"
Te encanto verdad!
Bueno ahora vamos a trabajar
2 Un clic en diseño
3 Abre un nuevo widget “HTML/Javascript”
<style
type="text/css">
/*<!CDATA[*/
#adb-mashable{width:300px;margin:auto;padding:0;}
.adb-googleplus
{height: 62px;}
.adb-facebook
{background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px
10px;}
.adb-gplusone
{background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid
white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height:
24px;height:30px;}
.adb-gplusone
span {display: inline-block;vertical-align: middle;height: 20px;margin-top:
-17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.adb-twitter
{background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.adb-twitter
a.twitter-follow-button {display: block;}
.adb-twitter
iframe {margin: 9px 11px;}
.adb-sociallinks
{background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid
#eff5f7;padding: 10px 11px;overflow: hidden;}
.adb-sociallinks
a {text-shadow: 1px 1px white;}
.adb-sociallinks
.adb-social {list-style: none;overflow: hidden;margin: 0 !important;padding:
0 !important;}
.adb-sociallinks
.adb-social li {border:0 none !important;float: left;line-height: 1;padding:
2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV97CSdONONre79C7uaU3Jf-R7dL5g-kHOy4KFzCyRePQbIdd8vzZyW0orT3EINazVxJ5yWMiRgc3D1Ybvo0zHAcFd7Ff7TNM9Ofa64TTBmfjnFgt108Et00x-4L9RtGZoe0PMWP8kDD22/s1600/w2b_socialsprite.png)
no-repeat;font-size: 12px;}
.adb-sociallinks
.adb-social li a {display: block;font-weight: bold;color:
#1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.adb-sociallinks
.adb-social li a:hover {text-decoration: underline;}
.adb-sociallinks
.adb-social li.rss {background-position: 0 -240px !important;}
.adb-sociallinks
.adb-social li.twitter {background-position: 0 -150px !important;}
.adb-sociallinks
.adb-social li.facebook {background-position: 0 -450px !important;}
.adb-emailbox
{background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid
#eff5f7;padding: 12px 16px;overflow: hidden;}
.adb-emailbox
form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing:
border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.adb-emailbox
input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing:
border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color:
#999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius:
3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.adb-emailbox
input.emailu:focus {color: #333;}
.adb-emailbox
input.submitu {-webkit-border-radius: 3px;-moz-border-radius:
3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight:
bold;font-size: 12px;float: right;cursor: pointer;}
.adb-emailbox
input.submitu:hover {text-decoration: none;}
.adbBlue{border:1px
solid #397CBA;text-shadow: 1px 1px 0 #3A7AB2;background: #60abf8;background:
-moz-linear-gradient(top, #60abf8 0%, #4082c4 100%);background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#60abf8),
color-stop(100%,#4082c4));background: -webkit-linear-gradient(top, #60abf8
0%,#4082c4 100%);background: -o-linear-gradient(top, #60abf8 0%,#4082c4
100%);background: -ms-linear-gradient(top, #60abf8 0%,#4082c4
100%);background: linear-gradient(top, #60abf8 0%,#4082c4 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#60abf8',
endColorstr='#4082c4',GradientType=0 );}
.adbBlue:hover{background:
#9ccefc;background: -moz-linear-gradient(top, #9ccefc 0%, #5087bf
100%);background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#9ccefc), color-stop(100%,#5087bf));background:
-webkit-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background:
-o-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background:
-ms-linear-gradient(top, #9ccefc 0%,#5087bf 100%);background:
linear-gradient(top, #9ccefc 0%,#5087bf 100%);filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ccefc',
endColorstr='#5087bf',GradientType=0 );}.adb-moresubs {background: none
repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color:
#fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size:
7px;letter-spacing: 1px;}
.adb-moresubs
a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration:
none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
<div id="adb-mashable">
<div
class="adb-googleplus">
<script
type="text/javascript">
/*<![CDATA[*/
window.___gcfg =
{lang: 'en'};
(function(){
var po =
document.createElement("script");
po.type =
"text/javascript"; po.async = true;po.src =
"https://apis.google.com/js/plusone.js";
var s =
document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
/*]]>*/
</script>
<div
class="g-plus"
data-href="https://plus.google.com/105165843323659030487"
data-width="300" data-height="69"
data-theme="light"></div>
</div>
<br
/>
<br
/>
<div
class="adb-facebook">
<div
class="fb-page"
data-href="https://www.facebook.com/saludvidadiaria"
data-width="298" data-height="100"
data-hide-cover="false" data-show-facepile="true"
data-show-posts="false"><div
class="fb-xfbml-parse-ignore"><blockquote
cite="https://www.facebook.com/saludvidadiaria"><a
href="https://www.facebook.com/saludvidadiaria">Salud</a></blockquote></div></div>
</div>
<div
class="adb-gplusone">
<script
type="text/javascript">/*<![CDATA[*/
(function() {
var po =
document.createElement("script"); po.type =
"text/javascript"; po.async = true;
po.src =
"https://apis.google.com/js/plusone.js";
var s =
document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();/*]]>*/
</script>
<div
class="g-plusone" data-size="medium"
data-href="http://www.saludvidasana.com/"></div>
<span>Recomiendame en
Google</span>
</div>
<div
class="adb-twitter">
<a
href="https://twitter.com/saludvidadiaria"
class="twitter-follow-button"
data-show-count="true">Follow @saludvidadiaria</a>
<script
type="text/javascript">/*<![CDATA[*/!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div
class="adb-sociallinks">
<ul
class="adb-social">
<li
class="rss"><a
href="http://feeds.feedburner.com/saludvidasana">RSS</a></li>
<li
class="twitter"><a href="https://www.twitter.com/saludvidadiaria">Twitter</a></li>
<li
class="facebook"><a
href="https://www.facebook.com/saludvidadiaria">Facebook</a></li>
</ul>
</div>
<div
class="adb-emailbox">
<form
action="http://feedburner.google.com/fb/a/mailverify"
method="post"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=saludvidasana',
'popupwindow', 'scrollbars=yes,width=550,height=520'); return true"
target="popupwindow">
<table
width="100%">
<tr>
<td>
<input class="emailu" name="email"
placeholder="Ingrese su email" type="text"/>
</td>
<td
width="64px">
<input class="submitu adbBlue" type="submit"
value="Suscríbete"/>
</td>
</tr>
</table>
<input
name="uri" type="hidden"
value="saludvidasana"/>
<input
name="loc" type="hidden" value="es_ES"/>
</form>
</div>
</div>
|
Realiza estos cambios:
- Remplaza todas las direcciones URLs que están marcadas de color azul, por sus perfiles sociales
- Ademas, cambia las dirección URL que esta marcado de color purpura por la dirección URL de su cuenta de Twitter, como también el nombre que esta marcado de color purpura
- Ademas, cambia las dirección URL que esta marcado de color purpura por la dirección URL de su cuenta de Twitter, como también el nombre que esta marcado de color purpura
- Y por ultimo encontraras dos nombres marcados de color rojo saludvidasana el cual deberás
cambiarlo por el nombre de tu feedburner de suscripciones.
Eso es todo, ahora es momento de dar un clic en
guardar y ubica tu widget de suscripciones donde mejor te convenga.
¿Necesitas ayuda?
Espero haber sido lo mas explicativo
posible, recuerda, cualquier pregunta no dudes en hacérmelo saber
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
muchísimas gracias por el tutorial!!
ResponderEliminarSolo me surgió una duda: en mi blog, en la parte superior del widget aparece "We're on" en vez de "mi nombre en" (que en tu blog aparece Luis Chavez en) y "follow" en vez de "añadir a círculos"
Como puedo solucionarlo?
P.d: No pongo el enlace a mi blog, debido a que es un blog comercial y no quisiera ser vista como spammer...
Desde ya, muchas gracias..
Carolina...
Hola, no te aparece tu nombre por que tal vez es muy largo, entre tu nombre y tu apellido debes de tener 11 a 12 caracteres solo asi aparecera el nombre en tu caja de suscriptores para blogger, y sobre la otra pregunta no es posible cambiar add to circles, ya que biene directamente de la app de google.
ResponderEliminarSaludos.
Hola a la hora de hacer la suscripción veia email, me dice: La alimentación no tiene suscripciones por correo electrónico habilitada. Me he ido a la pagina de mi feed para habilitarla pero me da un codigo html para hacerlo. ¿Pero donde lo pongo?
ResponderEliminarSon errores comunes de configuracion, enviame un mensaje directo a: ayudadeblogger@gmail.com y agregame al chat, para poder guiarte y identificate con este mensaje, solo asi te podre ayudar.
ResponderEliminarSaludos.
Muy útil para mi que recién empiezo con un blog, Gracias!
ResponderEliminarLuis yo acabo de instalarlo en mi blog pero no sé porqué el botón de facebook me queda encima del de Google+. Qué puedo hacer para solucionarlo?
ResponderEliminarSaludos!!
Hola, es por que google actualizo su script a un tamaño diferente, asi que por el momento dejalo asi..
EliminarSaludos.
Buenas tardes Luis, tengo el mismo problema con la caja de redes sociales que ARIELA GUERRA, ya pudiste solucionarlo? Por favor ayudame, estoy en face de relanzamiento de mi blog y quiero que todo se vea y este bien, Saludos y Gracias por el pots.
ResponderEliminarHola, Ernesto, con respecto a su pregunta, he actualizado este tutorial, ahora si vuelva a copiar el código y seguir los pasos
EliminarQuedo atento a su respuesta sobre este tema. Cuénteme como le fue!
Saludos
Hola, Luis, Disculpa la tardanza, hoy apenas vi tu respuesta y cuasualmente viendo uno de tus tutoriales, probe el codigo esta solucionado el problema pero ahora tengo otro, el facebook no muestra los me gusta y el mesnsaje predenterminado Ejemplo: "A 500 personas les gusta esto", lo unico que sale en su lugar es un fondo blanco y con la palabra salud llevando a la pagina demo donde tu presentaste la caja que si quedo bien, Gracias y de nuevo perdon el retraso no creas que eh debajo de mejorar mi blog al contrario me tarde en responder por que estaba mejorandolo en otros aspecto. Saludos.
ResponderEliminarHola Ernesto, tal vez en su blog de Blogger le haga falta un código script para que se muestre la caja de la FanPage de Facebook.
EliminarAdemás, cambie donde dice Salud por el nombre de su Fanpage
También remita la dirección URL de su blog de Blogger para poder ingresar y ver que código le hace falta para que se habilite la caja de su FanPage
Saludos
Hola Luis, Este no es mi Blog solo es uno que uso para probar codigos y entre otras cosas, http://mistutorialesblogs.blogspot.com, No te preocupes que uso la misma plantilla en mi mismo blog, y la caja de redes sociales se ve en el blog que si uso, Saludos y gracias Luis.
ResponderEliminarHola, gracias por remitir la dirección URL de su blog de Blogger, para solventar este inconveniente, el código que le hace falta se encuentra detallado en el siguiente tutorial:
Eliminarhttp://www.ayudadeblogger.com/2015/05/como-insertar-el-nuevo-plugin-pagina-social-de-facebook-en-mi-blog-de-blogger.html
Al abrir dicho tutorial solo ingrese el codigo que se encuentra estipulado en el paso 2. El cual dice:
Busca este código
< body >
He ingrese script de Facebook que se encuentra en dicho tutorial,
Con ese código se solventara su inconveniente
Saludos.
Hola Luis, La verdad me ah servido, aunque la imagen del facebook se monta un poco encima de la de google+, pero esta bien, gracias Luis, eres un gran programador ya que fuiste el unico que pudo ayudarme con la caja los demas no pudieron.
EliminarHablando de otra cosa, No se si este seria el canal correcto para hacer la siguiente pregunta pero habras escrito un articulo donde hables sobre: Como hacer para que un Item del Menu, se quede selecionado de un color diferente al menu, en la pagina actual donde se encuentre el visitante?
Hola, es bueno saber que le ha funcionado este truco de Blogger, con respecto a su otra pregunta, en su momento realizare un tutorial sobre lo que usted indico, le recomiendo suscribirse al canal de Youtube en el cual publicare cientos de tutoriales.
EliminarSaludos.
Gracias Luis, visite tu canal y me agrada, me voy a suscribir se ve que haz hecho un buen trabajo con ellos, ummm que raro que tengas tan pocos suscriptores no deberia, deberias tener muchos el canal no esta nada mal, aplicale algo de SEO, y si si existe el SEO para youtube jeje, cualquier cosa avisame y te los paso, Saludos y gracias :)
ResponderEliminarHola Ganancias, gracias por su sugerencia
EliminarSaludos.
Hola Luis, estamos a la orden, por favor recuerda avisarme cuando tendras listo el tutorial de: "Como hacer para que un Item del Menu, se quede selecionado de un color diferente al menu, en la pagina actual donde se encuentre el visitante?", De verdad me urge estoy terminando mi blog y quiero inaugurarlo completo, Gracias nuevamente luis por toda tu ayuda con tus tutoriales, Saludos.
Eliminar