Notis

Síguenos en Twitter: @teoria_blogger | Para tu blog, recomendamos: que el diseño no esté cargado, que las entradas no sean muy largas y que contengan imágenes. Para más consejos Click aquí | Pon un link de Teoría Blogger en tu blog!!! Click aquí. | Para cualquier duda o problema sobre tu blog, escríbenos en nuestro formulario de contacto.
Mostrando entradas con la etiqueta Elementos. Mostrar todas las entradas
Mostrando entradas con la etiqueta Elementos. Mostrar todas las entradas

domingo, 18 de marzo de 2012

Mostrar tus Tweets en tu blog (widget de Twitter)

Sabemos que hoy se obtienen visitas y tráfico por los motores de búsqueda y principalmente por las redes sociales. Es aquí a donde elige ir la mayoría de los usuarios en Interte en todo el planeta.Entonces qué mejor que tener parte de una de las redes sociales más visitadas en tu blog.
En esta ocasión elegimos Twitter, que nos ofrece un gadget que permite que tus lectores vean tus tweets de manera muy práctica.
Widget de Twitter en blog

Tener widget de Twitter en tu blog
  1. Entra a Twitter e inicia sesión [twitter.com]
  2. Ahora nos centramos en la parte inferior de la columna izquierda y vemos el link Recursos
    Recursos de Twitter
  3. Entramos en este link y nos guía a una página la cual le daremos click en "Widgets" [Click en imagen para ampliarla]
    Widgets de los recursos de Twitter
  4. Luego iremos a una página en la que haremos click en la solapa "Mi sitio web" y luego cliqueamos en "Widget de perfil" [Click en imagen para ampliarla]
    Mi sitio webClick en widget de perfil
Una vez que hicimos este último paso, vamos a tener la siguiente pantalla:
Personalizar el widget a tu manera
En el que podemos modificar los colores en la solapa "Apariencia", modificar las medidas en la solapa "Dimensiones", o modificar la cantidad de tweets que querés que muestre en "Preferencias".
Cuando ya tengamos listo nuestro widget, vamos a hacer click en el botón "Finalizar & guardar código " [Ver imagen].

A continuación copiaremos el código que nos aparece [Ver imagen] y sigue los siguientes pasos, luego de la siguiente imagen.

  1. Abrimos una pestaña o ventana nueva de tu navegador...
  2. Vamos a Blogger
  3. Diseño
  4. Click en "Añadir un gadget"
  5. Elegir el gadget del tipo HTML/Javascript
    HTML/Javascript
  6. Pega el código copiado en Twitter
  7. Guardar gadget → Guardar los cambios.

[Pasos para la anterior interfazBlogger → Diseño → Elementos de la página →
Click en "añadir un gadget" → Elegir el gadget en modo
HTML/Javascript→ Pegar código
]

martes, 17 de enero de 2012

¿Cuánto falta para que termine el día?

Este reloj va en cuenta regresiva y te indica cuántas horas, minutos o segundos falta para que termine el día.
Esto sólo se puede añadir a un gadget del blog, ya que este truco lo conforma un script. La única manera de agregarlo en una entrada es poniendo el script solo en un gadget, y en la entrada poner el código HTML ligado al script.
¡No te preocupes! Explicaremos ambas formas.
Aplicar la cuenta regresiva

Tener la cuenta regresiva en un gadget

Para esto vamos a Blogger → Diseño → Elementos de la página [Antigua interfaz] → Añadir un gadget → Elegir el modo HTML/Javascript → Pega el siguiente código en ese gadget:
<form name="Reloj">
<input size="7" name="tiempo" value="mm:hh:ss" title="Tiempo para que finalice el día..." type="text" style="color:lime;font-weight:bold;background:black;" /></form><script type="text/javascript" src="https://sites.google.com/site/teoriabloggerad/home/scripts-para-los-trucos/Cuentaregresivadeldia.js"/>
Guardar el gadget y todos los cambios y vé tu blog!

Tener la cuenta regresiva en una entrada

Para esto debemos aplicar el script en un gadget. Entonces vamos a Diseño → Elementos de la página → Añadir un gadget → Elegir el gadget en modo HTML/Javascript → Pega el siguiente script:
<script type="text/javascript" src="https://sites.google.com/site/teoriabloggerad/home/scripts-para-los-trucos/Cuentaregresivadeldia.js"/>
Guarda los cambios.
Ahora vamos a crear una nueva entrada o abrimos una entrada ya publicada. En la entrada [Blogger → Creación de entradas o Nueva entrada (nueva interfaz) → Nueva entrada (sólo para la anterior interfaz)] → Pega el siguiente código:
<form name="Reloj">
<input size="7" name="tiempo" value="mm:hh:ss" title="Tiempo para que finalice el día..." type="text" style="color:lime;font-weight:bold;background:black;" /></form>
Publica la entrada y mira el blog
Para saber:
No se pueden tener dos relojes al mismo tiempo de ninguna manera. Si así se hace, no funcionarán.


Contadores de distintos colores






























domingo, 11 de septiembre de 2011

Encuestas muy interesantes para tu blog

Seguramente la mayoría de los blogueros de Blogger, han puesto una encuesta en su blog con el gadget que nos ofrece Blogger. Si bien es una opción, existe una página que no sólo crea las encuestas, sino que también nos da la oportunidad de modificarlas y personalizarlas.
Encuestas en Blogger
Esta es la opción que nos ofrece Blogger
para insertar una encuesta en el diseño del blog

99polls es una página que nos permite crear encuestas flash. Dichas encuestas de dicha página, son simples, ya que cuentan con lo escencial: La pregunta, las opciones, un botón para votar y un botón de resultado.
También nos permite modificar sus colores (ya sean los de las letras, de las preguntas, de los bordes).
Una de las características, respecto de su función, es que sólo nos permite votar una sola vez. De ninguna manera se puede votar dos veces (salvo que tengamos dos ordenadores).

Crear encuestas gratis y eficientes1- Vamos a 99polls.com
2- Damos clic a Registrarse
registrarse en 99polls.com
4- Llenamos el simple formulario y damos clic en donde dice "Para hacer su primera encuesta Hacer clic acá" (como se ve en la siguiente imagen).Crear nuestra primer encuesta
5- Ahora vamos a elegir las funciones de la encuesta:
a) Allí elegimos el diseño (Tema) de la encuesta, entre la gran variedad que se nos presenta.
b) El ancho de la encuesta (recuerda que los números son en píxeles).
c) El color del fondo con código hex. O también puedes cambiarlo con la paleta que nos ofrece.
d) La pregunta la cual vamos a interrogar a los lectores
f) Las respuestas que nos van a dar los lectores (hay un límite de hasta 9 respuestas). Además nos da la opción que asignarle una imagen para cada encuesta.
g) Luego nos da la opción de elegir si queremos que nuestra encuesta aparezca en el listado de encuesta de 99polls.com o no.
h) Aquí van una especie de etiquetas o tags que se ponen para que sea más facil la búsqueda de tu encuesta.
Personalizar tu encuesta
6- Una vez hecho todo, hacemos clic en el botón guardar y luego nos aparecerá la página en la que nos aparece el código para insertar lo en el sidebar o en un post.
Lo copiamos y lo pegamos en donde quieras (los sectores ya nombrados).
Copiar el código de la encuesta y pegarla en un post o el sidebar
7- Para insertarlo en tu blog debemos ir a Blogger y debemos elegir entre publicarlo en una entrada o en un gadget.
Si es en una entrada vamos a Creación de entradas → Nueva entrada → Y lo pegamos en el editor de entradas. Luego lo publicamos.
En cambio, si es en un gadget, vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget de tipo HTML/Javascript y lo pegamos allí. Luego lo guardamos.

Crear un diseño para tu encuesta

Cuando creamos la encuesta, en el paso 5- a, elegimos el tema para la encuesta. Las opciones son variadas, pero puede pasar que no estemos satisfechos con algún diseño y queremos que tenga los colores que nosotros queramos.
Para eso vamos a la solapa "Mis Temas" que aparece en la siguiente imagen:
Mis temas
Una vez que entramos en la solapa Mis Temas, hacemos clic en donde dice "Para hacer su primer tema Hacer clic acá".
Crear el primer tema
Allí tenemos todas las opciones para modificar o crear tu tema para tu encuesta.

Consejo
Puedes crear un tema que tenga los colores de tu blog para que tenga la misma temática de éste.

jueves, 18 de agosto de 2011

Menú con cajas de redes sociales para tu blog

Atención! Como bien indica luego, este truco se aplica en un gadget (sidebar)

