"Leer más" con miniatura de imagen ( script en la plantilla)

Son muchas las personas que me consultan sobre el tema y que aún tienen problemas para saber como alojar los script en algún servidor externo a Blogger.
Como algunos ya sabéis, muchos de los scripts que usamos en el blog, pueden alojarse sin problemas en la misma plantilla.

En el caso de la entrada que publiqué hace algún tiempo "Leer más" con miniatura de imagen, es bastante aconsejable hacerlo así, ya que además de ahorrarnos problemas de dependencia con algún servidor externo, el script no ocupa demasiado tamaño.

Nota:

Si vais a añadir este efecto por primera vez, es aconsejable que leáis antes la entrada anterior al respecto, más que nada porque encontraréis información de como funciona exactamente, así como un ejemplo en funcionamiento y las modificaciones que pueden hacerse.

Para los que ya lo estáis usando, fijaros que la única diferencia está en el código del paso [3] y que no deberéis modificar nada más.

[1] Nos situamos en la pestaña de "Edición HTML" de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios" para localizar este código: <data:post.body/>

[2] Una vez lo hemos localizado, lo eliminamos y en su lugar colocamos este otro:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

[3] Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta: </head>

Justo antes de esa etiqueta (</head>) colocamos este código:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Transforma tus imagenes online a "polaroid"

Este servicio online, además de rápido es gratuito.

Solo tenemos que escoger la fotografía que vamos a transformar en polaroid desde nuestro PC en "Select A Picture", añadir una pequeña descripción o texto en "Add A Brief Description" (que se mostrará al pie de la imagen) e introducir el grado de rotación (es opcional) en "Rotate?" y  por último, pinchar en "Umpload Picture".

Si usamos el link que nos proporcionan para acceder a nuestra polaroid, tendremos en cuenta que solo es válido durante 24 horas, después la instantánea desaparece, así que mejor la guardamos en el PC para conservarla.


Y aunque os parezca increíble, esta imagen que veis como ejemplo del resultado, es una fotografía mía en una fiesta de disfraces hace unos años.

Enlace: Instantizer

Tachado con imagen

Es un efecto muy lindo que publicó hace tiempo Blog Bazar, en realidad fue una de sus primeras y últimas entradas, ya que el blog lleva tiempo sin ser actualizado.

Habíamos visto en una entrada anterior, como conseguir "tachar" un texto en nuestro blog usando la etiqueta <strike>

La idea que Blog Bazar nos presenta, es esta misma pero usando una imagen para lograr un efecto aún más original.

[1] Aplicamos este código colocandolo en nuestra plantilla antes de </head>

<style type='text/css'>
strike {text-decoration:none; background:transparent url(url_de_la_imagen) repeat-x left 55%}
</style>

[2] Para usarlo en el blog, sencillamente tenemos que incluir el texto que queremos mostrar tachado, entre las etiquetas <strike> y </strike>
Si vamos a usarlo en las entradas, lo haremos desde la pestaña de Edición de HTML del editor.


Nota: Aunque el texto que vamos a tachar sea una frase e incluso más largo, no habrá problema ya que la imagen se repetirá hasta completar el ancho del texto incluido entre esas etiquetas (strike).

Aquí tenéis las imágenes que Blog Bazar comparte con todos nosotros: