Las últimas 30 mejores plantillas de Btemplates.com (por T.B.)

En este post nos vamos a dedicar a mostrarles algo un poco personal de nosotros. Mostramos las últimas 30 mejores plantillas que publicó Btemplates.com (la mejor fuente de plantillas, para nosotros). Elegimos con un criterio en particular: elegir plantillas que no tengan imágenes llamativas como por ejemplo un auto una persona, etcétera.
La siguiente lista de enlaces (de las plantillas) destinan a btemplates, para que puedas descargar los que quieras.

1. Dotted Blue
2. Guerrilla
3. Digital Playground
4. Bubble Blue
5. Revive Blue
6. Voidy
7. Wall Press
8. Leviathan
9. Gray Flannel
10. Tut Theme
11. WorldWide
12. Webmaster Ease
13. Mobile World
14. Smash
15. WP-Them.es
16. Minimal 03
17. Ikhsan Magazine II
18. Blue Pearl
19. Rockwell
20. Mystique
21. Rusty Nail
22. Abelia
23. Sonica
24. iTech Blog v2
25. Blue Station
26. Brillyant
27. Blue Simplicity
28. Belinda
29. Brandnew Folio
30. Liliya
    

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.

Quitar cartelito de etiqueta

Para 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!!!

Plantilla de entrada

La plantilla de entrada es un texto o un objeto que viene predeterminado a la hora de escribir un post. Por ejemplo si la plantilla de entrada es "Este post fue escrito por...", cada vez que entres al editor de textos (siempre entrando en Creación de entradas → ), se mostrará esta frase.
Si tu blog es un blog que en sus entradas cambia muy poco su contenido, te recomendamos que uses esta posibilidad que ofrece Blogger.

Tener un texto predeterminado en el editor de textos

Ve a Blogger → Configuración → Formato y abajo de todo de la página encuentra: Plantilla de entrada, con un campo de texto amplio.
Ahí escribes el texto que quieras. Además puedes escribir dándole formato: añadiendo códigos HTML.

Teniendo en cuenta el ejemplo de la imagen, cuando abrimos el editor de entradas (llendo a Creación de entradas → Nueva entrada) apareció el texto tipeado en las configuraciones:

Posts destacados con imágenes y descripción

En esta ocasión les enseñaremos cómo crear una presentación de diapositivas para mostrar el contenido del blog a sus lectores. Esta presentación de diapositivas es muy fácil de añadir y modificar. El truco consiste en un gadget en el que van pasando imágenes que contiene el blog y a medida que van pasando las imágenes debajo de cada una, tiene una descripción. Además funciona como enlace ya que al hacer click en una imagen, esta te destina a una página.
Para ver el demo de este gadget, haz click aquí: LabTB

Crear presentación con diapositivas sobre contenido destacado

Antes de empezar fíjate si antes de la etiqueta </head>, en tu plantilla está agregado este código (busca con ctrl+f):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Si lo está, bórralo para no tener complicaciones ahora.
Vamos a Blogger → Diseño → Edición de HTML y antes de la etiqueta </head> (buscar con ctrl+f), pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Guarda la plantilla, ve a diseño → Elementos de la página → Añadir un gadget → de modo "HTML/Javascript" y agrega este código:

<ul class="slideshow">

<li><a href="http://URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWBiBIDp70eAeNKrLLN-pFXYwFT6ZMGOl7zbqXb1GAjiq4M2WKfF-cTfLwJe4vyk4pMxROwSXp0VrcqmDRCZA_JdTvcZia0OU7xOIFVjukqHELTPC0Uhff809zu0XHNbRS5ETCocH0hvg/s1600/1.jpg" title="Este es el título del post 1" alt="Sustituir este texto con una descripción del post destacado n° 1" /></a></li>

<li><a href="http://URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPgcJOeQOBjHhSO3bTwhyphenhyphenqV7avdTAQIwNovXNbQ5B5EyJNrzAUH0MZKqxqA573EbKz1ybxJPOfM9NvyvYRs6cueYau4bB9WDLMQZxYDF_97croMnIkF7yvfzIDi-dkp6TsymT6DQ4Pgmw/s1600/2.jpg" title="Este es el título del post 2" alt="Sustituir este texto con una descripción del post destacado n° 2" /></a></li>

<li><a href="http://URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh3KSzny7KrpbbEh5wMQE5F1pVeSZc9Ydy_XBWlXTJsHP7dK7VXz50iLGhgfnZq7b_QR53ojrIqqGM3ZBdtiQqgJqMNfeGURQQ8jlnDMkDROXiILlxL1fUd6-5KPVSGiT8KM4PWWkYnSk/s1600/3.jpg" title="Este es el título del post 3" alt="Sustituir este texto con una descripción del post destacado n° 3" /></a></li>

<li><a href="http://URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaeGqDG3V9O1nA3kuNC_z1hbnfSq5BuyIeKiKBMqdmEPSRT9MpOReCZUplSFJc8BFah5QSM45eqNdgZ4H74a_SVoBbQIQcMTSqg208-V0SbGQrs6SY9gL0XZk2DSSOnR79vIEGQc2bWGc/s1600/4.jpg" title="Este es el título del post 4" alt="Sustituir este texto con una descripción del post destacado n° 4" /></a></li>

</ul>

Configurar el primer código dado

Lo que esta marcado en violeta, puedes cambiar el ancho de las diapositivas.
Lo que esta marcado en verde, puedes cambiar el alto de las diapositivas.

Configurar el segundo código dado

Lo que esta marcado en amarillo, debes poner la url del post que está describiendo.
Lo que esta marcado en rojo, debes poner la url de la imagen del post.
Lo que esta marcado en verde, debes escribir una descripción del post destacado.
Lo que esta marcado en violeta, debes escribir el título del post destacado.

Quiero avisarles también que se pueden añadir más de 4 diapositivas. Sólo puse 4 porque me parecieron suficientes para dar un ejemplo.

Mensaje según el día

Este script consiste en cambiar un mensaje por cada día que pasa. Los mensajes los modificas vos y es un script para que agregues un gadget. Por si no entendiste la idea, los mensajes van cambiando el lunes, martes, miércoles, jueves, en fin todos los días de la semana.
Para poder ver el gadget antes de experimentarlo, click aquí

Obtener un mensaje diferente cada día

Para tener este objeto, hay que añadirlo en un gadget o sea que vamos a Blogger → Diseño → Elementos de la página → Añadir un gadget.

<script title="este truco en teoriablogger.blogspot.com" language="JavaScript">

document.write("<center><font size=+1><b>")
now = new Date()
/* Aquí empiezan los mensajes diarios */
if (now.getDay() == 0)
document.write("Empieza la semana, que la empieces bien!!!")

if (now.getDay() == 1)
document.write("Vamos fuerza, que el viernes siempre llega.")

if (now.getDay() == 2)
document.write("Es martes, paciencia")

if (now.getDay() == 3)
document.write("Llegó la mitad de semana. Hoy no es feriado ¿no?")

if (now.getDay() == 4)
document.write("Empieza la previa del viernes.")
document.write("</b></center></font>")

if (now.getDay() == 5)
document.write("Llegó el viernes!!, ¿Viste que llega?")

if (now.getDay() == 6)
document.write("Es sábado. ¿Qué vas a hacer hoy a la noche?")

</script>

Para editar los mensajes cambia los textos y listo. Recuerda que la semana empieza el domingo y por ende, el primer mensaje es para este día.

Efectos de transparencia en imágenes con Jquery

Este truco jquery, consiste en que al pasar el mouse por encima de una imagen, la misma se pondrá en un estado de semi transparencia.
Pero como el script de tipo jquery siempre nos sorprende, este efecto lo hace como si tuviera una "transición".
Para ver cómo quedan los efectos para las imágenes, Haz click aquí.

Obtener efectos de semitransparencia en imágenes

Para esto, ve a Blogger → Diseño → Edición de HTML y busca la etiqueta </head> (presiona ctrl+f) y arriba de esta etiqueta pega esto:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.latest_img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.latest_img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>

Cuando hayas guardado los cambios observa cómo funciona, pasando el mouse sobre una imagen.

Nota:
Este truco sólo funciona en la parte de las entradas y no en el sidebar (o sea en un gadget).

Añadir una lista de enlaces con descripción

Este elemento (no muy sabido por los bloggers) consiste en un gadget que tiene una lista de enlaces y debajo de esta, hay un campo de texto y debajo de este, otro más grande. El primer campo de texto es para el título de los enlaces y el más grande es la descripción del enlace.

Obtener una lista de enlaces con su descripción

Como no es un truco muy famoso, mucha gente no sabe a qué nos referimos, entonces mostramos el ejemplo del gadget haciendo click aquí.
Esta lista solamente se puede añadir en un gadget de la página: Blogger → Diseño → Elementos de la página → Añadir gadget → Código HTML/javascript y pega este código:

<script language="JavaScript">
<!--
function thetext(txt) {
document.theform.thetext.value = txt
return true;
}
// -->
</script>

<script language="JavaScript">
<!--
function atext(txt) {
document.aform.atext.value = txt
return true;
}
// -->
</script>

