Boton de Leer Mas para blogger

Muchas veces cuando creamos un blog, los demos que vemos y descargamos para utilizar en nuestras plantillas se ven muy bien, y resulta que cuando los pones en tu blog, no tienen varios gadgets y aplicaciones que se mostraban en el demo. Aqui les dejo uno muy util, ya que nos ayuda a resumir las publicaciones y solo sale un resumen y un boton que dice leer mas. Si quieres saber cómo poner en tu blog leer más con una imagen sigue los siguientes pasos que te muestro aqui:


Algo super importante antes de hacer cualquier cambio, respalda tu blog, ya que podria no ser compatible el codigo y para no tener perdidas, lo mas recomendable es respaldarlo. Siempre antes de guardar algo, dale previw.

En nuestro administrador del blog, vamos a diseño, y luego a "Edición HTML" de nuestro panel. Muy importante esto, deben marcar la casilla de "Expandir las plantillas de artilugios" de lo contrario no servira esta aplicacion. Despues si utilizan Fire fox, opriman en el teclado ctrol F y aparecera una barrita de busqueda de palabras, de esta forma sera mas facil localizar este código:

<data:post.body/>

Una vez que lo localizamos, lo eliminamos y en su lugar colocamos este otro:
<b:if cond='data:blog.pageType != "item"'><br><div expr:id='"summary" + data:post.id'><data:post.body/></div><br><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br><span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span><br></b:if><br><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


Nota Importante: Si quieres que en lugar de "Leer más" como texto veamos una imagen en su lugar, sustituiremos en el primer código Leer más por:

<img src="aquí-la-url-de-la-imagen" />

Despues, buscamos arriba el código de la plantilla hasta encontrar: </head>

y justo antes de colocamos este código:

<script type='text/javascript'><br>summary_noimg = 430;<br>summary_img = 340;<br>img_thumb_height = 100;<br>img_thumb_width = 120;<br></script><br><script type='text/javascript'><br>//<![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){<br>s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br>}<br>}<br>strx = s.join("");<br>}<br>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) {<br>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>';<br>summ = summary_img;<br>}<br><br>var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br>div.innerHTML = summary;<br>}<br><br>//]]><br></script>


Nota: En este ultimo codigo, casi al principio localizamos las siguientes partes que acontinuación se explican.

summary_noimg: Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada cuando no hemos incluido imágenesen ella.

summary_img: Es donde colocamos el número de caracteres de texto a mostrar en el resumen de la entrada,acompañando a la miniatura de la imagen.