Incluir un enlace en determinadas palabras de forma automática

Este truco permite que una o varias palabras determinadas contengan un enlace. Bastará con escribirlas en la entrada como si de texto normal se tratase para que, de forma automática, se conviertan en un vínculo hacia otra página.

Puede resultar de gran utilidad para aquellos que enlazan frecuentemente una palabra a un determinado blog o apartado de éste. Una vez instalado el script, no será necesario incluir enlace alguno pues el texto plano se convertirá en link al publicar la entrada.

Una de las ventajas que ofrece es la facilidad con la que los buscadores indexarán nuestro sitio (siempre y cuando utilicemos la misma URL -de nuestro blog- y varias palabras 'clave') dado que cada enlace se crea 'por arte de magia'.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo antes añade esta línea:

<script src='https://sites.google.com/site/scriptsbalcon/b/balJJTenlacesmag.js' type='text/javascript'/>

A continuación, localiza <data:post.body/> y reemplázalo por este bloque:

<div expr:id='"baLJJTenlaceS3" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');
</script>

Sustituye en cada caso PALABRA por la palabra o frase que al ser escrita en una entrada contendrá el vínculo automáticamente. En URL PAGINA debes introducir la dirección del blog o apartado al que conducirá el término o frase.

Ten en cuenta que la palabra que escribas en cada línea debe ser idéntica a la que posteriormente escribirás en tus entradas. Letras mayúsculas, tildes o caracteres tendrán que ser iguales.

Hay un total de tres líneas en las que puedes insertar tres palabras o frases distintas. Si deseas agregar más, utiliza esto:

baLJJTenlaceS2('PALABRA',true,'URL PAGINA','baLJJTenlaceS3<data:post.id/>');

Recuerda que debe permanecer justo encima del cierre </script>.

Guarda la plantilla y acude a una entrada cualquiera. Escribe cualquier término resaltado en el código y comprueba que al publicar la entrada, la palabra se convierte en enlace y que éste contiene la dirección web atribuida.

Modificar las entradas de tu blog: separación entre letras, palabras y líneas

La apariencia de un artículo puede verse enteramente afectada por la separación entre letras, palabras y líneas. Al escribir una entrada en nuestro blog, buscamos una correcta configuración y en ningún caso deseamos que al publicarla, los párrafos sean alternos o que sus letras, palabras o líneas muestren una separación distinta a la que utilizamos en el resto del contenido textual.

Gracias al CSS, todo esto puede evitarse y una configuración general puede atribuírsele al texto.

Diseño>Edición de HTML>expandimos artilugios

Busca un bloque similar a alguno de estos dos:

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

Seguidamente, añade las líneas en color verde:

.post-body {
letter-spacing: 0px;
line-height: 20px;
word-spacing: 0px;
margin:0 0 .75em;
line-height:1.6em;
}

.post-body {
letter-spacing: 0px;
line-height: 20px;
word-spacing: 0px;
font-size: 110%;
line-height: 1.4;
position: relative;
}

Esta misma configuración es la que utilizo actualmente en El Balcón. Como puedes ver, cada párrafo muestra el mismo estilo y las letras o las palabras mantienen una misma cifra de separación.

La línea letter-spacing: 0px; indica la separación entre letras. Aumenta la cifra (0) en caso de querer incrementar la distancia.

Por otra parte, line-height: 20px; indica que las líneas estarán a 20 píxeles de distancia una de otra. Al igual que anteriormente, también puedes modificar la cifra.

Finalmente, word-spacing: 0px; indica que las palabras tendrán 0 píxeles de separación por lo que se mostrarán a una distancia estándar (utilizada por la mayoría de páginas web).

A continuación te mostraré párrafos con una configuración distinta. Tal vez podría interesarte utilizar alguno...







En este último caso apliqué también la propiedad color para editar el color del texto. Recuerda que puedes hacer uso de la tabla de colores para escoger tu color favorito.

Para modificar el tamaño del texto, bastaría con hacer uso de la línea font-size:13px; en la que el valor 13 representa el tamaño y puede modificarse. La línea se añadiría justo después del .post-body {.

Todas estas propiedades puede utilizarse también en los títulos de las entradas:

Encuentra la etiqueta ]]></b:skin> y añade justo antes este bloque:

.post-title{
AQUI INCLUYE LAS PROPIEDADES
}

Bastará con sustituir AQUI INCLUYE LAS PROPIEDADES por los atributos CSS que se explican en esta entrada.

Haz vista previa para comprobar el resultado y guarda la plantilla si quedaste conforme con el nuevo aspecto de tus entradas.

Tachar texto en las entradas con imágenes

Utilizando etiquetas HTML en el cuerpo de las entradas de nuestro blog podemos conseguir muchas cosas. De entre todas, hay una que me gusta mucho ya que permite tachar cualquier frase o palabra. Utilizamos pues la etiqueta <strike> al principio de la palabra y el cierre </strike> al final.

Pero a mi me gustaría darte a conocer una nueva forma de tachar texto. En lugar de utilizar una simple línea, haremos uso de imágenes, tal y como puedes ver a continuación:

El truco es muy sencillo y fácil de utilizar.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y justo encima añade esta línea de CSS:

blth {text-decoration:none; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5sFgPwXDsVZCjr5CY8FWmWi6yMrUjUPZTaZeGZcTqUsAYlDbyFb9K3kHbIgFSrnivCoZJy-vBhYVWy4nsVqU_WzEOysd-N2Bfdvq7t0Gbmvhiki2RAZcTN_-ubOCUV14A7IjtsuMsowA/) repeat-x left 55%}

Guarda la plantilla y accede a una entrada cualquiera.

Utiliza las etiquetas <blth> y </blth> para encerrar la palabra (frase o párrafo) a tachar, tal y como te muestro a continuación:

En esta frase me gustaría tachar <blth>esto</blth> con imagen.

Por defecto, la línea aparecerá en color azul. Si lo deseas, puedes hacer uso de otros modelos:









Tan solo debes reemplazar la línea resaltada en color grisáceo por la URL de la nueva imagen escogida ^[+].

Nota:

Para no tener que estar copiando las etiquetas cada vez que desees tachar algo, haz uso de la plantilla de entrada ofrecida por blogger.

Proteger tu blog contra copiar información de las entradas

Usando este procedimiento bloquearemos la selección de texto y el menú de opciones que aparece al pulsar el botón derecho del ratón y que nos permite copiar, pegar o cortar información únicamente en la zona de las entradas, evitando de esta forma el que los lectores más atrevidos puedan plagiar cualquiera de nuestras obras.

Esto solucionará el problema de los formularios o buscadores instalados en la barra lateral y nos permitirá introducir texto correctamente en ellos, algo que era imposible de realizar al aplicar el truco para bloquear el subrayador de texto o el de la tecla Ctrl.

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

<div id='main-wrapper'>

Ahora reemplázala por esta otra:

<div id='main-wrapper' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>

Guarda la plantilla para terminar.

¿Qué sucede con los comentarios y el post-footer?

Al realizar el truco siguiendo este procedimiento, el contenido de los comentarios publicados por los lectores tampoco podrá ser seleccionado o copiado. Esto puede repercutirte si sueles copiar el nombre del usuario que ha comentado para responderle o cualquier dato en particular.

Con el pie del post (post-footer) sucederá lo mismo, por lo que no podrás seleccionar las etiquetas de un post o copiar su dirección.

Por suerte hay una solución bastante simple: hacer que únicamente el contenido del artículo quede "protegido", y puede conseguirse de la siguiente manera:

Busca estas líneas:

<div class='post-body entry-content'>
<data:post.body/>

Y en la primera, inserta lo que ves en negrita:

<div class='post-body entry-content' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>
<data:post.body/>

Véase también:

- Proteger las imágenes de tu blog

- Proteger tu blog contra copiar información bloqueando el teclado

Editar el texto y el aspecto del cartel "Mostrando entradas con la etiqueta..."

Hace ya bastante tiempo aprendimos a ocultar o eliminar el cartel con el mensaje "Mostrando entradas con la etiqueta..." y, a decir verdad, nos fué de mucha utilidada casi todos.

En un comentario que leí hace unos días me preguntaban si existe una forma de editar el texto del cartel, así como darle un estilo personalizado.

Y por supuesto que existe, es más, se me ha ocurrido un método sencillísimo de conseguir ambas cosas...

Diseño>edición HTML>expandimos artilugios

Busca este bloque de código:

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

Y reemplázalo por esto otro:

<div class='status-msg-wrap'>
Estás viendo los artículos con la etiqueta... &quot;<data:blog.pageName/>&quot;</div>

Puedes cambiar la frase que se mostrará en el cartel y escribir algo a tu gusto.

Ahora vamos a aplicarle el CSS necesario para poder editarlo a nuestro gusto.

Busca la etiqueta ]]></b:skin> y añade este bloque encima:

.status-msg-wrap{background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 #fff;
padding: 4px; border: 1px solid #ccc;}

Sustituye URL DE LA IMAGEN por la dirección del icono o la imagen de fondo ^[+].

Aquí te dejo el icono del ejemplo, por si deseas utilizarlo en tu cartel:




En caso de querer añadir una imagen de fondo y que ésta rellene todo el cartel, cambia el atributo no-repeat por repeat.

- Puedes editar la separación que habrá entre el contenido del cartel y el borde en la línea padding: 4px; (editando la cifra -4- por una mayor o menor).

- El grosor del borde puedes editarlo en la línea border: 1px solid #cccccc;, cambiando el valor 1px. El estilo (solid) también puede editarse. Para ello, visita este artículo acerca de los estilos de borde.

Finalmente el color del borde (#cccccc) también puede cambiarse, con ayuda de la tabla de colores.

Guarda tu plantilla para terminar:

Pullquotes o cajas de texto para notas en las entradas

En blogger podemos añadir múltiples cajas de texto, ya sea para destacar una parte del artículo o para anunciar cualquier cosa.

Hace tiempo aprendimos a insertar notas en el blog, seguidamente descubrimos la forma de conseguir una caja de texto con imagen de fondo personalizable, y en especial, una caja de texto con imagen de fondo al azar.

En esta entrada podrás descubrir la manera de incluir estas cajas de texto dentro de tus entradas, en un lateral, como puedes ver en esta imagen...

Para ello hacemos uso del siguiente código:

<p style="color: #464646; float: right; border: 1px solid #cccccc; text-align: center; padding: 4px; background-color: #ffffff; margin: 20px; width: 30%;"><br>ESCRIBE AQUI EL TEXTO<br><br></p>

En el que puedes editar:

1) El color del texto, reemplazando #464646 por el valor hexadecimal de tu color favorito (entra en la tabla de colores).

2) La posición del pullquote, reemplazando float: right; (lo que situará el recuadro a la derecha de la entrada) por float: left;.

3) El grosor (1px), el estilo (solid) ^[+] y el color (#cccccc) del borde ^[+], en la línea border: 1px solid #cccccc;.

4) La alineación del texo, editando text-align: center; (centrado) por text-align: left; (alineación a la izquierda) o text-align: right; (alineación a la derecha).

5) El color de fondo (blanco), sustituyendo #ffffff en background-color: #ffffff; por el valor hexadecimal de tu color favorito (entra en la tabla de colores).

Si prefieres añadir una imagen de fondo, utiliza esta otra línea:

background: transparent url(URL DE TU IMAGEN) repeat scroll 0 0;

Reemplazando URL DE TU IMAGEN por la dirección de la imagen.

6) El tamaño del texto, agregando la línea font-size: 12px; al código, por ejemplo antes de color: #464646;.

Te en cuenta que el código lo debes pegar en el cuerpo de la entrada, encima o debajo del párrafo / frase que desees complementar (ya que la casilla se visualizará a su derecha o a su izquierda).

Nota:

Para no tener que estar copiando el código que inserta el pullquote en las entradas, haz uso de la plantilla de entrada ofrecida por blogger.

Añadir una frase personal en el gadget de archivos

Estuve investigando un poco el código que compone el gadget de archivos y se me ocurrió la idea de añadir una frase personal para que la lista en jerarquía que muestra los títulos de las entradas tuviese otro aspecto:

Diseño>Edición de HTML>expandimos artilugios

Busca el código del gadget de archivos y reemplaza TU FRASE AQUI por una frase a tu gusto (debes escribirla igual en ambos sitios):

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>TU FRASE AQUI
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;&#160;
<b:else/>

&#9658;&#160;
</b:if>

</span>TU FRASE AQUI
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Haz vista previa para ver el resultado y guarda la plantilla:




Notas:

Para encontrar de forma rápida el código del gadget de archivos pulsa Ctrl y F para abrir el buscador y localiza esta línea:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

Muestra la dirección de tus posts al pie de las entradas

Con este truco harás posible el ofrecer a los visitantes de tu blog la dirección (URL) de la entrada que están leyendo, de manera que puedan enlazarte de forma sencilla y rápida...

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta <body> y añade este script encima:

<script type='text/javascript'>
function select_text()
{
var content=eval(&quot;document.blenlazapost.urlpost&quot;);
content.focus();
content.select();
}
</script>

Ahora busca esta otra línea:

<div class='post-footer-line post-footer-line-3'/>

O esta en caso de no encontrar la anterior:

<div class='post-footer'>

Seguidamente añade este código, justo debajo:

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIRM5S7LgcbnCW0mArvpet6Mg_x9_L0YqwfONEH4bZT4c72hrkb8gRc_8Bhl5FDiXfQswfv8P_xdh7Mu4bZwUNCl87O_aNV7ZFTEOhHguRUDqreqD3UjSdiAxDauadPakSReGUT0KPvU4/s1600-r/linkk.png'/> <span style='padding-top: 12px;'>Enlaza este post:</span> <form action='' method='post' name='blenlazapost'><textarea name='urlpost' onClick='select_text();' style='border:1px solid #C3C3C3; font-size:11px; height:16px; margin-top:6px; width:200px;'><data:post.url/></textarea></form>

Para cambiar el icono que aparece a la izquierda de la frase "Enlaza este post:" reemplaza la línea marcada en verde por la URL de tu imagen ^[+].

Si deseas editar la frase "Enlaza este post:" por algo personal, sustitúyelo por el texto escogido.

Guarda la plantilla para terminar:




En caso de querer editar cualquier otra cosa y no saber como hacerlo avísame.

Cartel o aviso automático al pie de todas las entradas

Tal vez se te haya ocurrido el querer poner una imagen, una frase, un aviso o cualquier tipo de información al pie de todas las entradas de tu blog.

Si de da el caso de que así sea, sigue los pasos indicados en esta entrada y podrás obtener tu "caja de avisos".

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

<data:post.body/>

Y justo debajo añade lo siguiente:

<div id='balcart'>CONTENIDO</div>

Reemplaza CONTENIDO por cualquier cosa que muestro a continuación:

- Para incluir una imagen utiliza la línea: <img src='URL DE TU IMAGEN'/> y sustituye URL DE TU IMAGEN por la dirección del icono o la imagen ^[+].

- Para incluir texto simplemente sustituye CONTENIDO por la frase a mostrar.

- Para incluir un enlace utiliza esta línea: <a href='URL DE LA PAGINA'/>TITULO</a> y sustituye URL DE LA PAGINA por la dirección de la web o el blog, así como TITULO por el texto que llevará el enlace.

Si por otra parte, quieres agregar texto, imagen y enlace en el cartel, utiliza esto:

&lt;div id='balcart'&gt;TEXTO &lt;a href='URL DE LA PAGINA'/&gt;TITULO&lt;/a&gt; TEXTO <img src='URL DE TU IMAGEN' style='margin:0px 0px 3px 3px; float:right;'/>&lt;/div&gt;

* Sigue las instrucciones anteriores para rellenar la caja de aviso.

Ahora busca la etiqueta ]]></b:skin> y encima añade el bloque de CSS necesario para aplicar el estilo:

#balcart {
background:transparent url(URL DE LA IMAGEN) repeat;
padding: 6px;
margin: 8px;
border: 2px solid #cccccc;
text-align: center;
}

En URL DE LA IMAGEN introduce la dirección de la imagen de fondo (opcional).

Si deseas aplicar un color de fondo en lugar de una imagen, borra transparent url(URL DE LA IMAGEN) repeat y pega el código de tu color favorito ^[+].

También puedes personalizar el grosor del borde (2px) así como su estilo (solid) ^[+] o el color (#cccccc) ^[+].

En caso de querer mostrar el cartel con otro aspecto, avísame y te ayudaré en lo que necesites.

Caja de texto o cartel de advertencia con fondo de color al azar

Hay varios trucos que nos ayudan a mostrar artilugios al azar o de forma aleatoria, desde imágenes hasta frases o entradas.

Pero esto es diferente. Se trata de una caja de texto con una particularidad muy especial: tiene un fondo de color verde, uno de color azul, otro de color lila... y los va mostrando de forma aleatoria, cada vez que se actualiza o se navega por el blog.

Se puede insertar tanto en una entrada cualquiera como en un elemento de página html-javascript.


Ver ejemplo en funcionamiento

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este script:

<script type="text/javascript">
var coloresaleatorios=["#cc66ad", "#66c8cc", "#66CC66", "#ccb566", "#8066cc"]
var alazar_color=Math.floor(Math.random()*coloresaleatorios.length)
if (coloresaleatorios[alazar_color].indexOf(":")!=-1){
coloresorden="background-color: "+coloresaleatorios[alazar_color].split(":")[0]+";"
coloresorden+="color: "+coloresaleatorios[alazar_color].split(":")[1]+";"
}
else
coloresorden="background-color: "+coloresaleatorios[alazar_color]+";"
document.write('<style type="text/css">\n')
document.write('.coloralazarbalcn{'+coloresorden+'}\n')
if (coloresaleatorios[alazar_color].split(":").length==3)
document.write('.coloralazarbalcn a{color:'+coloresaleatorios[alazar_color].split(":")[2]+';}\n')
document.write('<\/style>')</script>

Lo que te muestro en color verde son los códigos de los colores de fondo.

Puedes sustituirlos por tus colores favoritos utilizando la tabla de colores.

Si deseas añadir más colores de fondo, utiliza "#66CC66" tantas veces como desees pero ten en cuenta que debes separarlo por comas.

1) Para poner la caja en un gadget o elemento de página de la barra lateral pega esta línea debajo del script anterior:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

2) Para poner la caja en una entrada, guarda el gadget en el que pegaste el script y utiliza esta línea en el post para mostrarla:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

El cartel tiene un fondo de color gris. Podrás editarlo conociendo cada atributo:

border: 2px solid #cccccc; 2px es el grosor del borde. Incrementa o disminuye el valor para modificarlo.

El estilo es solid (normal) pero puedes utilizar otros modelos como dashed (lineal) o dotted (punteado).

Por último, #cccccc que representa el color del borde. Cámbialo haciendo uso de la tabla de colores.

Eso es todo por ahora, si necesitas cualquier tipo de ayuda avísame.

Mostrar las entradas más comentadas o más populares (script)

Hoy te traigo un sencillo truco que te permitirá mostrar una lista en la barra lateral de tu blog con los títulos de las entradas más comentadas, así como el número de comentarios que tiene cada una.

El script utiliza Yahoo Pipes y es muy sencillo de instalar.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega lo siguiente:

<script type="text/javascript">
function pipeCallback(entradas) {
document.write('<ol>');
var i;
for (i = 0; i < entradas.count ; i++)
{
var balcondireccion = "'" + entradas.value.items[i].link + "'";
var elementolista = "<li>" + "<a href=" + balcondireccion + ">" + entradas.value.items[i].title + "</a> </li>";
document.write(elementolista);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2FURL DE TU BLOG O WEB&num=4" type="text/javascript"></script>

Sustituye URL DE TU BLOG O WEB por la dirección de tu sitio. Debes escribir la URL sin el http:// y sin la barra final (/), como en este ejemplo: google.es

Para cambiar el número total de entradas a mostrar reemplaza el 4 que aparece en la definición num=4 por una cifra distinta.

Guarda el gadget para terminar.

Nota:

Te aconsejo que sitúes el widget al final de la sidebar, de manera que la página no tarde demasiado en cargar.

Recuperar la fecha en el blog

Puede darse el caso de que en las entradas de tu blog haya desaparecido la fecha. Si no conoces ninguna forma de recuperarla, sigue atentamente los pasos de esta entrada, ya que te ayudarán a reinstalarla de forma rápida y sencilla.

1) El primer paso es comprobar si la fecha está habilitada en el elemento "Entradas" que encontramos en el apartado de diseño...

2) Haciendo clic en Editar podrás organizar cada elemento que se muestra en los posts:




Comprueba que la casilla de la fecha (la primera casilla del segundo apartado: "Opciones de la página de entrada") está marcada. Si no lo está, márcala y guarda el elemento.

3) Si la fecha sigue sin mostrarse en las entradas, procederemos al segundo método: añadir el código necesario.

Diseño>Edición HTML>expandimos artilugios

4) Busca esta línea:

<b:loop values='data:posts' var='post'>

5) Y justo debajo agrega esto:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Seguidamente haz vista previa y guarda cambios para terminar:

Listas ordenadas en HTML

El lenguaje HTML nos ofrece la posibilidad de insertar listas ordenadas de forma específica, las cuales siguen un orden estricto.

Las listas ordenadas siempre comienzan por la etiqueta <ol> y terminan con el cierre </ol>.

Cada elemento insertado en la lista está marcado por la etiqueta <li>, y su pareja de cierre </li>.

Esta es la sintaxis que sigue una simple lista:

<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>

Y este es el resultado:

1. Uno
2. Dos
3. Tres
4. Cuatro

La etiqueta <ol> tiene dos atributos: start y type.

El artibuto start indica el elemento en el cual comienza la numeración.

Por ejemplo, en esta lista estamos indicando que se debe empezar a contar desde el número 4:

<ol start="4">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>

Y obtenemos esto:

4. Uno
5. Dos
6. Tres
7. Cuatro

La propiedad type, por el contrario, indica el símbolo a mostrar en cada elemento de la lista.

Podemos elegir entre:

Números: 1, 2, 3, 4...

Números romanos: I, II, III, IV...

O letras (mayúsculas o minúsculas): A, B, C, D...

Ambos atributos se incluyen en las listas de esta manera:

<ol type="A" start="1">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>

Y el resultado, en este caso es esto:

A. Uno
B. Dos
C. Tres
D. Cuatro

También es posible crear listas que contengan otras listas en su interior.

En este caso voy a realizar esta lista:

A. Perros
B. Gatos
1. Siameses
2. Persas
C. Aves

Y para ello debo seguir esta estructura:

<ol start="1" type="A">
<li>Perros</li>
<li>Gatos</li>
<ol start="1" type="1">
<li>Siameses</li>
<li>Persas</li>
</ol>
<li>Aves</li>
</ol>

Si te fijas, hay una lista "General" (marcada en naranja) con la etiqueta <ol start="1" type="A"> y su cierre </ol>.

Dentro de la lista general, encontramos una lista "Secundaria" (marcada en verde) con la etiqueta <ol start="1" type="1"> y su cierre </ol>.

Notas:

- La etiqueta <ol>
produce un salto de línea, dejando una línea en medio (similar al de la etiqueta <p>), tanto al principio como al final de la lista.

- Por otro lado, la etiqueta <li> provoca un salto de línea sin dejar una entre medias, como sucede con la etiqueta <br>.

Proteger tu blog bloqueando el subrayador de texto

Hemos aprendido ya muchas formas de proteger el blog. Publiqué trucos para proteger las imágenes del blog, para bloquear el teclado, para bloquear la tecla Ctrl, para deshabilitar el botón derecho del ratón... pero me faltaba uno.

Ahora te traigo este script que sirve para bloquear la selección de texto.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega lo siguiente:

<script language="Javascript">
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Guarda el gadget y tendrás tus artículos bien protegidos.

Proteger tu blog contra copiar información bloqueando la tecla Ctrl

Trás haber visto muchas formas de proteger el blog, ya sea mediante bloquear el botón derecho del ratón o bloquear el teclado, a muchas personas les llegaron ciertos inconvenientes...

Al aplicar el truco para bloquear el teclado, los visitantes del blog no podían escribir sus consultas en el buscador o escribir su email para suscribirse.

He estado dando vueltas al asunto y, trás darme cuenta de que bloquear el teclado por completo tiene sus desventajas, elaboré un truco para bloquear una única tecla: la tecla Ctrl o CONTROL.

Bloqueando dicha tecla, evitarás que cualquier cosa pueda ser seleccionada o copiada.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta <body> y añade el término onkeydown='return ctrlcblock(event)' de esta forma:

<body onkeydown='return ctrlcblock(event)'>

Ahora busca la etiqueta </head> y encima inserta el siguiente script:

<script language='JavaScript'>
function ctrlcblock (evt)
{if (evt.keyCode == &#39;17&#39;)
{alert(&quot;Blog protegido&quot;)
return true}
return false}
</script>

La frase resaltada en verde es el aviso que aparecerá en la ventana si alguien pulsa la tecla bloqueada (Ctrl):


Puedes sustituir la frase por cualquier otra cosa que te guste comunicar.

Finalmente, guarda la plantilla:

¡Así de fácil!

Proteger tu blog contra copiar información bloqueando el teclado

Previamente vimos el truco para proteger el blog contra copiar información bloqueando el botón derecho del ratón.

Hoy te traigo un nuevo truco que sirve para bloquear el teclado y el botón derecho del ratón, de manera que para tus visitantes será prácticamente imposible copiar la información que escribes, así como las imágenes.

Para bloquear ambos elementos haremos uso de un poco de javascript. Este script puedes ponerlo tanto en un gadget (elemento de página) html-javascript como dentro de la plantilla.

Para ponerlo en un gadget (este método es mucho más sencillo):

Diseño>añadir gadget (elemento de página)>html-javascript

Pega esto:

<script language="JavaScript">
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false'; alert ('Blog protegido');
}
}
function keypresed() {
alert(' Blog protegido ');
}
document.onkeydown=keypresed;
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>