<a href='http://urldeenlace' onmouseover='thetext("-Título del enlace-"); atext("Descripción del enlace")' target=_top>Muestra de enlace</a><br />
<a href='http://urldeenlace' onmouseover='thetext("-Título del enlace-"); atext("Descripción del enlace")' target=_top>Muestra de enlace</a><br />
<form title="este truco en teoriablogger.blogspot.com" name="theform">
<input style="color:#000; background:#fff;" disabled type="text" name="thetext" size="30" />
</form>
<form name="aform">
<textarea style="color:#000; background:#fff;" disabled="disabled" rows=5 cols=25 wrap="virtual" name="atext"></textarea></form>

Pasos necesarios para modificarlo.

• En lo que está remarcado en Violeta, va la url de la página. EJEMPLO: http://nombredeblog.com/contacto.html
• En lo que está remarcado en Rojo, va el título del enlace: EJEMPLO: Contactenos.
• En lo que está remarcado en Verde, va una descripción del enlace. EJEMPLO: Haz click aquí para poder escribirnos por medio de un formulario de contacto.
• Y lo que está remarcado en Amarillo, va la muestra de cómo queda el enlace (Esto permite que se haga click en el enlace). EJEMPLO: Formulario de contacto.
  

Recuerda que puedes agregar más enlaces y que puedes modificarlos como quieras, siempre y cuando respetes los pasos anteriores.

Importante:
Estos códigos siempre se deben pegar en la pequeña solapa que dice Edición de HTML.
Y recuerda que este Script, sólo se pega en un elemento de la página y no en una entrada.

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 Spoiler

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

Algunos códigos HTML para textos 2

VER 1^ra PARTE

Centrar Texto

Ejemplo

<center> Agrega el texto</center> <div style="text-align: center;"> Agrega el texto</div>

Superíndice
Texto ^{Ejemplo Superíndice}
^{Agrega el texto}

Subíndice
Ejemplo_{Ejemplo Subíndice}
_{Ejemplo Superíndice}

Texto Grande: Etiqueta big
Ejemplo
<big>Agrega el texto</big>
Insertar código
Ejemplo
<code>Agrega el texto<code>

Énfasis fuerte
Ejemplo
<b>Agrega el texto</b>

Preformateado

Ejemplo

<pre>Agrega el texto</pre>

Texto Teletipo
Ejemplo
<tt>Agrega el texto</tt>

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

<h1>Agrega el texto</h1>
Encabezado 2:

Ejemplo

<h2>Agrega el texto</h2>

Encabezado 3:

Ejemplo

<h3>Agrega el texto</h3>
Encabeazado 4:

Ejemplo

<h4>Agrega el texto</h4>
Encabezado 5:

Ejemplo

<h5>Agrega el texto</h5>
Encabezado 6:

Ejemplo

<h6>Agrega el texto</h6>

Modificar estilos de encabezados

La 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 interno

Con 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úsqueda

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

¿Cuánto crees que vale tu blog?

Si ya no quieres más tener tu blog y no quieres eliminarlo, ¡Véndelo! y averigua el precio que tiene para poder venderselo a un amigo o en internet. Pero si tu blog tiene muchas entradas, tiene unos años y varios comentarios, más vale que el interesado tenga dinero.
Promocionalo añadiendo el valor en un gadget de tu blog.

Averigua el precio de tu blog

Ahora escribiendo seriamente, el valor de tu blog se puede saber mediante una página que se especializa en eso y puedes insertarlo como un elemento en tu blog ya con el precio incorporado.
La página es http://directory.sootle.com/website-worth/ sólo debes insertar la URL del blog y hacer click en el botón .
Una vez que hayas chequeado el precio, copia el código que muestra y pégalo en un elemento de la página [Diseño → Elementos de la página → Añadir un gadget → HTML/Javascript].
El Ejemplo:

Esta web vale:

Algunos códigos HTML para textos

VER 2^da PARTE

Subrayar: Etiqueta u
Ejemplo
<u>Agrega el texto</u>
<span style="text-decoration: underline;">Agrega el texto</span>

Negrita: Etiqueta b
Ejemplo
<b>Agrega el texto</b>
<span style="font-weight: bold;">Agrega el texto</span>

Cursiva etiqueta i
Ejemplo
<i>Agrega el texto</i>
<span style="font-style:italic;">Agrega el texto</span>

Tachar: Etiqueta s/strike
Ejemplo
<s>Agrega el texto</s>
<strike>Agrega el texto</strike>
<span style="text-decoration:line-through">Agrega el texto</span>

Parpadear: Etiqueta Blink
Ejemplo
<blink>Agrega el texto</blink>
<span style="text-decoration:blink">Agrega el texto</span>

Sobre la línea
Ejemplo
<span style="text-decoration:overline;">Agrega el texto</span>

Marquesina: Etiqueta marquee
Ejemplo
<marquee>Agrega el texto</marquee>

Entrecomillado: Etiqueta q
Ejemplo
<q>Agrega el texto</q>

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.

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 alerta

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

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.