Gadget para enlace directo en HTML

Cuando queremos poner alguna palabra o frase que nos redirija a alguna web o enlace pinchando en ella, en muchos casos como es el de blogger, tenemos aquí mismo la opción; marcando la frase y pinchando en Enlace, se nos abrirá una ventanita en la que colocaremos el enlace al que queremos que nos lleve. Pero si estamos escribiendo en algún sitio que no tiene esa opción lo podremos hacer si vamos a HTML y escribimos lo siguiente:

 

</ul><li><a href="http://Direccion_del_sitio">Nombre del sitio</a></li></ul>

 

Por ejemplo </ul><li><a href="http://degabyla.blogspot.com.es/">A grandes males, pequeños remedios</a></li></ul>

 

 

Gadget Alinear o centrar gadgets

Hoy he descubierto un gadget que me ha parecido muy útil. Es para poder alinear o centrar los gadgets que por ejemplo en blogger están alineados a la izquierda por defecto. Si puedes acceder a su código HTML sólo tienes que meterlo en medio de dos <div>. Tiene que quedarte asi:

<div align="center">Código que se quiere centrar</div>

<div align="left">Código que se quiere a la izquierda</div>

<div align="right"> Código que se quiere a la derecha </div>

Insertar una tabla en la entrada de tu blog

Si quieres poner una tabla en una entrada sólo tienes que poner este código:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
</tbody>
</table>

Puedes cambiarle el color del fondo cambiando en bgcolor=(aquí pones el código del color que quieres).
También puedes quitarle el borde cambiando en border= (el 1 por 0) o poner un borde más marcado cambiando a un número mayor.
Y si quieres añadir más filas vas repitiendo lo que aparece en negrita entre <tbody> y <tbody>. Por ejemplo:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td></tr>
</tbody>
</table>

Y si lo que quieres es que tenga más columnas, sólo tienes que añadir <td>Texto o imagen</td> entre </tr> y </tr>

Por ejemplo:

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
<tr><td>Texto o imagen</td><td>Texto o imagen</td><td>Texto o imagen</td></tr>
</tbody>
</table>

Además podrás centrar o alinear la imagen o el texto añadiendo los códigos que ya conocemos para ello:

<div align="center">Código que se quiere centrar</div>

<div align="left">Código que se quiere a la izquierda</div>

<div align="right">Código que se quiere a la derecha </div>

Si en lugar de que aparezca en una entrada, la quieres poner en alguna de las columnas laterales o inferiores, vete a Diseño-añadir gadget-Java Html y hazlo añadiendo el código tal y como lo haces como cualquier ptro gadget. La personalización la podrás hacer igualmente.

Puedes ver como me ha quedado a mí en la columna lateral la tabla de directorios.

Poner un buscador

Para poner un buscador en el blog tienes dos opciones, la primera es poner el que viene con blogger directamente desde Diseño-añadir gadget-buscador, pero que no se porqué a veces no funciona, y la segunda es ir a Diseño-añadir gadget-código Html java y poner este código

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" type="text"/>
<input id="search-btn" value="Buscar" type="submit"/>
</form>

le das a guardar y ya está.

Poner un botón en tus entradas para que puedan imprimirlas

Es una buena idea dar la opción a nuestros lectores de poder imprimir una entrada de nuestro blog. Y la forma de hacerlo puede parecer un poco complicada pero si seguís los pasos veréis que no lo es tanto.

En primer lugar tenemos que ir a Dieño-Editar HTML

Pulsamos y nos saldrá algo como esto:

Buscamos la etiqueta </head>  y antes del cierre

Ponemos este código:

<style media='print' type='text/css'>#header-wrapper,

#header, .header, #sidebar-wrapper, .sidebar, .post-footer, #footer-wrapper,

#footer, .date-header, #comments, .post-meta-data, .comment-link,

.comment-footer, #backlinks-container, #blog-pager,#navbar-section, .navbar,

.subscribe_notice, .noprint {display: none;}#main-wrapper {width:

95%; overflow: visible !important;}</style>

Y le damos a Guardar plantilla

Ahora sólo tenemos que añadir a cada entrada que queramos que se pueda imprimir y añadirle un código. Para eso, nos vamos a Entradas, Editar, HTML

Y al final del post le añadimos este código:

<b:if cond="data:blog.pageType == &quot;item&quot;">

<a href="javascript:window.print()">

<img alt="Imprimir" border="0" height="30" src="http://icons.iconarchive.com/icons/artua/dragon-soft/32/Printer-icon.png" style="float: left; margin: 0 1em 1em 0;" title="Imprimir" width="30" />

Imprimir el artículo</a>

</b:if>

Ahora pinchamos en Actualizar y ya está. Comprobamos que toda ha quedado bien...

Si vais aquí Qué comemos hoy? Ensalada de pasta, veréis que al final del post aparece la opción de imprimirlo.