Como ya dijimos en posts anteriores, las redes sociales ya son una parte inevitable para incorporar a la actualidad a tu blog.
Entonces qué mejor que incorporarlos a tu blog, haciendo así, que los visitantes puedan acceder a ellas mediante un diseño cómodo, elegante y fácil.
Este truco se puede ver claramente a la derecha de Teoría Blogger:
Botonera de enlaces de redes sociales
Enlaces de redes socialesPara esto vamos a instalar el CSS en la plantilla yendo a Blogger.com → Diseño → Edición de HTML → buscamos la etiqueta </head> y arriba de este pegamos las siguientes fórmulas CSS:
<style>
/* LINKS DE REDES SOCIALES */
#seguir-redes-sociales {width:100%;float:right;}
.redsocialmenu {background:transparent;border:1px solid #898989;padding:10px;margin-bottom:10px;}
.redsocialmenu:hover{background:#CCCCCC;border:1px solid #898989;padding:10px;}
.redsocialmenu a {text-decoration:none;font-weight:bold;color:#555555;}
.redsocialmenu a:hover {text-decoration:none;font-weight:bold; color:#4CA5FF;}
.redsocialmenu img{vertical-align:middle;margin-right:5px}
</style>
Modificar el CSS[+]
Si los colores generales de las cajas no te gustan, puedes optar por cambiarlos de la siguiente forma:
En lo que está escrito en verde se puede poner transparent (está predeterminado) o puedes asignarle un código de color o el nombre. Esto sirve para cambiar el color al fondo de las cajas.
En lo que está escrito en rojo pasa lo mismo que en el anterior, pero en este caso se modifica el fondo de las cajas cuando un pasa el cursor por arriba de este.
En lo que está escrito en violeta vamos a poner una vez más el color que querramos para cambiar el color del link en el que vamos a entrar.
En lo que está escrito en amarillo vamos a poner otra vez el código o nombre del color para modificar el color del link al pasar el cursor sobre este.

Ahora vamos a insertar las cajas de los links de las redes sociales en un gadget, entonces vamos a Diseño → Elementos de la página → Añadir un gadget → Elegimos el tipo de gadget HTML/Javascript → Ahora copiamos el siguiente código HTML:

<div id="seguir-redes-sociales">
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzoSHZOKTR0_rMZAT1os2R-SkRiOgmoglocLTsuUxWiK8zS9HlUs35duOqdrMzOB8V2CL-dHwOmdGybBeTzIWXC0JBFIxmxJyEi_zC5uEAPWprcdGOKdRgqWAQfZCow537gnxVVqgIdQ/s0/social-connect-facebook.png" title="Hazte Fan!" alt="Facebook" /> <a href="URL de página en Facebook">Facebook</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z5Fz__R2oUuyS_dxTPtImz-1H7G1014MZBDMomG7ZKpfNuioEbMCb_beBwkOUBqzWz8XIdFLXGE7sq2ULHxz47aaKMjdf3d6GRm4OdORm7JgTlqhswTWesDjB0Rir4XFJYvvxsEDljs/s0/social-connect-twitter.png" title="Sígueme!" alt="Twitter" /> <a href="URL de Twitter">Twitter</a>
</div>
<div class="redsocialmenu">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IHn0uwL1gwzynncLWa3niJjktf3Jpkrd5ZqcPx0G47aBEIfVaQdx_HCMoM0QuOUvFlrB3iuQQNf1EdNlfw8Hzixk7gtH2j3Z8wnv8LeCMHa6KW-bi454h2-qdLzuJP212U2oijsO3aA/s1600/youtube-logo.png" title="Obsérvanos!" alt="Youtube" /> <a href="URL de usuario en Youtube">You Tube</a>
</div>
</div>

Como es posible deducir, en lo que está marcado en distintos colores va la URL de:
  • La página en Facebook
  • Tu usuario en Twitter
  • Y tu canal en Youtube

martes, 8 de febrero de 2011

Marquesinas al estilo Teoría Blogger

Estilo T.B.




Blanco y negro




Negro y blanco




Azul




Rojo




Verde




Naranja




Amarillo




Violeta




Fuccia




Dorado




Marrón




Morado




Plateado




Agregar una caja marquesina en mi blogPara hacerlo, simplemente debes copiar el objeto deseado y puedes pegarlo en:
  • Una entrada: Blogger → Creación de entradas → Nueva entrada → Solapa Edición de HTML.
  • Un gadget: Blogger → Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript.
Personalizar tu cajaPara crear tu propia caja con los colores que quieras, cambia los códigos marcados en colores:
<p style="border: 1px solid black; padding: 10px; background: none repeat scroll 0% 0% rgb(32, 134, 202); color: rgb(255, 255, 255); font-family: arial,helvetica; font-size: 14px; font-weight: bold;"><marquee scrolldelay="30" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();">Texto phttp://www.blogger.com/img/blank.gifara exponer</marquee></p>
Modifica el código en color rojo para asignar el color del fondo.
Modifica el código en color verde para asignar el color de la letra
Modifica el texto en color azul para asignar un texto que quieras que sea expuesto.

Video explicativoVer video en Teoría Blogger videos | Ir a Teoría Blogger videos

domingo, 7 de noviembre de 2010

Muestra a tus usuarios qué día es hoy

El script que vamos a presentar en el día de hoy es un script que plasma la fecha del día, en un gadget, sacandolo de la fecha que está dispuesto en tu ordenador sin necesidad de actualizar manualmente la fecha todos los días. Una buena manera de facilitar la búsqueda de fecha en tu blog. El ejemplo se puede ver a la derecha de este mismo blog.
Asignar fecha a tu blogLa única manera de asignar este truco es añadirlo a un gadget. Entonces vamos a Blogger → Diseño → Elementos de la página → Añadir gadget → Modo HTML/Javascript y pegamos el siguiente código:
<script type="text/javascript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("domingo","lunes","martes",
"miércoles","jueves","viernes","sábado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio",
"Julio","Agosto","Septiembre","Octubre",
"Noviembre","Diciembre")
document.write("<p>Hoy es "+daym+" de "+montharray[month]+" del "+year+"</p>")
</script>
El resultado de este código es el siguiente:
Ejemplo 1: 'Hoy es 24 de noviembre del 2010'

domingo, 26 de septiembre de 2010

Agrandar o achicar textos en blog

Seguramente este truco ya lo haz visto, no sólo en algunos blogs, sino también en algunos periódicos virtuales.
Se trata de dos enlaces (en este caso botones) que hacen que las letras del blog completo se achiquen o agranden, según los que indique el botón, para gente con alguna discapacidad visual. Además incluye un botón que hace que las letras vuelvan al tamaño original.
Botones que permiten achicar o agrandar tamaños de letras
El ejemplo del truco, puedes encontrarlo en el Laboratorio de T.B (2)
Poner botones para agrandar o achicar letra en el blogHay un detalle que no mencioné, y es que este truco posee efectos de jquery.
Para instalar el Script del truco debemos ir a Blogger → Diseño → Edición de HTML → Buscamos la etiqueta </head> presionando ctrl+f → Cuando hayamos encontrado la etiqueta </head>, pegamos el siguiente código arriba de la etiqueta:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- más trucos jquery en teoriablogger.blogspot.com -->
<script type='text/javascript'>
$(function(){$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;a&#39;) {finalNum *= 1.1;}
else if (this.id == &#39;achicar&#39;){finalNum /=1.1;}
else if (this.id == &#39;reiniciar&#39;){finalNum =13;}
ourText.animate({fontSize: finalNum + stringEnding},500);});});
</script>
Si ya haz utilizado un código Jquery antes, no agregues el código que está escrito en rojo.
El próximo paso es agregar los botones al blog, a los botones los vamos a alojar en un gadget. Vamos a Blogger → Diseño → Elementos de la página → Elegimos la opción HTML/Javascript y pegamos los códgios siguientes:
<div id='resizefont'>
<input id="agrandar" title="teoriablogger.blogspot.com" type="button" value="A+" />
<input id="reiniciar" title="teoriablogger.blogspot.com" type="button" value="A" />
<input id="achicar" title="teoriablogger.blogspot.com" type="button" value="A-" />
</div>
Debes saber que estos botones sólo achican o agrandan palabras o letras, no imágenes o objetos de video o algo por el estilo.

jueves, 9 de septiembre de 2010

Quitar el número de entradas por categorías

Para ver este truco debes tener el gadget que ofrece Blogger, el gadget de Etiquetas. En este gadget se puede ver la lista de las etiquetas publicadas, y el número de entradas que hay en cada una, a la derecha.
Quitar el número de entradas publicadas por etiquetaPara sacarlo nesecitamos de dicho gadget. Entonces vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget: Etiquetas. Y si el gadget ya lo tienes añadido, haces click en el correspondiente gadget y en editar.
Click en Mostrar cantidad de entradas por etiqueta
Allí hacemos click en la gaceta, Mostrar cantidad de entradas por etiqueta.
Muestra de antes y después de la modificación

Ver video explicativo

miércoles, 8 de septiembre de 2010

Elementos que no deben faltar en un blog

A pesar de decoraciones que el administrador agrega por curisidad, existen elementos que no deben faltarle a un blog por ser básicos o por ser muy útiles.
Elementos y funciones para un blog
  1. Un Buscador: Es parte de la navegación de tu blog, permite más opciones de entradas a tus lectores y ayuda.
  2. Un formulario de contacto: Comunica el admnistrador con el lector, puede ayudar al administrador de un blog con sugerencias y opiniones.
  3. Blogroll: Es una lista de enlaces de blogs publicados a la columna lateral de un blog (o sea en un gadget).
  4. Un espacio de Entradas relacionadas: Con este elemento harás que hayan lectores que quieran leer algo relacionado con lo que les interesa. Otro elemento relacionado con la navegación.
  5. Listado de Categorías: Permite entradas clasificadas por categorías que aumentará el número de páginas vistas.
  6. Archivo de entradas: Haz una lista de todas las entradas según los días, meses o los años.

Valora tu blog en Blogdeldia.org

En el blog llamado Blog de día, una página que premia a los blogs más votados todos los días, hay una trivia de preguntas que te permite saber cuál es la puntuación de tu blog. En alguna parte del formulario, pregunta si tienes algunos de los elementos mencionados.

lunes, 23 de agosto de 2010

Crear link de "Añadir a favoritos"

Una forma de tener visitas en tu blog es que tengan tu blog incluida a la lista de favoritos o marcadores.
En este post enseño a crear un enlace en el que al hacer click abra una pequeña ventana del navegador (ya sea IE o Mozilla, sólo compatible con ambos navegadores).
El truco puede significar más popularidad y por esta razón, este puede ser un truco muy valioso y buscado por bloggers.
Obtener enlace para que marquen tu blog como favoritoPara lograrlo, la única manera es plasmarlo en un gadget entonces vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos la opción HTML/Javascript y pegamos este código (Siempre de modo Edición de HTML):
<script type="text/javascript">
function agregar(){
//IE
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://tublog.blogspot.com";
var titulo="Tu blog";
window.external.AddFavorite(url,titulo);
}

else {if(navigator.appName == "Netscape")
window.sidebar.addPanel("Tu blog", "http://tublog.blogspot.com","");}
}
</script>
<a title="Teoría Blogger" href="javascript:agregar()">Agregar a mis favoritos</a>
Para personalizar el script a modo de tu blog, reemplaza los datos coloreados por los de tu blog según corresponda:
Rojo = URL del blog
Verde = Nombre del blog
Obtener botón para que marquen tu blog como favoritoACTUALIZACIÓN EXCLUSIVA:
Hemos encontrado la forma de hacer que el enlace para añadir a favoritos, sea un botón. Así es más original y tienes más opciones de modificar el estilo a tu gusto.
Este truco hay que añadirlo como gadget entonces vamos a Blogger → Diseño → Elementos de la página → Elegimos el modo HTML/Javascript y pegamos el siguiente código:
<script type="text/javascript">
//Este truco en teoriablogger.blogspot.com
function agr(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://tublog.blogspot.com";var titulo="Tu blog";window.external.AddFavorite(url,titulo);}
else {
if(navigator.appName == "Netscape")
window.sidebar.addPanel("Tu blog", "http://tublog.blogspot.com","");}}
</script><input onclick="agr(this)" title="teoriablogger.blogspot.com" type="button" value="Añadir a favoritos" />

Post actualizado el 26 de septiembre de 2010. Este truco, en particular, fue creado por Teoría Blogger, si encuentran otro blog explicativo con este mismo truco, es coincidencia.

viernes, 16 de julio de 2010

Añade un buscador a tu blog

Un buscador es un elemento que debe estar en cualquier blog para ser parte de la navegación dentro de tu blog. Esto es muy utilizado por los usuarios para encontrar algún artículo o publicación interesante, ya sean en periódicos virtuales o en páginas de videos (como YouTube).

¿Por qué interno?

El buscador que vamos a dar es interno y significa que al ingresar una palabra y buscar esta, sólo buscará en el blog en es que esté. Por eso internos, porque busca internamente sin buscar resultados en otras páginas.
Insertar un buscador internoCon los párrafos anteriores quisimos dar a entender que es conveniente siempre navegar en el blog de uno mismo. Para esto daremos el código de un elemento básico interno:
<form action="/search" method="get"><input name="q" type="text"/></form>
Este código quedaría así:
Si lo copiaste y pegaste en una entrada o gadget, verás que el buscador está incompleto, ya que nisiquiera posee un botón. Pero en fin es un buscador porque al ingresar palabras, presionas enter y busca.
Completar el campo de búsquedaLos códigos dados anteriormente son los códigos de un buscador básico. Ahora le daremos a este buscador un botón y algunos trucos para completar.

Agregar un botón

Para agregarle un botón debemos incluir al formulario (que tiene como función buscar) una etiqueta más luego de la etiqueta del campo.
La etiqueta para agregar el botón, es este:
<input value="Buscar" type="submit" />
entonces el código completo hasta ahora es así:
<form action="/search" method="get"><input name="q" type="text"/><input value="Buscar" type="submit"></form>
Y el elemento así:

Trucos para completar

1) Podemos hacer que en el buscador haya una palabra predeterminada para guiar al lector de que ahí es donde se debe tipear.
Código completo:
<form action="/search" method="get"><input value="Buscar..." name="q" type="text"><input value="Buscar" type="submit"></form>

2) Un truco muy visto en muchas páginas consiste en que al hacer click en el campo de búsqueda, el texto que tiene escrito desaparece. Como podemos ver en el siguiente ejemplo:
Código:
<form action="/search" method="get"><input onfocus="if (this.value == 'Buscar...') {this.value = '';}" value="Buscar..." onblur="if (this.value == '') {this.value = 'Buscar...';}" name="q" type="text"><input value="Buscar" type="submit"></form>

