add

Widget para blogger – 3 atractivos widgets de suscripciones 3D


Widget para blogger
Buscabas widgets para blogger, Ayudadeblogger.com te ayudara con 3 widgets para blogger de suscripciones en 3d. Tener buenos métodos de suscripciones para los usuarios, ayudara a que los visitantes se suscriban mas a sus nuevas actualizaciones de su blog, esto generara mas trafico en su blog. Las características de este nuevo widget para blogger de suscripciones es, un método se suscripción, iconos de redes sociales en movimiento al momento de pasar el cursor por cualquiera de ellos en 3d. Voy a presentar 3 diferentes widgets así que cualquiera de ellos te puede gustar. Escoge el que mejor te guste, solo deberán insertarlo en un solo widget y seguir mis instrucciones de configuración.



A continuación mire su demostración en mi blog de demos


Ahora vamos a trabajar

1 Ir a blogger

2 Da un clic en “Diseño

Widget para blogger

3 Ahora deberas dar un clic en “Añadir un gadget

Widget para blogger

4 Busca el widget que dice “HTML/Javascript

Widget para blogger

En este punto tendremos tres tipos de estilos, escoge un solo estilo que te guste e insértalo en un solo widget realizando algunos cambios.

Primer Estilo


Insértalo en tu widget “HTML/Javascript” las siguientes líneas de código:

<style>
#PBTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(http://4.bp.blogspot.com/-T-uok4ZMjGA/UC4uArCR1BI/AAAAAAAAA_I/1QgkOyU9yP8/s1600/ws_Black_Floor_1440x900.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#PBT_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#PBT_socialicons img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);
}
PBTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.PBTtextbox{
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
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;
width:145px;
height:20px;
}
.PBTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
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%);
}
</style>
<div id="PBTsub">
<center><p id="PBT_socialicons">
    <a href="http://feeds.feedburner.com/ForoAyudaDeBlogger">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtRSS.png " /></a>
<a href="https://plus.google.com/114283163993086871162">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtGP.png  " /></a>
<a href="https://www.twitter.com/ayudadeblogger">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtTW.png " /></a>
<a href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtFB.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Ingrese su correo electrónico para que reciba mis acutalizaciones directamente en su bandeja de entrada !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=550&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ForoAyudaDeBlogger'/>
<center><input name='loc' type='hidden' value='es_ES'/>
<input class='PBTtextbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ingrese su email&quot;;}' onfocus='if (this.value == &quot;Ingrese su email&quot;) {this.value = &quot;&quot;}' type='text' value='Ingrese su email'/>
<input alt='' class='PBTbutton' title='' type='Submit' value='Submit'/>
</center></form><center>
<p style='float:upper right; color:#000; font-size:10px;'><a href="http://www.ayudadeblogger.com" target="_blank"> Widget By </a></p>
</center></div>

Realiza estos cambios:

Cambia los links que están marcados de color azul, por los links pertenecientes de tus redes sociales.

Al igual deberás borrar los dos nombres que están marcados de color rojo, por el nombre de tu FeedBurner, por ejemplo mi FeedBurner es así: http://feeds.feedburner.com/ForoAyudaDeBlogger   tu debes copiar solo el nombre al final de / eso es todo, ahora dale un clic en “Guardar” y ubica tu widget de suscripciones donde tu quieras que aparezca.

Segundo Estilo

Widget para blogger

Insértalo en tu widget “HTML/Javascript” las siguientes líneas de código:

<style>
#PBTsub{
width:244px;
padding:70px 10px 0px 9px;
background:#000 url(http://4.bp.blogspot.com/-QkIj_Y7ylh0/UBLdRg56bpI/AAAAAAAADfA/16sPq2FPhg0/s1600/HP-Laptop-Luster.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#PBT_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#PBT_socialicons img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);
}
PBTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.PBTtextbox{
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:145px;
height:20px;
}
.PBTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
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%);
}
</style>
<div id="PBTsub">
<center><p id="PBT_socialicons">
    <a href="http://feeds.feedburner.com/ForoAyudaDeBlogger">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtRSS.png " /></a>
<a href="https://plus.google.com/114283163993086871162">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtGP.png  " /></a>
<a href="https://www.twitter.com/ayudadeblogger">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtTW.png " /></a>
<a href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtFB.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Ingrese su correo electrónico para que reciba mis acutalizaciones directamente en su bandeja de entrada !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=550&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ForoAyudaDeBlogger'/>
<center><input name='loc' type='hidden' value='es_ES'/>
<input class='PBTtextbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ingrese su email&quot;;}' onfocus='if (this.value == &quot;Ingrese su email&quot;) {this.value = &quot;&quot;}' type='text' value='Ingrese su email'/>
<input alt='' class='PBTbutton' title='' type='Submit' value='Submit'/>
</center></form><center>
<p style='float:upper right; color:#000; font-size:10px;'><a href="http://www.ayudadeblogger.com" target="_blank"> Widget By </a></p>
</center></div>

Realiza estos cambios:

Cambia los links que están marcados de color azul, por los links pertenecientes de tus redes sociales.

Al igual deberás borrar los dos nombres que están marcados de color rojo, por el nombre de tu FeedBurner, por ejemplo mi FeedBurner es así: http://feeds.feedburner.com/ForoAyudaDeBlogger   tu debes copiar solo el nombre al final de / eso es todo, ahora dale un clic en “Guardar” y ubica tu widget de suscripciones donde tu quieras que aparezca.

Tercer Estilo

Widget para blogger

Insértalo en tu widget “HTML/Javascript” las siguientes líneas de código:

<style>
#PBTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/449864_manojjaiswalpbt.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#PBT_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#PBT_socialicons img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);
}
PBTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.PBTtextbox{
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
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;
width:230px;
height:20px;
}
.PBTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
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%);
}
</style>
<div id="PBTsub">
<center><p id="PBT_socialicons">
    <a href="http://feeds.feedburner.com/ForoAyudaDeBlogger">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtRSS.png " /></a>
<a href="https://plus.google.com/114283163993086871162">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtGP.png  " /></a>
<a href="https://www.twitter.com/ayudadeblogger">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtTW.png " /></a>
<a href="http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtFB.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Ingrese su correo electrónico para que reciba mis acutalizaciones directamente en su bandeja de entrada !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=550&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='ForoAyudaDeBlogger'/>
<center><input name='loc' type='hidden' value='es_ES'/>
<input class='PBTtextbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ingrese su email&quot;;}' onfocus='if (this.value == &quot;Ingrese su email&quot;) {this.value = &quot;&quot;}' type='text' value='Ingrese su email'/>
<input alt='' class='PBTbutton' title='' type='Submit' value='Submit'/>
</center></form><center>
<p style='float:upper right; color:#000; font-size:10px;'><a href="http://www.ayudadeblogger.com" target="_blank"> Widget By </a></p>
</center></div>

Realiza estos cambios:

Cambia los links que están marcados de color azul, por los links pertenecientes de tus redes sociales.

Al igual deberás borrar los dos nombres que están marcados de color rojo, por el nombre de tu FeedBurner, por ejemplo mi FeedBurner es así: http://feeds.feedburner.com/ForoAyudaDeBlogger   tu debes copiar solo el nombre al final de / eso es todo, ahora dale un clic en “Guardar” y ubica tu widget de suscripciones donde tu quieras que aparezca.

¿Necesitas ayuda?

Espero les haya sido de mucha ayuda este nuevo widget de suscripciones para blogger, cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé.

Saludos

1 comentarios:

  1. me podrias ayudar con la cuenta de feed burner no entiendo mucho de ese tema x favor, te agradesco de antemano

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios