Un widget para tener perfil despegable en tu blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Un widget "Perfil desplegable" para tu blog

Es muy probable que en tu blog dispongas de un apartado en el que incluyes datos personales, una breve descripción de ti o simplemente una fotografía. Además, blogger nos ofrece un gadget denominado "Perfil" ideal para esto mismo.

Basándome en dicha herramienta he querido idear un nuevo widget, un elemento que despliega tu información al pulsar un botón, tal y como puedes ver en esta imagen:


¿Lo mejor de todo? la facilísima instalación que conlleva.

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

Busca la etiqueta </head> en tu plantilla y añade esto encima:

<script type='text/javascript'>
function blcnperf1(blconted) {
var c=blconted.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>
<link href='https://sites.google.com/site/scriptsbalcon/b/blcnperf.css' media='all' rel='stylesheet' type='text/css'/>

Guarda la plantilla.

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

Pega el código:

<a onclick="return blcnperf1(this);" style="cursor: hand; cursor: pointer;"><center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2i-ewkUuHR4pHx_DoEwZgVM12dwkT02bT2hLAzTTIwaTmwaqivQAh3hcH7Aeps8Q4CfkUJsW4v1xq_PaAhhfruxRN0n8Im-LfrIMQBYkJfQnhl3D2oJghDIzc4YhQJdz7N_XKNqFJuGo/s320/blmiprf.png" /></center></a><div style="display: none;">
<div id="blcn1"><img src="URL DE TU FOTO" />
<span id="balcneleM">Nombre:</span>TU NOMBRE
<br /><span id="balcneleM">Sexo:</span>TU SEXO
<br /><span id="balcneleM">Profesión:</span>TU PROFESION
<br /><span id="balcneleM">Ubicación:</span>TU UBICACION
<br /><span id="balcneleM">Intereses:</span>TUS INTERESES
</div>
</div>

Ahora tan solo necesitas rellenarlo. Para ello, sustituye las frases en color verde con tus datos personales y guarda el gadget una vez hayas terminado.

Ten en cuenta que puedes incluir una fotografía por lo que deberás reemplazar URL DE TU FOTO con la dirección de la imagen que previamente hayas alojado en blogger o en algún otro servicio.

Si deseas añadir más campos de texto, utiliza líneas como esta (insértalas siempre antes de los cierres </div> y </div>):

<br /><span id="balcneleM">Intereses:</span>TUS INTERESES

Ahora, tan solo disfruta de tu nuevo widget.

Read More

El título "Publicado por..."debajo de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Mostrar la línea 'Publicado por...' bajo el título de las entradas

Hay plantillas a las que les favorece, por motivos de estética, tener la línea de 'Publicado por...' y el nombre del autor de cada entrada bajo el título de ésta. Conseguirlo es muy fácil y en unos minutos lo habrás aplicado a tu blog.

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

Busca este bloque en tu plantilla y elimínalo:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Seguidamente, encuentra esta línea:

<div class="post-header-line-1">

Justo a continuación (debajo) añade lo siguiente (se trata del bloque anteriormente eliminado):

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Con esto habrás cambiado la posición de la línea 'Publicado por...'. Ya no aparecerá en el pie de tus entradas sino que lo hará bajo el título.

Sáltate el primer paso si te gustaría conservar el 'Publicado por...' también en el pie de los posts.

¿Cómo puedo incluir una imagen o icono justo antes de la línea?


Tan solo tienes que utilizar este otro bloque en lugar del anterior:

<img src="URL IMAGEN"/><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Reemplaza URL IMAGEN por la dirección del icono o la imagen a mostrar.

Guarda la plantilla para terminar.

Read More

Cómo firmar tu blog con tu firma o elemento de página

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Firma en tu blog con un gadget o elemento de página

Previamente aprendimos a insertar una firma personal, así como una firma para diferentes autores en el blog.

Se me ocurrió provar con un método más sencillo y afortunadamente lo conseguí.

Para crear tu firma usaremos la herramienta Mylivesignature.

Una vez creada, necesitarás alojarla en un servidor, como puede ser imageshack o photobucket.

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

Seguidamente pega este bloque de estilo:

<style>
.post-body{
background: transparent url(URL DE TU IMAGEN) no-repeat bottom right;
padding: 5px;
}
</style>

Sustituye URL DE TU IMAGEN por la dirección de tu firma o imagen y guarda el gadget.

Si no sabes cómo obtener la URL de una imagen mira esta entrada.

Nota:

Si realizas estos pasos y la firma no aparece en tu blog no te preocupes. Se debe a que tu plantilla tiene asignado un nombre diferente para el bloque de entradas (post-body).

Deja tu comentario y podré ayudarte a insertar la firma.

Read More

Como proteger tu blog contra copia

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

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!

Read More

Como poner el nombre del autor con un enlace personal

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Nombre del autor de la entrada con un enlace personal

Podemos hacer que el nombre del autor de cada entrada tenga un enlace hacia su perfil en blogger, hacia el apartado "Sobre mi" de la propia bitácora e incluso un enlace hacia el perfil de twitter.

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

Busca este bloque de código:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Ahora debes borrarlo para incluir este en su lugar:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><a title="TITULO" href='URL PAGINA' target="_blank"><data:post.author/></a></span>
</b:if>
</span>

Reemplaza URL PAGINA por la dirección a la que deseas enlazar con tu nombre en cada entrada.

En TITULO puedes escribir una frase corta, como "Visita mi perfil" de manera que pueda verse en un pequeño cartelito (tooltip) al dejar el cursor o puntero un tiempo encima del nombre.

Utiliza este otro código si lo que prefieres es utilizar una imagen, icono o firma en lugar del texto para mostrar tu nombre:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><a href='URL PAGINA' target="_blank"><img src="URL IMAGEN"/></a></span>
</b:if>
</span>

Incluye la dirección del icono, firma o imagen en donde dice URL IMAGEN, así como la dirección del sitio web en URL PAGINA.

Para blogs con varios autores

Reemplaza la etiqueta <data:post.author/> por este bloque de código:

<b:if cond='data:post.author == "NOMBRE AUTOR"'>
<a href='URL PAGINA' title='TITULO' target='_blank'><data:post.author/></a>
</b:if>

Reemplaza NOMBRE AUTOR por el nombre de cada autor del blog tal cual aparece en su perfil de blogger (con espacios o acentos incluidos).

Pega este código tantas veces como autores haya en el blog. Sustituye URL PAGINA con la dirección a la que deseas enlazar.

Guarda la plantilla y habrás terminado.

Read More

Incluir sección "Acerca del autor" al pie de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Incluir sección 'Acerca del autor' en el pie de tus entradas

La plataforma Wordpress ofrece una pequeña ventaja: la posibilidad de añadir al pie de cada artículo una pequeña biografía acerca del autor que lo escribe e incluso una imagen de éste. Son muchos los lectores que me han preguntado si podríamos incluir este artilugio en un blog de blogger y por suerte, la respuesta es afirmativa.

No solo podrás incluir una breve descripción de ti sino que dispondrás de un espacio para mostrar una foto o avatar e incluso enlaces a otras páginas.

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

1) Busca este bloque de código en tu plantilla y elimínalo:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>

2) Localiza la línea <data:post.body/> y justo debajo añade esto:

<div id='Sobreauttrblcn'>
<img border='0' src='URL IMAGEN'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'>AUTOR DEL ARTÍCULO:</span> <strong><data:post.author/></strong></div>
<p>BREVE BIOGRAFIA DEL AUTOR</p>
</div>

<style>
#Sobreauttrblcn {font-family:Arial,helvetica,sans-serif;background:#F4F4F4;border:1px solid #CCCCCC;color:#424242;font-size:12px;letter-spacing:0;margin:20px 0;padding:6px;text-transform:none;}
#blAAut {border-bottom:3px solid #DDDDDD;width:80%;}
#Sobreauttrblcn strong {padding-left:6px;color:#333333;font-weight:bold;font-size:13px;}
#Sobreauttrblcn img {background:#FFFFFF;border:1px solid #CCCCCC;float:right;
height:70px;margin:4px 4px 8px 6px;width:70px;}
</style>

3) Tan solo debes escribir tu biografía e incluir tu foto / avatar reemplazando URL IMAGEN con la dirección de ésta. No necesitas escribir tu nombre ya que aparecerá de forma automática. Si lo deseas puedes editar la frase en el código que aparecerá como título "AUTOR DEL ARTÍCULO:".

El recuadro con tu biografía podrá visualizarse al pie de todas las entradas en cualquier apartado del blog. Para mostrarlo únicamente en las páginas de entradas individuales, añade las líneas resaltadas en negrita al principio y al final del primer bloque -respectivamente-:

<b:if cond='data:blog.pageType == "item"'>
<div id='Sobreauttrblcn'>
<img border='0' src='URL IMAGEN'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'>AUTOR DEL ARTÍCULO:</span> <strong><data:post.author/></strong></div>
<p>BREVE BIOGRAFIA DEL AUTOR</p>
</div>
</b:if>

Guarda la plantilla para terminar.

Para blogs con más de un autor

Si en el blog escribe más de un blogger y deseas aplicar este truco para ofrecer un recuadro de información personal a cada administrador haz lo siguiente.



Sigue los mismos pasos citados anteriormente pero en lugar de incluir el primer bloque de código en el paso 2, haz uso de bloques como estos:

<div id='Sobreauttrblcn'><b:if cond='data:post.author == "NOMBRE AUTOR"'>
<img border='0' src='<span style="color: rgb(204, 102, 0);">URL IMAGEN</span>'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'><span style="color: rgb(51, 102, 102);">AUTOR DEL ARTÍCULO:</span></span> <strong><data:post.author/></strong></div>
<p><span style="color: rgb(0, 153, 0);">BREVE BIOGRAFIA DEL AUTOR</span></p></b:if>

<div id='Sobreauttrblcn'><b:if cond='data:post.author == "NOMBRE AUTOR"'>
<img border='0' src='<span style="color: rgb(204, 102, 0);">URL IMAGEN</span>'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'><span style="color: rgb(51, 102, 102);">AUTOR DEL ARTÍCULO:</span></span> <strong><data:post.author/></strong></div>
<p><span style="color: rgb(0, 153, 0);">BREVE BIOGRAFIA DEL AUTOR</span></p></b:if>

</div>

Cada vez que desees añadir un nuevo autor, agrega lo siguiente antes del cierre </div>:

<div id='Sobreauttrblcn'><b:if cond='data:post.author == "NOMBRE AUTOR"'>
<img border='0' src='<span style="color: rgb(204, 102, 0);">URL IMAGEN</span>'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'><span style="color: rgb(51, 102, 102);">AUTOR DEL ARTÍCULO:</span></span> <strong><data:post.author/></strong></div>
<p><span style="color: rgb(0, 153, 0);">BREVE BIOGRAFIA DEL AUTOR</span></p></b:if>

Sustituye NOMBRE AUTOR por el nombre del autor tal y como aparece en su perfil de blogger (utilizando espacios, tildes o carácteres especiales si los posee).

Guarda la plantilla y listo.

Notas:

- Editar el aspecto del recuadro es muy sencillo. Deja un comentario en caso de necesitar ayuda.

- La biografía de cada autor que se muestra en las imágenes de ejemplo son ficticias.

Read More