Una de las novedades que me perdí fue el gadget de Formulario de Contacto de Blogger, un formulario con el que nuestros lectores pueden ponerse en comunicación privada con nosotros sin necesidad de que ellos tengan que abrir el correo. El gadget por sí solo es útil, y aunque no tiene opciones me parece que incluye los campos más básicos y suficientes que la mayoría de los bloggers necesita.
La ventaja de este gadget es que no tenemos que depender de servicios externos que luego nos limitan con un número mensuales de envíos y nos obligan a mantener visible su link.
La desventaja es que su diseño es demasiado simple, y tal vez esa sea una razón por la que muchos usuarios no se atreven a usarlo.
La buena noticia es que esa misma simplicidad de su diseño permite que podamos modificarlo a nuestro gusto y adaptarlo a nuestra plantilla.
Ya saben que no soy muy bueno con el diseño, no obstante ayer dedicando una horas realicé estos ejemplos con los que se podrán dar una idea de la manera como podemos transformar radicalmente estos widgets y pasar de los simple a lo llamativo.
Ya saben que no soy muy bueno con el diseño, no obstante ayer dedicando una horas realicé estos ejemplos con los que se podrán dar una idea de la manera como podemos transformar radicalmente estos widgets y pasar de los simple a lo llamativo.
Son 5 diseños, y el código está listo para copiar y pegar. Primero deberás tener el gadget del Formulario, si aún no lo tienes entra en Diseño | Añadir un gadget, se abrirá una ventanita, del menú de la izquierda selecciona Más gadgets y ahí elige Formulario de contacto.
Ya que lo tengas en tu blog entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega el código del estilo del formulario que prefieras. Guarda los cambios y listo.
Estilo Básico
/* Formulario de Contacto, Estilo Básico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #d5dde6;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #4a7694;
border: none;
}
Estilo Postal
/* Formulario de Contacto, Estilo Postal
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtI8QY_2ffc43oXOg8Dg2DLt2e2DOe_IYkBl_rf7pumV15difoZVSJEKbEz2vqf8r_fmPJONooaDvKDbAU0HPi0EfXNOIDJrRNm8JrIMSHCUyB3Mj4doGG-TCg_EZ10f6YZIRoz6YChU-9/s74/postal.png);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Estilos del contenedor interno */
.contact-form-widget div.form {
background: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnFE6bxX9JZ7_kCDUn78GmwJCvUktFTuBFhaPmV1gruGHrKNHHyHtkp0OxgwJKo3ZKcna4TptIlvAERJrafB2fadBDhyZAGiatxzkH_-wjaAaVi6xvF4fHvWdl5G2C99hdVCqhBtVDQ_NI/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}
Estilo Negro Limón
/* Formulario de Contacto, Estilo Negro Limón
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: #282828;
border-bottom: 35px solid #98bd3c;
color: #98bd3c;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #98bd3c;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #282828;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #F9D423;
color: #282828;
border: none;
}
Estilo Girly
/* Formulario de Contacto, Estilo Girly
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOvqH63xO-lZsxRp42tW0ce1v24ZRl6C31Yektrsp6osJ71pp6XswEu-Onx3_Ag3KiEXaf1amx-qcOazrg9cvn9aChg4OkV_e-RnXMt6WEW08kA2bAVnCRYIf1JB3ciY5NFjgnork0ylZ/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
/* Estilos del contenedor interno */
.contact-form-widget:before {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7sVLYUcwvuVt1LqNj0_FrkANG9FAFlyu7Qf_73VP0tOK8r3WRThzElh2mt92MKRwMC-0G6qotC9luvDFIsDCZKTBIagplaXv5Kj82DkgBCBsWZnsZ7Lcxz85EutMOzs6mrynXUkrRDar4/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}
Estilo Metálico
/* Formulario de Contacto, Estilo Metálico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnunOAuGIy1_CdVsily9qhd-o0fGl2XyUyu8l52opCzzObc2L1OvdOsu_zhytFhupKYyRF5av4hcrAUuVqvg3YBULf0IcncKRsSfXkQG9207FfaLNFEEajjV66e2J5Gnp5hdpA96Vxb-pT/s128/metal.gif);
color:#424242;
text-shadow: 1px 1px 1px #FFFAFB;
box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
border-radius: 18px;
float: left;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border: none;
}
En color verde he puesto a qué área pertenece cada grupo de estilos por si alguien le quiere modificar algo, o por si alguien se anima a hacer sus propio diseño.
En todos los casos el ancho máximo del gadget se controla en esta parte: max-width: 280px;
En todos los casos el ancho máximo del gadget se controla en esta parte: max-width: 280px;
Toma en cuenta que algunos estilos al ser CSS3 podrían no verse de la misma manera en todos los navegadores, sobre todo en Internet Explorer.
Espero que les gusten y los disfruten.
Ciudad Blogger
muy bueno potro
ResponderEliminarExcelente Potro. De vuelta a la carga de nuevas mejoras para nuestros bloggers. Saludos desde Perú
ResponderEliminarhola que tal yo también soy de Perú de donde parte eres soy de lina pero vivo en chala caraveli desde año 2000
EliminarGran tutorial potro
ResponderEliminarvideosxxx, Eduardo José YL, Hayder Juvinao, gracias!
EliminarHola Potro, buen post, pero mi pregunta va de una entrada antigua que hiciste. Tengo un problema con mi Blog www.triatlonenfamilia.com no se actualiza en los blogroll de mis seguidores, yo en mi blog tengo puesto al mio dos veces, una lleva dos entradas sin actualizarse y el otro una, es decir mis seguidores mas antiguos hace dos entradas que no saben que he actualizado y los mas actuales una.
ResponderEliminarEn permitir feed de blog tengo puesto completo
Publicar URL redireccionada del feed pone http://feeds.feedburner.com/TriatlonEnFamilia?max-results=10
Ya no se que mas hacer tengo poca idea de informática ya te aviso pero lo he intentado todo lo que he leido por ahí..
necesito tu ayuda
gracias
Hola ANA, no encuentro problema con el feed de tu blog, al abrirlo me muestra las últimas entradas publicadas en tu blog. Quizá el problema sean los gadgets que muestran el feed, usualmente tardan en actualizar la información, y los de Blogger a veces tardan mucho más (a veces hasta semanas), pero eso ya es fallo del sistema del gadget de Blogger.
EliminarTal vez pueda servirte de algo que hagas un ping para avisar a los diferentes servicios que hay nueva información en tu blog:
http://ciudadblogger.com/2010/01/acelerar-el-tiempo-de-actualizacion-del.html
Hola potro, no se muy bien a que te refieres con los gadgets, mi problema es que me meto en los blogs de otra gente y en la lista que tienen de los blogs que siguen, el blogroll , el mio sigue estando en la entrada anterior.
Eliminarellos no se enteran que he actualizado.
Ahora he cambiado la fecha a hoy y he dejado en blanco lo de Publicar URL redireccionada del feed y parece que a la mitad se les ha actualizado.
¿Es mejor que lo deje en blanco o vuelvo a poner lo de feedburner?
A esos gadgets me refiero ANA, como el del blogroll, ese es el tipo de gadget que tardan en actualizarse.
EliminarSi tu feed lo administras desde Feedburner entonces sí hay que poner la URL en esa área, sólo se deja en blanco cuando no tienes ningún gestor de feeds.
Pero repito, es un tanto normal que ese gadget falle, no desesperes, así como se atrofia también vuelve a la normalidad.
muchas gracias.....
ResponderEliminarEs verdad que era sosísimo el formulario. Me ha encantado tu diseño postal (acabo de ponerlo en mi plantilla). Muchísimas gracias. Qué bueno tenerte de vuelta ;)
ResponderEliminarGracias eska, si yo me animara a poner uno usaría también ese :)
Eliminarbuenos dias potro me alegro que hayas vuelto. Cuanta falta hacias. uno d los nuevos diseños para formulario en mi blog. Pero tengo otra duda o pregunta. No quiero que se muestre el nr de comentario ni los comentarios de blogger en mi blog. Logre ocultarlo en la entradas pero no en la pagina pricipal que aunq le di a ocutar comentarios aparece este mensaje "undefined comment" si me pudieras ayudar seria excelente. este es mi blog: http://www.diocesisdesanfernando.org/
ResponderEliminarSaludos Webmaster, no soy El Potro pero creo poder ayudarte, en tu plantilla busca este elemento
Eliminar.mores .mments
y en donde dice: display: block; cambialo por display:none;
con eso no verás más ese elemento en la portada de tu blog.
Muchisimas gracias GABRIEL300487., la solucion a salido casi perfecta. sin embargo aun me aparece el mensaje "undefined comment" en la seccion del carrusel en el blog. habra alguna forma de ocultar ese mensaje alli tambien? Y tambien me gustaria saber como cambiar View More en las entradas de la portada dl blog, por "leer mas". He utilizado metodos tradicionales para hacerlo pero no he podido cambiarlo. Esta platilla es bastante nueva y hay cosas diferentes. Ruego ayuda.
EliminarHola WebMaster. Tienes que descargar y editar este script de tu plantilla:
Eliminarhttp://yourjavascript.com/0413121251/ptmcontentpos.js
Busca esta parte que aparece dos veces y elimina ambas:
- '+M+' comment
Ahí mismo verás el texto View More que apetece dos veces, sólo cámbialo por el texto que quieras.
Luego tendrás que guardar el script, subirlo a tu propio alojamiento y cambiar la URL del script en tu plantilla.
¡Saludos y gracias por tu comentario!
Excelente potro sin ti no hubiese popido hacerlo :D quedo perfecto y aprendi a editar un script. Nunca lo habia echo. Tengo 2 preguntas mas. Se q pregunto mucho, pero el curioso es el interesado jeje.! Aqui va la primera; en mi plantilla hay una barra superior que presenta las ultimas entradas del blog. Como puedo modificar el nombre de esta, que aparece como "headlines" y no he conseguido modificarlo. Y tambien quisiera saber como activar el lightbox para imagenes, que de la manera tradicional no se activa. Supongo que hay q modificar algo en la platilla, pero no se que exactamente. Tu ayuda es muy importante potro tanto para mi como para otras personas que quieren aprender. Por cierto soy de Venezuela.
EliminarQué bueno que has aprendido a hacerlo porque tendrás que realizar el mismo procedimiento nuevamente ;)
EliminarDe igual forma busca en ese script el texto headlines, cambia sólo el segundo por el texto que quieras, si no ves resultados cambia también el primero.
Para que el Lightbox funcione cambia en tu plantilla esto:
<div class='post-inner entry'>
Por esto:
<div class='post-inner entry post-body'>
Saludos hasta Venezuela!
Perfecto potro ya logre modificarlo, pero ahora las noticias no pasan, :( se queda estatico. Pero paso antes que modificara inclusive. Nose si modifique algo x error dentro del blog o algun scrip haga interferencia. T ruego nuevamente puedas ayudarme.
EliminarEn el Lightbox todo perfecto :D
Ahí no sabría cómo ayudarte pues no sé qué otros cambios hayas hecho antes de que eso pasara, tampoco sé cómo funcionen los scripts de esa plantilla, nunca la he usado, bien podría ser una cuestión en la configuración de la plantilla o alguna modificación que realizaste.
EliminarSi la causa fue el cambio del script regrésalo como estaba y ve haciendo los cambios uno a uno hasta que te cerciores que todo está bien.
Saludos.
Gracias potro ya pude resolverlo yo mismo. era otro script q estaba dando problemas pero ya lo retire. Pero tengo una pregunta o una duda. Como hago para cuando vaya a compartir una entrada del blog en las redes sociales por ejemplo se vea el titulo de la entrada y un sumario de la entrada y no solo el titulo del blog como aparece actualmente ?
EliminarAñade metatags para Facebook:
Eliminarhttp://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html
Y de una vez agrega micro datos Schema en tu plantilla:
http://www.oloblogger.com/2012/04/microdatos-schema-en-plantillas-blogger.html
Saludos potro como siempre un gusto aprender. Tengo una nueva inquietud. Acabo de instalar la plantilla Modern Mag de templateism. En el carousel widget de la pagina principal muestra fecha y numero de comentarios. Como no tengo activados los comentarios de blogger sino de facebook, aparece "undefined". Me gustaria eliminar estos elementos de carousel., pero no stoy seguro de como hacerlo. Si me pudieras ayudar seria excelente. este es mi blog: www.apuredigital.com
EliminarHola de nuevo. Prueba poniendo esto en los estilos de tu plantilla:
Eliminar.recent-com {display:none}
Gracias potro, si funciono. Quedo excelente :D De veras q seria d nuestros blogs sin tu ayuda :(. Sabes q tengo una inquietud. He visto varias nuevas plantillas q tienen incorporado un nuevo lightbox q no es el nativo de blogger. Tienes alguna idea q como poner a funcionar ste nuevo lightbox en mi blog? La verdad se ve chulisimo como en ste blog d pruebas: http://newsly-pbt.blogspot.com/2013/11/sample-post-with-links-paragraphs-and_21.html Ojala puedas orientarme. seria muy feliz de tenerlo asi en lo blog.!!.
EliminarNo he podido identificar qué Lightbox es pero se parece mucho a este:
Eliminarhttp://ciudadblogger.com/2010/01/lightbox-imagenes-en-ventanas-modales.html
Y esta es otra opción más completa:
http://ciudadblogger.com/2010/04/shadowbox-ventanas-modales-multimedia.html
Listo potro t comento q me decidi a cambiar d plantilla por la q tiene el lightbox q me gusta y me funciona excelente.. Gracias x todo tu aporte y siempre responder las inquietudes!. Lo unico q no logro es quitar el "undefinid" de comentarios en las publicaciones d la portada. Si sabes donde colocae el {display:none} para ocultarlo, t lo agradeceria muchisimoo.!!!
EliminarPuedes ocultarlo de esta forma:
Eliminar.comt {display:none;}
potro no consigo el .comt dentro de la plantilla. si puedes darme un poco mas de referencia sonde debo colocar xq aun no lo ubico potro :(
Eliminarlisto ya entendi como colocarlo. Gracias potro. mi blog no seria nada sin vuestra ayuda
EliminarEs buele leer uno de tus post Potro. Apenas me vengo enterando de que blogger tiene formulario de contacto XD, como me gustó la opcion de justform que pusiste en uno de tus otros post, pues me quedo con ella, aun asi me hace pensar que debo ver más acerca de los elementos que ofrece blogger.
ResponderEliminarEs bueno leer uno de tus post Potro.
ResponderEliminarApenas me vengo enterando de que blogger tiene formulario de contacto XD, como me gustó la opcion de justform que propusiste en uno de tus otros post, pues me quedo con ella. Aún así me hace pensar que debo ver más acerca de los elementos que ofrece blogger.
Es muy básico éste, el que tú usas es muchísimo más completo en varios sentidos, pero claro está que hay quienes no necesitan tantas opciones y sólo requieren algo tan simple como el que ofrece Blogger.
EliminarYo también me quedo con JotForm ;)
Potro, cordial saludo, gracias por este tutorial, muy bueno, le da personalidad al blog.
ResponderEliminarGracias a ti por tu visita Iván, ¡saludos!
EliminarGracias! tengo uno puesto pero igual me animo a utilizar alguno de ellos y jugar un poco con los colores : )
ResponderEliminarLuego nos presumes cómo te quedó tu diseño ;)
EliminarSaludos potro, me hiciste tanta falta que me pasé a Tumblr (www.diegoblog.co) jejeje.. un abrazo!!
ResponderEliminar:(
EliminarHola Potro, ya empezamos a preguntar ;) jeje
ResponderEliminarPuedo elegir/cambiar/añadir la dirección a la que llega el mensaje del formulario??
Gracias!!!!
Qué gusto leerte de nuevo Gorka!
EliminarLamentablemente no, siempre le llegará al administrador del blog, hasta ahora no tiene ni una sola opción de configuración el gadget :/
GRACIAS MAJO!!!
EliminarLo mismo digo ;)
muchas gracias voy a poner alguno aver que tal ;)
ResponderEliminarExcelente POTRO buen regreso ..... Potro desde hace tiempo te prometí una pequeña donación por que la mereces .... ahora que volviste liberare espacio en mi tarjeta de paypal y PUM =) UN ABRAZO
ResponderEliminarVale, con eso me compraré por delicioso un café colombiano :)
EliminarOtro abrazo para ti.
Gracias Protro Aqui Funcionando Perfecto Pero Una Pregunta Como Le Resto El Ancho? esq se sale un poquito de su cuadrito oK Gracias ||| Y No Sabes xq Tengo El buscador Personalizado De google y El Otro de Blogger EN MI blog Pero Las Entradas Antiguas No Salen!!! No Se Porq , Me Puedes Ayudar ( El nombre De Mi Blog Se llama)
ResponderEliminarTutorialesByNeto
Hola :)
EliminarEn el max-width: 280px; puedes modificar el ancho máximo que quieres que tenga el gadget, ¿a eso te refieres?
Los buscadores ambos los probé buscando una de las primeras entradas que publicaste (del día 19 de diciembre) y en los dos buscadores apareció la entrada.
Saludos.
mmm Entonces Mi Buscador No Salen mmmm oK Gracias
EliminarMuy Buen Post Querido Amigo, me alegra de que estes de nuevo por aqui. Saludos desde Algeciras, España.
ResponderEliminar¡Saludos hasta España!
EliminarMuy buenos diseños ^-^
ResponderEliminarvolta explendorosa, e este post demais da conta!
ResponderEliminarParabens
Porto!
Gracias potro,exactamente ahorita estoy creando una subpágina de "Contacto", bien andaba por mi cuenta de google+ y ahí vi tu publicación ;)
ResponderEliminarSaludos grandes.
Genial, ojalá te sirva de algo esta entrada para lo que andas haciendo :)
EliminarMuy bueno recién regresas y regresas con muy buenos post sigue adelante
ResponderEliminarbuen post, justo necesitaba uno, saludos!
ResponderEliminarJustoe staba buscando unos para mi web quedaron perfectos, saludos!
ResponderEliminarQue alegría que hayas retornado Potro. Tu blog siempre es referencia obligada para hacer las cosas bien y de manera sencilla.
ResponderEliminarCon respecto a este formulario yo le encontré dos fallas que me llevan a usar otro externo sin limitaciones que no diré cual es para no hacer spam.
Primero, no permite que uno decida hacia cual de las cuentas email de la que es titular llegue. Yo uso Hotmail, pero mis blogs tienen cuenta de gmail.
Segundo, si cuentas con más de un blog, no te permite definir una marca para que te indique desde cual ha sido escrito el mensaje.
Supongo que seguramente tu encontrarás la manera de solucionarlo, pero yo he preferido usar otro sistema gratuito.
Un abrazo Potro y que este nuevo comienzo te depare todo lo mejor.
Qué amable comentario OPin.
EliminarA mí lo que se me ocurre para solucionar el problema de dónde enviar los correos es crear una regla en tu correo, por ejemplo, que todos los correos que lleven como asunto "Formulario de contacto de Blogger" se redirijan a otra cuenta.
Lo segundo sí tiene un aviso, aunque no en el asunto sino dentro del correo, al abrirlo verás que al final dice: "Nota: Este correo electrónico se ha enviado a través del gadget Formulario de contacto de la página http://nombre-de-mi-blog.blogspot.com"
Pero si nadie quiere complicarse siempre habrá buenas opciones de formularios, yo el único "pero" que les pongo es que muchos (no todos) te limitan con la cantidad de envíos por mes, pero si tampoco necesitas mucha cantidad entonces eso no representa problema alguno :)
Otro abrazo para ti.
Ah qué maravilla!! A la carga nuevamente!! Excelente post como siempre, Potro. Yo quisiera que hicieras un post sobre Mailchimp, Feedburner me ha dado dolores de cabeza espeluznantes y no le agarro la onda a su alternativa mailchimp, ya revisé muchos blogs donde explican como hacer las campañas y todo eso pero no le entiendo!!! Se supone que el servicio es gratis pero a mí me llegó un correo donde ya comenzaban a cobrarme y me suspendieron el servicio, yo leí que solamente pagabas si superabas los 2000 suscriptores, en fin, no doy una y realmente me interesa enviar mis reseñas a la gente que se suscribe al feed. Quiero también preguntarte ¿Qué me recomiendas o qué servicio me recomendarías? Feedburner solamente manda mis reseñas cada vez que quiere!! No me sirve.
ResponderEliminarUn gran abrazo y... bienvenido de vuelta!!! =D
La verdad es que nunca he usado MailChimp, pero sí es cierto que es gratis sólo cuando son menos de 2000 suscriptores, no sé qué políticas manejen por la cual te hayan podido empezar a cobrar.
EliminarYo uso Feedburner desde siempre y la verdad es que nunca he tenido el problema que mencionas, al menos creo que a todos mis suscriptores les llegan las actualizaciones del blog.
Quizá lo que haga falta es que configures el horario de entrega, y tal vez ayude haciendo un ping cada vez que publiques en tu blog:
http://ciudadblogger.com/2010/01/acelerar-el-tiempo-de-actualizacion-del.html
Pon a prueba eso, con suerte y con eso se resuelven tus problemas del feed :)
¡Un beso grande!
Hay que dedicarle más al contenido, recuerda que los robots de los buscadores buscan texto, entre más texto mejor.
ResponderEliminarAun así tu blog sí está indexado:
http://oi62.tinypic.com/14wc17p.jpg
Pd. Elimino el comentario por el aviso que está aquí arriba.
Saludos!
Hola Potro
ResponderEliminarPara no ser muy bueno en el diseño, ¡¡hay que ver lo bonitos que te han quedado todos!!, bueno, el del lacito no me va mucho, jajajajaja pero está bonito igualmente
Yo tengo puesto el gadget de Seguir por correo electrónico y es el único que veo que tiene el sobre azul en lado izquierdo cuando lo eliges, no veo ninguno que ponga Formulario de contacto, no se si serán lo mismo los dos
Uissss, siiiiiii, ya lo vi, estaba mirando en Lo básico y resulta que sale en la pestaña Mas gadgets, así que hoy no pregunto nada jejeje
Abrazos
Jajaja, ya te estaba respondiendo y aún no terminaba de leer tu comentario :P
Eliminar¡Abrazos y besos!
Muy buenos, Potro!...y yo que ni me había dado cuenta de que este gadget existía ya, :)...ay, tanto tiempo sin verte por aquí hasta había perdido interés por el mantenimiento de mi blog. Ahora estoy segura de que lo recuperaré. ¡Muchas gracias!
ResponderEliminarUn beso y un abrazo enormes.
Gracias a ti hermosa. ¡Besos!
EliminarExcelente artículo Potro, y felicidades por tu regreso :D!
ResponderEliminarQue Bonitos Potro!!
ResponderEliminarAdoro dos el carta y el metálico y que maravillo es sentirte de vuelta, ahora que estas presente ☺ te podre torturar con lo pendiente muejeje.
Saluttes ^^
PD: y gracias por este encantador aporte.
Jajaja, estaré encantado de poder ayudarte :)
EliminarBesos.
Potro como puedo poner las categorias de mi blog asi... http://i.imgur.com/OCUIoIW.jpg
ResponderEliminarEs un Leer más automatizado, sólo que está condicionado para que sólo se muestre en ese tipo de páginas.
EliminarBásicamente es cambiar la etiqueta <data:post.body/> por este código:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb' itemprop='image'>
<a expr:href='data:post.url'>
<img expr:src='data:post.thumbnailUrl'/>
</a>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.hasJumpLink'>
<b:else/>
<section class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</section>
</b:if>
</b:if>
</b:if>
</b:if>
Gracias potro muy util :)
EliminarPotro hace unos meses me eliminaron mi blog, y pedi recuperarlo y supuestamente me lo devolvieron pero me aparece en el escritorio de blogger, y cuando lo busco en google me aparece, y aparece de la siguiente manera, te dejo la url para que me respondas y me ayudes. http://wwwpavasfamosas.blogspot.com/
ResponderEliminarAl parecer te devolvieron el blog (la URL) pero te eliminaron el contenido, quizá el contenido de tu blog violó alguna de las políticas de contenido y por eso decidieron eliminar todo lo que había en él.
EliminarSaludos mi buen amigo Potro, qué gusto tenerte de nuevo para darle vida a nuestros blogs, espero un día de estos dedicas una entrada a las vistas dinámicas, en especial a qué mejoras se les pueden hacer y de pronto analizar si es posible incluir un anuncio más, pues sólo muestra dos.
ResponderEliminarEdwin Yanes
www.poesiagt.com
Hola Edwin, desgraciadamente lo que se le puede hacer a las Vistas Dinámicas es muy escaso, casi nulo. Si se quiere tener un blog personalizado al máximo lo mejor es usar otro tipo de plantillas.
EliminarSaludos y gracias por tu comentario!
Indexado significa que tu blog está incluido en los resultados de búsqueda. Si tu blog aparece en los resultados entonces tus entradas también, sólo que no siempre aparecen en la primera búsqueda que hagamos, entre más relevante sea tu blog para Google más fácil será que tus entradas aparezcan a la primera.
ResponderEliminarpotro podrias enseñarnos a colocar dos anuncios debajo del titulo, asi juntos como los tiene usted, como se hace paso a paso.
ResponderEliminary tambien la barra que despliega el blog hacia abajo asi como lo tiene usted como es, gracias por su regreso.
ya lo logre 2 bloques adsense solo me falta barra que despliega el blog hacia abajo
EliminarHola Antonio, ¿te refieres a las flechas? yo tengo estas:
Eliminarhttp://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html
que detallaso
Eliminarmuy bueno
ResponderEliminarcomo siempre
sorprendente
Gràcias Potro!!!!
Saludos Joralgom Joral. Pon en 0px el margin-bottom que está dentro de /* Estilos de los campos */
ResponderEliminarCon eso se reducirá un poco la altura del gadget.
Un abrazo.
Hola Potro !!! Tengo porblemas en el armado de mi blog. Agregué el gadget Botones de contacto y Formulario de contacto (aplicando la modificación en HTML que publicaste), pero en la barra lateral de gadget no aparece ninguno de los dos. Desde ya agradeceré tu ayuda ya que estoy experimentando po primera vez en hacer un blog. Excelentes tus consejos y gracias por compartir !!!!!
ResponderEliminarHola, me parece que este gadget no está disponible para las Vistas Dinámicas
Eliminar:(
Si quieres reducirlo más puedes poner un height debajo de .contact-form-widget {
ResponderEliminarPor ejemplo:
height:250px;
Pero, eso acortará el elemento, no lo ajustará, es decir, que si te excedes el campo de los mensajes y el botón de enviar podrían quedar fuera del gadget.
Hola Zheyn Castle, hay plantillas tipo magazine que ya tienen esa característica:
ResponderEliminarhttp://btemplates.com/blogger-templates/magazine/
alfin de regreso, que bueno todo un exito los comentarios estan lloviendo algun dia mi blog tendra tanto publico.
ResponderEliminarHola Potro.
ResponderEliminarTengo una duda con mi blog y espero que me puedas ayudar. Compré una plantilla prediseñada para mi blog, puedo cambiar todos los parámetros menos una firma del autor en el slider, o por lo menos no veo donde puedo quitarla.
El blog es vegrados1.blogspot.com, la firma está justo en la parte derecha-abajo del slider.
Muchas gracias!
Hola VEINTISIETEGRADOS, no sé a qué acuerdo hayas llegado con el diseñador de la plantilla, pero si has pagado por ella puedes pedirle al autor que remueva el enlace del crédito.
EliminarSaludos.
Ok, así lo haré. Gracias.
EliminarBuen Tuto y felicidades por el Blog, a ver si me voy aclarando un poquito que estoy muy verde,
ResponderEliminarPD: les dejo el enlace de mi Blog http://dibuline.blogspot.com.es/
Hola Potro, quisiera saber tu opinión sobre el deseño de mi pagina: jeromeguitton.org
ResponderEliminarSaludos
En lo personal a mí ese tipo de diseños me gustan mucho :)
EliminarHola Potro, quisiera saber como puedo hacer que el fondo de pantalla de una pagina del blog sea diferente al de otra pagina, Gracias
ResponderEliminarUsa condicionales, con ellas se consigue todo eso:
Eliminarhttp://ciudadblogger.com/2010/03/condicionales-de-blogger.html
Hola de nuevo Potro me alegro de tu vuelta, sabia que regresarias por eso te seguía teniendo en mi escritorio. un saludo
ResponderEliminarHola de nuevo Potro: te tenía en mi escritorio porque sabía que volverias, me alegro.
ResponderEliminarun saludo
Gracias Priamo, qué gusto saber que tú también estás de vuelta por acá.
Eliminarquerido Potro, me gustaria saber si sabes como poner uno de estos formularios de contacto, para que se vean en una pagina estatica del blog (estoy empezando con este blog http://eldiariodelassumis.blogspot.com y me gustaria poner el formulario en la pestaña que dice "Cuentame" pero que quedara encima de todas las entradas con esa etiqueta... ) no se si se entiende ... Gracias por volver!
ResponderEliminarSe entiende perfectamente ;)
EliminarMira esta entrada de Oloblogger, ahí explica cómo poner el gadget en una página estática:
http://www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html
Muchas gracias Potro... ! tus entradas siempre me resuelven las dudas :) ... deberias escribir un libro sobre blogger :)
EliminarGracias a ti :)
EliminarExcelente post y la verdad Blogger estaba en mora de colocar el gadget referente.
ResponderEliminarNo hay de qué ;)
ResponderEliminar¿Cómo hago para ponerlo en inglés? ¿O cambiará en función del sitio donde se visualice la página?
ResponderEliminarSegún recuerdo el idioma de los gadgets cambia al momento que en tu Escritorio de Blogger cambias el idioma, eso se cambia en la parte superior derecha, junto al icono del engrane.
EliminarPues... no me funciona. añadi el codigo (limón) guarde y el formularo sigue igual.
ResponderEliminarhttp://mygymradio.blogspot.com.es
Lo que ha pasado es que al poner el código eliminaste una llave de cierre } del código que está arriba. Eso ha hecho que no funcionen estos estilos. En esta entrada hay más información sobre ello:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Hola Potro, no sabia que habia formulario de blogger, está muy bien pero yo queria meterlo destro de una página llamada contacto, no como gadget.
ResponderEliminarComo puedo hacerlo?
Gracias
Hola Vhila, en el comentario #51.1 he dejado un enlace que explica cómo hacer lo que deseas.
EliminarSaludos.
Potro, encantada de saludarte, no consigo el ]]> en el blog, me podrías ayudar, es urgente, debo mejorar el blog
ResponderEliminarHola, da click dentro del área de los códigos, luego presiona CTRL + F y busca esa etiqueta. Pero es importante que des ese click en los códigos para que se active el buscador del editor y no el del navegador.
EliminarHola potro espero me recuerdes! Se me hace que te fuiste a un crucero en tu año sabatico jejesaludos que gusto que ya andes de regreso.
ResponderEliminarMe podrias ayudar? como le hago para poner este gadget en una página estática?
saludos cordiales :)
Uy, qué más quisiera haberme estado en un crucero todo este tiempo, yo creo que hasta me quedaba dos años ahí :)
EliminarMira el comentario #51.1 ahí puse un enlace donde Oloman explica cómo hacerlo.
Saludos!
excelente... me encanto
ResponderEliminarHola Potro otra vez por aquí. mi bolg es: http://odiliabendezuart.blogspot.com.es/, tengo otra consulta. He intentado agregar el gadget para correo de contacto, pero había que suscribirse a feedburner, lo hice por que no había otra opción mas, el gadget esta creado pero solo sale un un recuadro donde dice Email adress...... Submit, pero al abrir vuelve a pedir que suscriba a feedburner y nada más... parece que no está bien verdad? que hago? por favor dime. Por otro lado, en diseño de codigo HTML solo encuentro <:skin>... ó <b:template-skin...<...</b:template-skin
ResponderEliminarno me aparecen las dos barras y tampoco las tengo en el teclado para buscarlas, mi pregunta es como soluciono lo de feedburner y en caso de solucionar eso exactamente en que lugar pegaría los códigos del estilo básico? hay que pegarlo todo lo que pones allí verdad?. Nuevamente gracias por adelantado... a ver si al menos doy un paso mas...Un abrazo
Hola Odilia. Te platico un poco sobre este tema de la suscripción al feed por correo:
EliminarSi no tenías una cuenta de Fedburner entonces al momento de agregar el gadget se te crea una (con tu misma cuenta de Google ya que Feedburner es de Google), incluso si entras a Feedburner con tu cuenta de Google (la misma que usas para tu blog) verás que aparece un feed que es el de tu blog donde agregaste el gadget. Se supone que ya debe estar habilitada la suscripción por correo, en caso contrario sólo habilita dicha opción en las opciones de configuración.
Ahora, el gadget ya que esté en tu blog cuando la gente ponga su dirección de correo se abrirá una ventana pop up para que confirmen que se quieren suscribir, esto es para todos. Una vez que el suscriptor confirma que quiere suscribirse a tu blog le llegará un correo de activación, realizando esa activación ya podrá recibir las actualizaciones de tu blog en su correo.
En cuanto a la etiqueta ]]></b:skin> la puedes encontrar haciendo click a la flechita que está junto a <b:skin>...</b:skin>
Saludos.
Hola Potro, perdona... he seguido todo el proceso, ya copié y pegué el código del estilo básico exactamente allí, antes de las llaves, donde indicas, pero no ha cambiado nada, es decir no aparece nada mas que la ventana de feedburner cuando introduces el correo electrónico, falla algo verdad? y por que me sale la palabra Submit (suscribirse - en inglés) como lo cambio a español...Gracias y disculpa nuevamente Ckac!!!
EliminarHola de nuevo. Creo que hay una confusión. El gadget de suscripción es uno, y el gadget de contacto es otro. El de suscripción (que es el que tienes puesto) es para que los usuarios puedan recibir las entradas de tu blog en su correo. El de contacto (que es el que se menciona en este post) es para que los usuarios puedan enviarte un mail desde tu blog.
EliminarSi quieres cambiar esos textos del inglés al español busca los textos en la plantilla y cámbialos por los que desees. Para que te sea más fácil, esos textos los encuentras después del gadget que tiene como ID 'FollowByEmail1', o bien, busca el gadget que se llama "Correo de Contacto".
Pero repito, ese no es para ponerse en contacto contigo, sino para que se suscriban a tu blog.
Si, si, eso es lo que pasó, he confundido los términos, (es lo que tiene ser novata) efectivamente son cosas diferentes, gracias por aclararme, en realidad lo que quería poner es el correo electrónico, para que pudieran escribirme, y he creado el de suscripción, ya me servirás igualmente, gracias por decirme donde cambiar el texto de submit... No quisiera abusar de tu confianza pero me sería de gran ayuda si me dijeras (por favor) como enlazar la dirección de mi correo electrónico en la pagina (pestaña) que tengo creada para contacto. estuve viendo algo relacionado como lo siguiente poniendo mis datos Mi correo pero lo que no sé es donde ponerlo y donde me lo colocará una vez que lo ponga. podrías explicarme? como lo `pongo de manera que me salga en la pestaña que tengo creada como Contacto. gracias, gracias, muchas gracias por tu infinita paciencia, genio!!!
Eliminar¿Te refieres a poner el gadget de contacto en la pestaña "Contacto"? Puedes hacerlo siguiendo esta entrada de Oloblogger:
Eliminarhttp://www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html
Si no quieres poner el gadget de Contacto también puedes optar por un sencillo botón para enviar correos, como este:
http://ciudadblogger.com/2009/10/opcion-de-enviar-mail-con-asunto-y.html
O algo más sencillo aun, una imagen que enlace a tu correo:
http://ciudadblogger.com/2009/04/imagen-de-correo-personalizado.html
Me temo que ha creado un ícono y lo ha ubicado en la parte superior izquierda del blog, y no hay nada mas que espacio, y ahora ya no lo ubico en en HTML, como hago para cubicarlo y cambiar de lugar o corregir lo que está mal, en su defecto eliminarlo? por favor... disculpa mi torpeza, pero así estoy aprendiendo, solo espero que puedas ayudarme... gracias...
EliminarEs porque el código lo has puesto después de la etiqueta BODY.
EliminarDebes poner el código donde quieras mostrarlo, ya sea en un gadget HTML/Javascript, o dentro de la página Contacto.
También te recomiendo que si vas a usar la imagen del correo que genera ese sitio, subas la imagen tu misma a Picasaweb para que no dependas de ese servidor ya que sus imágenes se eliminan después de un rato y por eso ya no aparece más en tu blog.
Saludos.
Excelente tutorial, Estoy haciendo mis pininos desde cero e inserté el código para el estilo postal en http://matematicas-amables.blogspot.mx/ el problema es que el texto "Formulario de contacto" aparece a la izquierda del blog y el formulario insertado está en el centro. ¿Así debe de ser? ¿No pueden aparecer en el mismo lado? Gracias anticipadas.
ResponderEliminarHola, sólo agrega estos estilos en tu plantilla:
Eliminar#ContactForm1 h2 {
text-align: center;
}
Saludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarMuchas gracias por esta entrada, está genial. Combinando dos tutoriales uno tuyo y otro de Oloman, conseguí algo un poco apañado, en una página estática, y me gusta mucho como queda. Un saludo Potro ;)
ResponderEliminarQué gusto me da saberlo Maluy, que tengas buen inicio de semana!
EliminarSe me olvidó darte el link exacto, por si quieres verlo http://loqueheprobadohoy.blogspot.com.es/p/contacto.html
ResponderEliminar;)
Mucho gusto nuevamente, ya lo he puesto en el blog: http://todoeventosgt.blogspot.com/ solo tengo una consulta: yo estoy como "administrador" y tengo otro usuario como "autor" como hago para que los correos enviados por el formulario le lleguen al autor y no al administrador. Gracias.
ResponderEliminarMe temo que no se puede modificar la dirección de envío Daniel, por defecto llega al administrador. Supongo que tendrás que crear una regla en tu gestor de correo para que todos los envíos que lleguen desde aquí se reenvíen a la cuenta del autor.
Eliminar¿El widget no se puede abrir en una pestaña nueva, que no sea fijo en la barra lateral, sino que la pueda vincular a un boton de mensajes?
ResponderEliminarPodrías poner el gadget en una página de tu blog (en los comentarios he puesto varias veces un enlace a ese tutorial) y luego en tu sidebar podrías poner un enlace a esa página, ya sea un enlace de texto o una imagen.
EliminarY, donde puedo conseguir el código de los botones sociales que tienes en la portada...los del feed, correo, facebook....?
ResponderEliminarMás adelante lo publicaré, ya lo tengo contemplado.
EliminarHola Potro, perdoname la ignorancia, pero, Cual es la funcion e importancia del formulario de contacto? No soy muy diestra en estos menesteres. Gracias. Me alegra mucho que hayas vuelto, mi blog es lo que es gracias a tus ayudas.
ResponderEliminarGracias Coromitas Franco, los formularios de contacto tienen muchos usos según las necesidades de cada blog, algunos lo usan para que los usuarios puedan mandar sus dudas a los autores del blog, otros lo usan para que los usuarios reporten algún link roto o algún problema con el blog, otros lo usan para mandar saludos, etc.
EliminarNo todos los blogs necesitan un formulario, pero hay muchos que sí, y como te decía antes, dependiendo del blog es el tipo de uso que se les da a estos formularios.
Saludos.
Muchisimas gracias Potro. Saludos para ti tambien.
EliminarHola Potro, tengo un problema con el formulario de contacto. El botón para el enviar el formulario al parecer no esta cumpliendo con su función, ya que al hacer click no envía el formulario. Si te puedes dar una vuelta por mi blog, te lo agradecería. Saludos! http://fedormeinhardt.blogspot.com/p/blog-page_2.html
ResponderEliminarHola, acabo de hacer una prueba y al parecer sí se ha enviado, o al menos eso dice cuando le doy click en Enviar: http://oi58.tinypic.com/13ye908.jpg
EliminarHola potro, sí, ayer mismo lo pude resolver, verifique los pasos nuevamente, y me faltaba un codigo. Gracias!
EliminarWow! Estan hermosos!
ResponderEliminarGracias por compartir!
A ver cual escojo de todos jajaja
Qué bueno que te han gustado porque me llevó varias horas hacerlos :P
EliminarMe encanta el de air mail, muchas gracias por los aportes, y por ponerte a diseñar estas cosas y compartirlo con todos, que grande eres potro.
ResponderEliminarUna pregunta, ya para rizar el rizo: se puede editar de forma que quede en dos columnas? los campos de nombre y correo a la izquierda y el campo para mensaje a la derecha, para que quede en horizontal y no en vertical. He estado buscando algo por ahí y encontré códigos pero no logro aplicarlo al de blogger... Muchas gracias
Gracias Andrea, el de air mail es mi favorito :)
EliminarIntenta haciendo lo siguiente: localiza el código del formulario y con mucho cuidado elimina toda esta parte:
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
Una vez que lo has quitado pon esto en su lugar:
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<div style="float:left;">
<p>Nombre<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>Correo electrónico *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
</div>
<div style="float:left;">
<p>Mensaje *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>
</div>
Espero que eso dé los resultados esperados.
Saludos.
Perfecto!
EliminarHola, gracias por compartir estas explicaciones con todos. Como soy el más torpe de por aquí, necesitaba saber cómo se implementan estos formularios. Vamos, que no creo que cogiendo el código de cualquiera de los ejemplos de arriba y poniéndolo en html de algún gadget o página funcione. Quería saber si primero quizá, hay que crear el de blogger, luego localizarlo en plantilla y cambiarlo. Y luego, decir que necesito implementarlo en una de las páginas que se crean con blogger, una que yo he llamado CONTACTO, y deseaba ponerla al final de un texto que tengo. Gracias por la paciencia
ResponderEliminarHola lilolaleilo. Si el formulario lo quieres en la sidebar entonces sí, primero debes añadir el gadget desde la opción "Añadir un gadget" en Diseño, y después pegar el código del formulario que más te guste donde se indica. Con eso ya tendrás el formulario y con el estilo modificado.
EliminarAhora que, si lo quieres en una página entonces mira el comentario #51.1, ahí hay un enlace donde se explica cómo poner el formulario de contacto de Blogger en una página estática.
Saludos.
Son geniales, los he probado y me funcionan sin problemas. Gracias
ResponderEliminarHola Porto, que tu aporte es estupendo no te lo digo que lo has oido miles de veces :)). Dime porfa como cambio los : nombre , correo electronico, enviar en otra idioma ? intento busca en el codigo y no los encuentros. Con umil respeto Valerio, blogger principiante.
ResponderEliminarMuchas gracias Val Eriu. Mira el comentario #71.1, si sustituyes el código por ese verás esos nombres y pondrás modificarlos por los que gustes. Saludos.
EliminarHola Potro, como siempre vengo a dejarte u̶n̶o̶s̶ un comentario.
ResponderEliminarMiré la entrada que aparece en el comentario 51.1, lo intenté, pero me cuesta entender las explicaciones de Oloman, ya le mandé un comentario pidiéndole ayuda.
Su entrada sirve para colocar el diseño que el colocó en su blog y no alguno de los tuyos (que son los que me gustan) Espero puedas ayudarme (como siempre.) Mil millones de gracias.
P.D: ¿Puedes hablar sobre los avisos legales que circulan en las páginas web?
Hola Facu, omite el primer paso de su entrada, sólo pega el último código en tu página estática, y si lo deseas usa uno de los estilos que menciono en esta misma entrada.
EliminarSobre los avisos legales no tengo nada, de hecho yo no tengo uno en el mío :(
Agregué el gadget. Borré el codigo en gris. Y agregué el ultimo código en una página nueva. No funcionó. Qué salió mal?
EliminarNo hay que agregar el gadget pues no lo quieres en un gadget, sólo agrega lo que indica Oloman en su entrada, agrégalo en una página.
EliminarCopié el ultimo código y lo pegué en una página en blanco, aquí está: http://arrobaejemplo.blogspot.com.ar/p/blog-page.html
EliminarSe ve como un gadget, pero, no funciona.
Por favor ayúdame, gracias Potro!
Ya veo :/
EliminarQuizá debas consultarle a Oloman, seguro él te puede decir si aun funciona ese método, o si hay algo que está faltando por hacer.
Luego de muchos, muchos, comentarios y de que Oloman casi sufriera una crisis nerviosa, con su ayuda, he logrado que funcione. Gracias Potro!
EliminarMe alegro que lo hayas resuelto :)
Eliminarhola potro
ResponderEliminarla pregunta es adonde llegan los mensajes enviados desde estos formularios a q cuenta......
Hola, los correos llegan a tu cuenta de correo de Google, la misma que usas para ingresar a tu blog.
Eliminarhola el potro
ResponderEliminarmuchas gracias por tu ayuda ya logre solucionar el inconveniente solo que llegaban pero se almacenaban en correos sociales y quite el filtro y listo.
ahora tengo otras pregunta si hay posibilidad de editar este formulario cambiar tamaño y color o agregar mas campos.... te agradezco de todos modos ahora que lo tenga listo te muestro el blog principal para que le des el visto bueno...
Hola, cambiar el aspecto sí, a razón de ello es que se publicó esta entrada. Viendo los estilos podrás personalizarlo más si lo deseas. Agregar o eliminar campos es imposible por ahora.
EliminarHola El Potro,
ResponderEliminarHe colocado un Formulario de contacto sencillo en mi blog, pero me gustaría saber si puedo añadir una nueva frase con casilla que ponga Asunto*, encima del mensaje, con su respectivo cajón y que sea obligatorio el ponerlo (*), como lo tengo puesto para email y mensaje.
Ya me dirás, muchas gracias.
Saludos.
¿De este mismo formulario de Blogger? Imposible, por ahora no se le pueden añadir más campos que los que ofrece. :(
EliminarOk, lo dejaremos así de momento. A ver si lo mejoran.
EliminarMuchas gracias.
Saludos.
Otra vez el pesado jeje Potro sabes como podemos cambiar el texto que aparece? es decir modificar el "nombre" "correo electronico" "Mensaje"... hay alguna forma de hacerlo? Muchisimas gracias
ResponderEliminarBusca estas partes en tu plantilla y cámbialos:
Eliminar<data:contactFormNameMsg/>
<data:contactFormEmailMsg/>
<data:contactFormMessageMsg/>
El primero es para el "Nombre", el segundo para "Correo electrónico" y el tercero para "Mensaje".
Mil gracias de nuevo un abrazo!
EliminarHola Potro!! Muy buenos todos los trucos y ayudas que das! Te hago una pregunta, y perdón si ya la respondiste, intente ver si alguién había preguntado pero son muchos los comentarios. Quería saber si es posible poner el formulario de contacto en una página por ejemplo, y en la página principal solamente poner un enlace al formulario. Gracias!!
ResponderEliminarHola :) En el comentario #51.1 hay un enlace donde se explica lo que deseas. ¡Saludos!
EliminarGracias Potro!! Ya pude ponerlo en una página estática!!
EliminarHola Jeffrey, en la entrada se explica cómo poner el gadget y cómo poner uno de estos diseños si o deseas. Sólo hay que seguir las instrucciones, no hay que hacer nada más.
ResponderEliminarMuchísimas gracias! Puse esta modificación en mi Blog y quedó precioso ^^ (solo el detalle que la cinta quedó arriba de otro widget pero es un detalle y se ve mas mono jajaja)
ResponderEliminarSaludos!
Me alegro que te haya gustado tanto como a nosotros :)
EliminarDisculpa que moleste tanto. He puesto el formato que indicas para el Contacto, pero no puedo escribir, puedes ayudarme? http://marocuri.blogspot.com/
ResponderEliminarGracias y disculpa.
Es por el código que bloquea el botón derecho, ese mismo código impide que los formularios, buscadores etc. dejen de funcionar. La única forma de hacerlos funcionar es quitar ese código.
EliminarBuenas noches potro, tengo una consulta que hacerte, yo tengo el formulario de blogger pero lo unico que me gustaria agregarle seria un borde y cambiar el color del boton por lo demas lo dejaria como esta, ¿como tengo que agregarle solo lo que te digo?
ResponderEliminarun saludo
Hola teo - fermi, agrega estos estilos en tu plantilla:
Eliminar.contact-form-widget {
border: 5px solid #ccc;
}
.contact-form-button-submit {
background: #28597a;
border: none;
color: #fff;
}
Saludos.
He puesto los estilos que me dices pero el recuadro queda abierto por arriba y el boton no cambia de color..
EliminarHola, ¿me puedes mostrar en cuál blog lo has puesto?
Eliminarholaa de nuevo, he hecho una captura para que veas como queda, si es posible me gustaria que el borde quedara un poco mas separado del formulario.
Eliminarhttp://i398.photobucket.com/albums/pp66/Teoferrmi1/Dibujo.png
Hola, es necesario que guardes los cambios para que pueda entrar a tu blog e inspeccionar el elemento.
EliminarSaludo!
ResponderEliminarDesde República Dominicana.
Colega, me gustaría saber si puedo ponerlo en una entrada.
Saludos Rafael, mira en los comentarios, en varios de ellos he dado un enlace donde encontrarás la explicación para ponerlo dentro de una página o entrada.
EliminarHola Potro gracias por la atención, ya vi los mensajes.
ResponderEliminarOtra cosa, me gusto mucho tu estilo de plantilla móvil y agradeciera si me ayudaras a adaptar la mía para móvil ya que uso una de las que trae el sistema.
Feliz Dia!
mi pagina es esta http://negofinanzas.blogspot.com/
Eliminartambién me gustaría que me recomiendes a quien comprarle un dominio si eres tan amable.
Gracias!
Te lo debo Rafael, aún no tengo una entrada sobre las plantillas "responsive".
EliminarSobre el dominio, yo los compro en name.com pero hay varias opciones, una de las más populares es GoDaddy,
Saludo!
EliminarPotro gracias por tu respuestas, espero que hagas un post de responsive o adaptar la misma pagina a móvil ya que lo necesito.
Feliz Día!
hola potro,
ResponderEliminarquería preguntarte si se puede cambiar el ancho del formulario que viene por default?
y es que a mí me gusta mucho su simplicidad y me agrada cómo se ve así sencillo en mi blog, pero el problema que tengo es que no abarca el ancho que a mí me gustaría.
saludos n.n/
Hola Mile, en cualquiera de estos estilos verás que debajo de /* Contenedor principal */ hay un:
Eliminar.contact-form-widget {
width:100%;
Ese width es el ancho y lo puedes modificar si lo deseas.
vale, muchas gracias ^_^
Eliminarmm... muy interesante, en alguno de estos estilos, como podria adaptarlo para poner un codigo de autoresponder y hacerlo un formulario de suscripción lateral, con alguna imagen... Gracias por el aporte.
ResponderEliminarNo tiene la opción de autoresponder, esa opción dependería por completo de Blogger.
EliminarHola!!!! y Muchas Gracias por todo tu aporte a los que usamos blogger!!!! Muy Bueno!!!!!.
ResponderEliminarQuiero agregar el contac form pero necesito cambiar el nombre de los campos y la ubicación, lei la respuesta 79.1, pero no soy experta en códigos, los encuentro pero no me doy cuenta donde debo modificarlos por lo menos para cambiar la denominación.
Saludos y Muchas Gracias!!!!!
Hola Alicia, si ya has puesto el formulario de contacto en tu blog entonces entra en la pestaña "Plantilla", ahí da click en Edición de HTML, luego da click en cualquier parte de los códigos y a continuación presiona las teclas CTRL + F eso hará que se muestre un buscador, ahí busca el código que menciono en el comentario #79.1 y cámbialo por el texto que desees. Saludos.
EliminarHola parece que los formularios de contacto no estan funcionando :( es decir no llegan al correo. Ayudaaaa
ResponderEliminarNo sé si Blogger esté teniendo problemas con el gadget, no he sabido de nadie más que tenga tu problema. No está de más que revises si los tienes en la bandeja de spam.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar