Widgets y Plugins para Blogger


Widgets para Blogger – Suscripciones V3


Aprender a instalar nuevos trucos para Blogger de widgets para blogs o páginas web es una forma de darle un diseño único a su página web profesional, sobre todo gracias a estos Widgets para blogs obtendrán más tráfico web hacia su blog, ahora se preguntaran como! La respuesta es gracias a que los usuarios se suscriban y los sigan en sus perfiles sociales. Este nuevo Widgets para blogs tiene un código ligero el cual no le causara ningún daño en la estructura de su blog o página web.

Widgets para Blogger

Además si necesitan más trucos de suscripciones de Widgets para blogs les dejo algunos posts que publique anteriormente


A continuación mire su demostración en mi blog de demos, el Widgets para blogs está ubicado en el sidebar y lleva el nombre de “Suscríbete


Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Diseño

Widgets para Blogger

3 Abre un gadget “Añadir un gadget

Widgets para Blogger

4 Busca el widget que dice “HTML/Javascript” ábrelo

Widgets para Blogger

5 Inserta las siguientes líneas de código en su interior

<style>
.sb-email{
background:url(https://dl.dropboxusercontent.com/u/87055319/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.sb-emailsubmit{
background: -moz-linear-gradient(#ee8a6e, #EA6D4A);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#EA6D4A),color-stop(1, #ee8a6e));
background: -webkit-linear-gradient(#ee8a6e, #EA6D4A);
background: -o-linear-gradient(#ee8a6e, #EA6D4A);
background: -ms-linear-gradient(#ee8a6e, #EA6D4A);
background: linear-gradient(#ee8a6e, #EA6D4A);
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:2px;
font:12px sans-serif;
}
.sb-emailsubmit:hover{
background:#1379e9;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="g-person" data-width="301" data-href=" https://plus.google.com/+LuisCh%C3%A1vez" data-layout="landscape" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(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>
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="//plus.google.com/+ayudadeblogger" data-layout="landscape" data-rel="publisher"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(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 id="social-box">
<a href="https://twitter.com/ayudadeblogger" class="twitter-follow-button" data-show-count="false" data-size="medium" data-dnt="true">Follow @ayudadeblogger</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><a data-pin-config="beside" data-pin-do="buttonBookmark" href="//pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/PinExt.png" /></a>
<script src="//assets.pinterest.com/js/pinit.js"></script><a href="http://feeds.feedburner.com/foroayudadeblogger"><img src="http://feeds.feedburner.com/~fc/foroayudadeblogger?bg=999999&amp;fg=000000&amp;anim=1" height="23" width="92" style="border:0" alt="" /></a></div><div class="sb-email">
Suscríbete via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=foroayudadeblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Ingrese su Email&quot;) {this.value = &quot;&quot;;}" value="Ingrese su Email" type="text" />
<input type="hidden" value="foroayudadeblogger" name="uri"/><input type="hidden" name="loc" value="es_ES"/>
<input class="sb-emailsubmit" value="Ingresar" type="submit" />
</form>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/ayudadeblogger&amp;send=false&amp;layout=standard&amp;width=300&amp;show_faces=true&amp;font=lucida+grande&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=336587283139525" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:80px;" allowtransparency="true"></iframe>

Realiza estos cambios:

He marcado de 5 colores diferentes en los lugares que ustedes tendrán que realizar sus diferentes cambios.

Recuerda cambiar cada uno de ellos y remplazarlos por las URLs de tus perfiles sociales

Una vez que hayas realizado los cambios, es momento de dar un clic en “Guardar” y ubica tu nuevo widget donde mejor te parezca

Fácil verdad!

Recuerda suscribirte y así recibirás mis nuevas actualizaciones directamente en tu bandeja de entrada

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé


Enviar por correo

Publicar un comentario

Discusión:

 

Inspiración

Tecnología

Contactos

+593 994589032