Finalmente guarda el gadget.

Para ponerlo dentro de la plantilla:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y encima inserta el script:

<script language="JavaScript">
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false'; alert ('Blog protegido');
}
}
function keypresed() {
alert(' Blog protegido ');
}
document.onkeydown=keypresed;
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>

Para terminar, guarda la plantilla:




En el script puedes ver que hay una frase resaltada en verde: Blog protegido. Esto es el texto que aparecerá en la ventana de aviso cuando el usuario pulse cualquier tecla de su teclado:

¡Suerte!

Mostrar el momento del día en el que te encuentras en tu blog

Se me ocurrió hacer un script que se asemejara a un reloj pero en lugar de que se mostrasen las horas, que apareciese una frase comunicando el momento del día en el que nos encontramos, por ejemplo, si estás viendo un blog por la tarde, que el script mostrara una frase diciendo: ¡Buenas tardes!

Por suerte lo conseguí y ya puedes insertarlo en tu blog.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el script:

<div id="momentodia" style="color: #000000; font-size: 14px; font-family: arial;"/>
<script language="JavaScript">
<!--

document.write("<dl><dd>")
day = new Date()
hr = day.getHours()
if ((hr==1)||(hr==2)||(hr==3)||(hr==4) || (hr==5))
document.write("No te vas a dormir?")
if (((hr==6) || (hr==7) || (hr==8) || (hr==9) || (hr==10))
|| (hr==11)) document.write("Buenos días!")
if (hr==12) document.write("Comemos algo?")
if ((hr==13) || ((hr==14) || (hr==15) || (hr==16)) || (hr==17)) document.write("Buenas tardes!")
if ((hr==18) || (hr==19)) document.write("La tarde llega a su fin!")
if ((hr==20) || (hr==21) || (hr==22)) document.write("Buenas noches!")
if (hr==23) document.write("Ya es medianoche!")
if (hr==0) document.write("Es mañana!")
document.write("</dl>")
//--->
</script></div>

Deja que te explique un poco el código...

if ((hr==1)||(hr==2)||(hr==3)||(hr==4) || (hr==5)): son las horas (en cada caso son diferentes), que, como puedes ver en esta línea, indican las horas de sueño: por la noche.

En este otro caso: if ((hr==18) || (hr==19)) puedes ver como se trata de la tarde (a partir de las 6:00 hasta las 7:00).

Puedes configurar tu propio horario, tendiendo en cuenta las horas que ya has escrito (¡no las repitas!) y así escribir tus propias frases.

En cada apartado he escrito una frase (resaltadas en verde) conforme a las horas. Puedes cambiarlas y escribir algo personal si lo deseas.

Para modificar el estilo del texto, atiende a las siguientes propiedades:

color: #000000; Esto es el color del texto (#000000). Puedes modificarlo usando la tabla de colores.

font-size: 14px; Este es el tamaño del texto (14px). Incrementa o disminuye el valor para agrandar o encoger las frases.

font-family: arial; Este es el tipo de fuente (arial). Puedes sustituirlo por otras fuentes como Trebutchet, Comic Sans MS, Serif...

Cuando hayas terminado de modificar el código, guarda el gadget y colócalo en el lugar que desees.

Cambiar el título de la cabecera en el blog

Hace tiempo aprendimos a eliminar el título del blog, así como a ocultarlo.

Hoy te voy a enseñar a cambiar el título que aparece en la cabecera de tu blog, de manera que puedas escribir una frase cualquiera.

Diseño>edición HTML>expandimos artilugios

Ahora busca este código:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='título de tu blog(cabecera)'
type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>

Cambia las dos etiquetas que aparecen en negrita por una frase o palabra personal que actuará como título en tu blog.

Por último, guarda la plantilla: