Aunque esto la mayoría lo sabe hacer, aun me siguen preguntando seguido cómo hacer para cambiar el color de los botones de algunos gadgets, por ejemplo el botón de Buscar, el de Suscribir, etc.
El código común de un botón es como este:<input value="Buscar" name="button" type="submit"/>
Lo único que hay que hacer es agregarle un estilo para que tenga un color de fondo:
<input style="background-color: #FF9900" value="Buscar" name="button" type="submit"/>
También puedes modificar el color de la letra, para ello agregamos el estilo "color":
<input style="color: #FF0000" value="Buscar" name="button" type="submit"/>
O bien, puedes cambiar ambos:
<input style="color: #003366; background-color: #99CCFF" value="Buscar" name="button" type="submit"/>
O si lo prefieres, puedes usar una imagen de fondo:
<input style="color: #ffffff; background: url('URL de la imagen')" value="Buscar" name="button" type="submit">
Puedes también ponerle un borde al botón del grueso y el color que quieras:
<input style="border: #000 1px solid; background-color: #FF99FF" value="Buscar" name="button" type="submit">
Como ves, puedes hacer muchas variaciones para decorar tus botones, sólo es cuestión de que eches a andar tu creatividad y dejarás de tener los típicos botones grises.
Recuerda que donde dice value="Buscar" es el texto que aparece en el botón, también puedes jugar un poco con él y cambiar ese texto por otro.




Iconos RSS

