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 Códigos HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta Códigos HTML. Mostrar todas las entradas

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






























sábado, 3 de diciembre de 2011

Etiqueta a - Crear enlaces (links)

Esta etiqueta es una de las más utilizadas ya que gracias a ella se crean los famosos enlaces o links. Los links nos enlazan o nos llevan a otras páginas al hacer click en uno de ellos.

Ejemplo

Un simple ejemplo, es el siguiente que nos llevará al inicio de esta página Teoría Blogger.

Sintaxis

Como siempre, remarcamos la sitaxis de cada etiqueta, es decir, cómo hacerlo, de qué se compone.
Para crear el link necesitaremos de:
- La etiqueta de apertura
<a>

- Dentro de la etiqueta pondremos el atributo href y dentro pondremos la URL de la página

<a href="http://teoriablogger.blogspot.com">

- El contenido que nos va a decir qué es el link.
"Teoría Blogger"

- La etiqueta de clausura
</a>

Código final

<a href="http://teoriablogger.blogspot.com">Teoría Blogger</a>

Atributos que más se usan

En la etiqueta <a> se usan los siguientes atributos:
Atributos

Muestra de sitaxis

ObligatorioFunción
href<a href="URL"/> Sin esto, no podemos indicar a qué página nos debe llevar el navegador.
target="_blank"<a target="_blank"/> NOCon este atributo podemos la página se abre en otra pestaña o ventana.
style<a style=""/>

id


<a id=""/>

class

<a class=""/>

title<a title=""/>

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.

domingo, 28 de agosto de 2011

Imagen flotante solo en una entrada particular

Para que se entienda mejor esto, paso a explicar. El "truco" consiste en hacer que una imagen (cualquiera) flote en la parte inferior, es decir, que esta imagen esté siempre presente en la entrada en la que vamos a insertar esta imagen.
Podemos ver el ejemplo en esta entrada en particular, donde la imagen que aparece abajo es sólo por esta entrada. Cuando entremos a otra entrada o página, la imagen desaparecerá.
Una imagen flotante en post1) Vamos a Blogger.
2) Clickeamos en el botón Entrada Nueva Botón Nueva Entrada[Para la anterior interfaz ir a Creación de entradas → Nueva entrada].
3) Vamos a pegar el siguiente código:
<img style="position: fixed; bottom: -1pt; right: 0pt;" src="URL de la imagen" />
En lo escrito en turquesa vamos a cambiar el right por left si queremos que la imagen flote en la izquierda. Esta opción es por supuesto opcional.
En lo escrito en verde, insertaremos la URL de la imagen.

martes, 31 de mayo de 2011

No permitir usar click derecho en tu blog

Si por alguna razón no querés que tus lectores puedan copiar un texto o una imagen de tu blog, mirá este post porque es justo lo que estás necesitando y es un truco que podría ser uno de los más buscados.
En este post te vamos a mostrar 3 formas diferentes para proteger los contenidos de tu blog: Una forma es usando atributos HTML y las otras dos formas son códigos Javascript. Usa la que te parezca más eficiente.
Proteger contenidos de tu blog

1er código

En el primero vamos a mostrar el código HTML, en el que tenemos que ir a Blogger → Diseño → Edición de HTML → buscamos la etiqueta <body> y la reemplazamos por
<body oncontextmenu='return false' onkeydown='return false'>

2do código

En este caso, es un script que se debe poner en el sidebar. Así que vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos el gadget de tipo HTML/Javascript y pegamos el siguiente código:
<script language="Javascript">
<!-- Begin
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false" )
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
// End -->
</script>

Contra importante:
Este script no permite de ninguna manera copiar textos, pero sí imágenes.

3er código

El resultado de este script es muy particular con respecto a otros que se pueden observar porque este, al hacer click derecho en alguna parte de la página, se activa una ventana de alerta que dice "En este blog está prohibido usar click derecho!".
Para aplicar este script, debemos ponerlo en el sidebar. Para eso vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget → Elegimos el tipo de gadget HTML/Javascript y pegamos el siguiente código:
<script language="Javascript">
document.oncontextmenu = function() {
return false
}
function right(e) {
var msg = "En este blog está prohibido usar click derecho!";
if (navigator.appName == 'Netscape' && e.which == 3) {
alert(msg);
}
else if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
alert(msg);
return false;
}
return true;
}
document.onmousedown = right;
</script>
El mensaje de la ventana de alerta puede cambiar si lo deseas: cambiando el texto marcado en rojo por el que quieras que aparezca.

sábado, 28 de mayo de 2011

Cronómetro en tu blog

Esta herramienta que puedes añadirlo en tu blog solo si tienes algo en especial que estás mostrando o como una función particular simplemente. Es eficiente y funciona a la perfección en todos los navegadores.
El código se inserta sólo como gadget es decir que aparecerá en el sidebar. El cronómetro es simplemente el segundero digital, un botón de inciar, de parar y de reiniciar el contador.
Insertar cronómetro al sidebarComo ya te mencionamos, este es un gadget, así que vamos a ir a Blogger → Diseño → Elementos de la página → Añadimos un nuevo gadget → Y seleccionamos el gadget de tipo HTML/Javascript y pegamos el siguiente código:
<form name="crono">
<div align="center"><center>
<p><input title="Este truco en teoriablogger.blogspot.com" type="text" size="8" name="display" value="00:00:0" /><input type="button" name="Iniciar" value=" Iniciar " onclick="IniciarCrono()" /></p>
<p><input title="Este truco en teoriablogger.blogspot.com" type="text" size="8" name="parcial" value="00:00:0 " /> <input type="button" name="Parcial" value="Parcial" onclick="ObtenerParcial()" /></p>
<p><input type="button" name="Parar" value=" Parar " onclick="DetenerCrono()" /><input type="button" name="Cero" value="Cero" onclick="DetenerCrono(); InicializarCrono()" /></p>
</center></div>
</form>
<script type="text/javascript" src="https://sites.google.com/site/teoriablogger/archivos-js/cronotb.js"></script>
Cronómetro

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

viernes, 10 de septiembre de 2010

Imagen que al pasar el mouse se cambia

El truco es muy simple. Se trata de una imagen que cuando pasas el cursor por encima del mismo, cambiará de imagen inmediatamente. Aquí está el ejemplo:


Cambiar una imagen al pasar por otraAfortunadamente, este truco lo podemos aplicar a cualquier sector del blog, ya sea en las entradas
o el sidebar. Esto se debe a que el código no es un script, sino un código HTML.
Entonces pegamos el siguiente código en donde quieran:
<a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="URL del enlace"><img border="0" src="URL de la 1ra imagen" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="URL de la 2da imagen" vspace="3"></a>
Lo escrito en verde es para que lo reemplaces por la dirección de la página a enlazar.
Lo escrito en rojo es lo que hay que reemplazar por la URL de la imagen que permanerá
intacto si no pasas el cursor por encima.
Lo marcado en amarillo, se reemplaza por la URL de la imagen que aparecerá al pasar el
cursor.

No hay que olvidarse

Para agregar más de estos códigos en una misma página o blog, se deben hacer los cambios
en el código cada vez que insertes uno: cuando quieras insertar otro código igual, debes cambiar
el número de todas las apariciones de esta pequeña parte del código fpAnimswapImgFP1
a fpAnimswapImgFP2, es decir, cambiamos el número de ese código, por la cantidad de códigos
puestos en el blog. Por ejemplo:
En el primer código puesto por cuarta vez, pondrás en todas las apariciones del código marcado
en violeta
, fpAnimswapImgFP4
O en el quinto código puesto por quinta vez, pondrás en todas las apariciones del código marcado
en violeta
, fpAnimswapImgFP5.
Y así correlativamente: 1, 2, 3, 4, (...).

Ver video explicativo

miércoles, 25 de agosto de 2010

Complementos especiales para una marquesina

Para completar bien una marquesina, le hemos agregado algunos trucos interesantes de más para que seas un experto en marquesina!

Detener e iniciar marquesina al pasar el cursor por encima

Este truco hace que al pasar el cursor por encima de la marquesina se detenga la misma y al no pasarlo, siga funcionando normalmente. Para hacerlo debes agregar estos atributos con su contenido: onmouseout="this.start()" onmouseover="this.stop()".
El resultado sería el siguiente (prueba pasar el cusor sobre la marquesina):
Texto
<marquee onmouseout="this.start()" onmouseover="this.stop()">Texto</marquee>

Marquesina que rebota

Esto quiere decir que el texto nunca va a desaparecer ya que va a ir de un lado a otro sin parar (excepto si lo indica el atributo loop).
Para que rebote, pon este atributo con su contenido: behavior="alternate"
Texto rebota
<marquee behavior="alternate">Texto rebota</marquee>

viernes, 30 de julio de 2010

Quitar cartel de etiquetas

A muchos bloggers les molestan detalles que ya vienen por defecto en Blogger como el pequeño cartel que dice "Mostrando entradas con la etiqueta imágenes. Mostrar todas las entradas" eso es una notificación de que está o ya buscó entradas que tienen la etiqueta que seleccionamos.
A continuación, un recuadro de cómo hacer para quitarlo, con un truco demasiado fácil.
Cartel de confirmación de búsqueda de una etiqueta
Quitar cartelito de etiquetaPara quitarlo necesitamos ir a Blogger → Diseño → Edición de HTML → y damos clic a la casillaExpandir plantillas de artilugios y presionamos ctrl+f para buscar en la página en la que estás.
Busca el sigiente código:
<b:include data="top" name="status-message">

Cuando hayas encontrado ese código, seleccionalo y reemplazalo por el siguiente:
<!--<b:include data='top' name='status-message'/>--></b:include>

Guardar cambios y Ver Blog!!!

sábado, 17 de julio de 2010

Enlace spoiler en blogger

El enlace Spoiler, es un enlace que al hacer click en él, sobresale un texto o lo que sea por debajo y al hacer click en el mismo enlace luego, cierra todo el contenido.
Insertar un enlace SpoilerEste enlace se puede agregar tanto en una entrada como en un gadget y además se pueden agregar varios a la vez.
Para mostrarles cómo queda un enlace spoiler observen este enlace:
Abrir[+]
Este es el contenido del spoiler.
El código es:
<div><a href="#" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Cerrar[-]';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Abrir[+]';}return false" title="teoriablogger.blogspot.com" type="button">Abrir[+]</a><div style="display: none;">Este es el contenido del spoiler.</div></div>
Para modificar el spoiler, haz lo siguiente:
Lo que está marcado en rojo, es la palabra que cerraría el spoiler cuando esta abierto.
Lo que esta marcado en violeta, son las palabras que van cuando el spoiler esta cerrado.
Y lo que esta en verde, es la frase o el contenido del spoiler.
En el contenido puedes poner lo que quieras: enlaces, elementos flash, y más.

¿Y en forma de botón?

En forma de botón tiene la misma función y quedaría así:
Lo puedes hacer en forma de botón:
Este es el contenido del spoiler.
El código es:
<div><input value="Abrir[+]" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Cerrar[-]';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Abrir[+]';}" type="button"><div style="display: none;">Este es el contenido del spoiler.</div></div>
Y a los textos los modificas como al modo enlace spoiler.

viernes, 16 de julio de 2010

Algunos códigos HTML para textos 2


Centrar Texto
Ejemplo


Superíndice
Texto Ejemplo Superíndice


Subíndice
EjemploEjemplo Subíndice


Texto Grande: Etiqueta big
Ejemplo