3) También existe algo similar al anterior que consiste en que el texto desaparece sólo al pasar mouse sobre el campo:
<form action="/search" method="get"><input onmouseover="if (this.value == 'Buscar...') {this.value = '';}" onfocus="if (this.value == 'Buscar...') {this.value = '';}" value="Buscar..." onblur="if (this.value == '') {this.value = 'Buscar...';}" title="teoriablogger.blogspot.com" name="q" type="text"><input value="Buscar" type="submit"></form>
RECUERDA:
El último recuadro que trata sobre lo que el buscador puede llegar a tener y más sea completo (botón y algunos trucos), son totalmente opcionales. Sólo publicamos para hacer más rica la entrada.

lunes, 12 de julio de 2010

Mensaje de alerta en un enlace

Seguramente has visto esas pequeñas ventanas que aparecen al hacer click y se abre una ventana de alerta que muestra un mensaje y tiene un botón incrustado que dice "Aceptar".
Eso es posible mediante atributos HTML que se puede usar en forma de botón, imagen ó enlace.
Obtener un mensaje de alertaPara tener un mensaje de alerta con un botón copia y pega el siguiente código en un elemento [Blogger → Diseño → Añadir un gadget → HTML/JavaScript]:

<input value="Contenido del botón" name="Agregar un mensaje" onclick="alert(name)" title="teoriablogger.blogspot.com" type="button"></input>
El ejemplo:

Teoría
Como pudimos ver, en el código dado, se encuentra una etiqueta y cuatro atributos, vamos a enseñar cada uno en forma de resumen:

Etiquetas Atributos Valor
input type: es un atributo que se usa sólo para esta
etiqueta, <input>, consiste en indicarle
a esta etiqueta, qué función va a cumplir.
Por ejemplo, puede ser un botón, agregán-
dole el valor button; puede ser un campo de
contraseña, agregándole el valor password,
entre
otros.
button

onclick: comportamientos que se establecen
en HTML, generalmente usado para vincular
con Javascript.
alert(name)

name: en este caso, el valor de name puede
ser un valor a elección.
Valor a elección

value: el valor de este atributo es a elección. Valor a elección

Más info:
Los atributos que se usan para poder llevar a cabo este truco, se pueden usar en cualquiera de las etiquetas de las que mencionamos anteriormente (botón <button>, imagen <img>, enlace <a>).