47 comentarios:
hola!!!! ya he creado mi blog te queria preguntar si no lo podias poner en ''blogs de ayuda''gracias.
Hola Ivan,
Cuando tengas más tiempo con el blog y tengas más posts con gusto lo agrego.
Saludos.
Tomando apuntes... tomando apuntes...
Vamos a ver si con lo que nos enseñas en tu blog, mas lo que dice el libro, logro aprender algo. Si tu tienes algún otro material del que pueda aprender... te voy a estar eternamente agradecido.
Un abrazo!!!!
Jajaja, ya descansa un poco del estudio, entre tanta lectura y las radiaciones de tus explosivos vas a quedarte sin neuronas, jajaja.
Un abrazo.
Jajajaajajjaaj.... tienes razón!! mejor me voy a dar una vuelta por ahí, a despejar un poco las únicas neuronas que sobrevivieron a la radiación. jeje.
Un abrazo!!!
Hola.
¿Podrias poner mi blog en alguna lista de blogs?
Ultimamente tengo muchas visitas, pero no muchos dejan comentarios.
Saludos
Hola.
Me gustaron estos detalles para personalizar el buscador interno del blog... voy a hacerlo.
Saludos
Hola el venado,
Con agregarte a alguna lista la gente no va a comentar más o comentará menos. Eso es normal, menos del 10% de la gente que visita un blog deja un comentario.
Lo que puedes hacer es poner algunos gadgets de "Últimos comentarios" o "Top de comentaristas" algunos logran con estos gadgets que la gente comente más.
Saludos.
Hola Jorge,
Seguro quedará mejor el buscador con estos detalles =)
Saludos.
Holaa!
Me han gustado estos trucos y ya los he puesto en mi subscripcion
muy bien,
Aora mi duda,
¿como puedo dar una función a un boton?
es decir: si vas a mi blog, en las sidebar, al final de todo esta la subscripción y lo del seguimiento(sacado de ciudad blogger XD)
entonces me gustaria poner un boton en vez de la frase:"Haz clic para seguir este blog"
Se poner el boton, pero no se hacer para que cuando pinches sobre el salga la pagina de seguir
http://djnestornules.blogspot.com
No se si me habre explicado bien pero...
Espero tu respuesta!
Hola Dj Nestor,
Usa este código para poner el enlace en el botón:
<form action="URL del enlace"><input value="Seguir este blog" type="submit"/></form>
Saludos.
Muchas Gracias!!
ya esta puestoo
GRAX!!
Buenoo!
Aora me ha surgido otro problema, cuando le doi al boton de seguir me da el problema:
bX-g161gh
No se si sera por que es mi blog o no se
Blog: http://djnestornules.blogspot.com
Problema: http://img407.yfrog.com/img407/3473/problemag.png
GrAcIaaSss!!
Es un error de Blogger. Notifica este error en el foro de ayuda de Blogger para que algún empleado de Google te dé indicaciones.
http://www.google.com/support/forum/p/blogger?hl=es
Saludos.
Ok!
Ya esta puestoo
Graciaaas!!
JO
Aora otro problema :(
Me ha salido un problema diferente:(
bX-cxmeen
:(:(:(:(:(:(
Si supieras como arreglarlo...
Por si acaso lo pondre en el foro de ayuda pero aun no me han respondido al 1º problema, asi que no estoi mui seguro
Lamentablemente todos esos errores son de Blogger y sólo en el foro podrían decirte qué sucede. Aunque seguro te recomendarán que elimines las cookies y el cache de tu navegador.
Saludos.
No es necesario que mandes tu plantilla, sólo entra en Diseño > Edición de HTML y busca esta línea:
input id='search-submit' type='submit' value='Search'
Cambia lo que está en negrita por Buscar.
Saludos.
DISCULPAME POR MANDAR MI PAGINA SOLO QUERIA QUE VEAS EL BUSCADOR YA ILIMINE MI COMENTARIO Y OTRA CONSULTA SI FUERAS TAN AMABLE ME DIRIAS COMO CAMBIO EL COLOR DE LA LETRA Y EL COLOR DEL BORDE DONDE DISE (Buscar) DE MI PLANTILLA? Gracias y DISCULPA POR MENSIONAR MI PAGINA NO LO VOLVERE ASER
SALUDOS 100% CIUDADBLOGGER ^^
No, no, yo no decía que no pongas tu página, sino que no era necesario ver el archivo de la plantilla.
La página está bien, de hecho siempre es preferible que dejen la URL de su página para saber cuál es el problema ;)
Busca en tu plantilla esta parte:
#search-submit {
height: 21px;
margin-left: 12px;
color: #39561D;
Donde dice color es el color del texto, y para agregarle un borde pon debajo esto:
border: 1px solid #000;
En donde dice #000 puedes cambiar el color que quieras.
Saludos!
HOLA CREO Q TE CONFUNDISTE DE LUGAR O MI PLANTILLA DE MI BLOG ESTA DESORDENADO XD PERO BUENO LO COLOQUE EN AQUI Y ME FUNCIONO :
#search input {
float: left;
font: 12px Georgia, "Times New Roman", Times, serif;
border: none;
border: 1px solid #FFFF00;
SALUDOS !
100% CIUDADBLOGGER ^^
Tienes toda la razón, no noté que en tus estilos tenías #search input
Mil disculpas, hoy no sé dónde tengo la cabeza :S
Saludos.
Hola PeruanoTeve,
Si quieres eliminar el buscador entra en Diseño > Edición de HTML, busca este código y elimínalo:
<!-- Search -->
<div id='search'>
<form action='/search' method='get'>
<fieldset>
<input id='search-text' name='q' size='15' type='text'/>
<input id='search-submit' type='submit' value='Buscar'/>
</fieldset>
</form>
</div>
<!-- /Search -->
Saludos.
TY
^^
Potro quiero saber como centrar mi Titulo y que quede bien con bordes y todo... gracias
¿El título de tu blog?
hola bueno aqui te dejo mi blog de pruebas! aver si lo entiendes mira la cabecera esta hacia la izquierda! lo reemplaze en vez del titulo! lo que quiero es saber como centrarlo o si agrandar más la imagen ancho, etc! quisiera saber que tamaño debe ser mi cabecera para que encaje bien dependiendo del ancho de mi pantilla! gracias
aqui esta el link :
http://arquitecturadocumentos.blogspot.com/
Si subes la imagen de la cabecera desde Elementos de la página va a ser todo un lío, pues el espacio determinado para tu cabecera es muy reducido por lo cual se encimará la imagen al menú, y otros posibles elementos.
Lo recomendable es que busques en tu plantilla esta línea:
#header {
Y debajo de ella pegues esto:
background:url(URL de la imagen)center no-repeat;
Con eso la cabecera estará centrada de fondo y no interferirá con los demás elementos del blog.
Saludos.
Hola!! que tal, me agradó sobre manera éste post!! solo tengo una duda... cómo puedo hacer para que ésto mismo pase con los links que tengo, por ejemplo, cuando paso el puntero en una etqueta, me gustaría cambiar la apariencia de esa mini ventana! muchísimas gracias!!
Hola Eloy Monter,
Para personalizar los enlaces, cambiarles el color, color de fondo, etc. visita esta entrada.
¡Saludos!
Hola otra vez!! ya habia checado ese link, incluso ya lo llevé a la práctica! pero... mi duda es otra... he notado que cuando tenemos un botón o un link en blogger aparece siempre el título del enlace con un fondo igual al de los botones que nos enseñaste a modificar en este post!
por ejemplo si creo un botón en un menú con listas, y a cada botón le pongo un nombre, por ejemplo ( title="Principal" ) cuando ponga el puntero sobre el enlace aparece el nombre que pusimos en "title" con ese mismo fondo, mi duda, es cómo modificar ese fondo ??
espero puedas ayudarme! gracias por la atención paracon tus seguidores! ^^
Hola de nuevo Eloy,
Creo que ya te he entendido ¿te refieres al título del enlace que aparece al poner el cursor sobre él?
Por defecto esos títulos (tooltips) tienen un color de fondo como arena, según el navegador, pero hay diferentes formas de personalizarlo.
Yo no tengo un post que hable sobre ello pero te dejo un enlace que explica cómo hacerlo:
http://vagabundia.blogspot.com/2006/11/tooltips-usando-css.html
¡Saludos!
Muchas, Muchas gracias!! si, eso es lo que buscaba!!
nuevamente, gracias por la atención!!!
saludos!!
Hola potro! deseo que me ayudes que problema tengo en la cabecera de mi blog, bueno lo dividi en dos partes de acuerdo a unos pasos que segui! pero por ejemplo deseo poner al costado del titulo un buscador y aparece de la sigte forma de agranda o se disrtociona, échale un vistazo! gracias
http://tuvideostube.blogspot.com/
Quizá el gadget del buscador está muy grande o quizá faltó limpiar los estilos de la cabecera.
Intenta poner otro gadget, si sucede lo mismo pregunta donde viste cómo dividir la cabecera qué estaría pasando, quizá sólo sea un pequeño detalle.
Potro si siogue igual con otro gadget, bueno lo vi aqui : http://elescaparatederosa.blogspot.com/2008/11/dividir-la-cabecera-del-blog.html
Potro!! parece que ya lo arregle tenia que eliminar unos bordes! bueno pero ahora como lo centro osea el buscador esta muy arriba, noc si me dejaré entender!
ah otra cosa noc por que mi barra de menú se movio o se centro el HOME - about .etc
Mira aquí cómo alinear gadgets.
Si el menú se movió sí debe ser por lo que te decía que había que limpiar los estilos o quizá hayas excedido en el tamaño al dividir la cabecera.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.