Insertar código
Ejemplo


Énfasis fuerte
Ejemplo


Preformateado
Ejemplo


Texto Teletipo
Ejemplo


Etiqueta Función
<center> Centra texto.
<sup>Define a un texto en superíndice.
<sub>Define a un texto en subíndice.
<blockquote>Bloque entrecomillado.
<big>Define a un texto en grande.
<code>Representa texto de computadora.
<strong>Demuestra una énfasis fuerte.
<pre>Presenta un texto preformateado.
<tt>Muestra texto como escritura de teletipo.

Títulos en HTML

Así como hay etiquetas que modifican y decoran los textos, también existen etiquetas para los títulos (y para muchas cosas más).
En HTML, los títulos, subtitulos y más, se definen con las siguientes etiquetas:<h1>, <h2>, <h3>, <h4>.
Crear Títulos y subtítulos en los posts.Encabezado 1:

Ejemplo


Encabezado 2:

Ejemplo



Encabezado 3:

Ejemplo


Encabeazado 4:

Ejemplo


Encabezado 5:
Ejemplo

Encabezado 6:
Ejemplo

Modificar estilos de encabezadosLa etiqueta de los encabezados se puede modificar como todos, en códigos CSS.
Para tomar como ejemplo un encabezado, tomaremos el encabezamiento de nivel 2:
h2 {
font-size: 22px;
text-transform:uppercase;
font: Verdana;
color: #2F8EFF;
text-shadow: 1px 1px 1px #3F3F3F;
}
Ya implementado este código CSS en Blogger → Diseño → Edición de HTML → Entre las etiquetas <![CDATA[/* y ]]>, en el blog se debe ver así:

Título 2

EL DATO:
Si estás avanzado en el tema, debes saber que no se debe implementar la etiqueta <h1> porque buscadores como Google, lo marcan como Spam y eso dificulta la probabilidad de visitas.
Si no sos avanzado en el tema, ¡NO TE PREOCUPES! esto es por si algún curioso avanzado intenta agregar esa etiqueta a todos los títulos de la plantilla.

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.

miércoles, 14 de julio de 2010

Algunos códigos HTML para textos

Subrayar: Etiqueta u
Ejemplo



Negrita: Etiqueta b
Ejemplo



Cursiva etiqueta i
Ejemplo



Tachar: Etiqueta s/strike
Ejemplo




Parpadear: Etiqueta Blink
Ejemplo



Sobre la línea
Ejemplo


Marquesina: Etiqueta marquee
Ejemplo


Entrecomillado: Etiqueta q
Ejemplo


Etiqueta Función
<u> Subraya texto
<b>Texto en negrita.
<i>Texto en itálica.
<s>Texto tachado.
<strike>Texto tachado.
<blink>Texto "parpadea".
<marquee>Texto en movimiento marquesina.
<q>Una cita en una línea.

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>).

domingo, 11 de julio de 2010

Abrir enlace en otra pestaña

Supongamos que una página (a.com) quiere enlazar, en la misma, a otra página (b.com). Eso es posible haciendo un link con la etiqueta a y el atributo href. ¿Pero qué pasa si el administrador de la primer página no quiere que sus usuarios salgan de su página al clickear el nuevo link?
Abrir enlace en otra ventana Para ello vamos a asumir que sabemos crear un link en HTML. Si no es así, entren a: Etiqueta a y sabrán hacerlo. El atributo que nos ofrece el HTML para esta problemática es el target="direct", que hace que abra otra pestaña o ventana según prefiera el navegador. Entonces la sintaxis sería la siguiente:
<a href="http://www.vimeo.com/" target="_blank">Vimeo</a>
Entonces funcionaría así:
Vimeo
Atributos:
href : Atributo obligatorio de la etiqueta a, se indica la URL de la página.
target="_blank" : Atributo no obligatorio, que permite abrir enlace en otra ventana o pestaña.
Actualización: 8 de mayo de 2013.