Widget para blogger – 3 atractivos widgets de suscripciones 3D
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”
3 Ahora deberas dar un clic en “Añadir
un gadget”
4 Busca el widget que dice “HTML/Javascript”
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwkAs0XU3y7xeRxXATy8qf6keBc33D8mCyKJypgQee_XQNROfYspD5NTDUbVw3v5WHdIJSG0XISlVsnEFVCg8Guc8tyYAHPlDvaxfrHGfkRtrH7ymlJKGMEWYCWkTPLvCYH0xMwWSSNQQ/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='#FBFBFB',
endColorstr='#F4F4F4',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('http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger',
'popupwindow',
'scrollbars=yes,width=550,height=550');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 ==
"") {this.value = "Ingrese su email";}'
onfocus='if (this.value == "Ingrese su email") {this.value
= ""}' 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
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO9n76VV5BbcoPk5IVdhxp69rSpsBJMx9DOdQhjHWcj3slU3xn8t_OotEUDi52AOT3ljBuy-d8UB3TywGrUgONr-qI8rBjzVC-o7ra-UjOkfs5Ujw-r5o8SHKs3lO7qzjRMvbNx7oLako/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='#FBFBFB', endColorstr='#F4F4F4',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('http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger',
'popupwindow',
'scrollbars=yes,width=550,height=550');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 ==
"") {this.value = "Ingrese su email";}'
onfocus='if (this.value == "Ingrese su email") {this.value
= ""}' 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
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='#FBFBFB', endColorstr='#F4F4F4',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('http://feedburner.google.com/fb/a/mailverify?uri=ForoAyudaDeBlogger',
'popupwindow',
'scrollbars=yes,width=550,height=550');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 ==
"") {this.value = "Ingrese su email";}'
onfocus='if (this.value == "Ingrese su email") {this.value
= ""}' 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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
me podrias ayudar con la cuenta de feed burner no entiendo mucho de ese tema x favor, te agradesco de antemano
ResponderEliminar