La Red Te Ayudara

Plantilla de Entrada las labores repetitivas

La Plantilla de Entrada, otra muy buena utilidad que nos brinda blogger para facilitarnos las labores repetitivas de nuestras entradas, así que si mas vamos a verla.

Para acceder a ella tendremos que ir a:

Vista diseño de nuestro blog y pasaremos a configuración, Entradas y comentarios y vemos que tenemos dentro de Entradas, Plantilla de las entradas, es en ese recuadro donde pondremos todo lo que queramos que salga en nuestras entradas, ahora bien todo lo tendremos que poner en HTML, pero si no sabemos nada de este código bastara con ir a una nueva entrada y en vista redactar poner lo que queramos que salga y luego pasamos a vista html y copiamos y pegamos todo el código, en el recuadro que mencionábamos antes.
Esto ocurrirá a partir de incorporar el código, todas las demás entradas seguirán como estaban hasta ese momento. Pero todas las nuevas entradas que hagamos saldrán nuestro código y que si en ese momento no quisiéramos que se vieran, bastara con eliminarla en esta entrada, y la próxima , volvería a salir.
Por lo que si ponemos algo que luego no queremos que salga, sera cuestión de volver a donde hemos señalado en primer termino y eliminarlo. En este blog, ahora tenemos esta firma y los iconos sociales que tenemos en las nuevas entradas.

Ya sabes, si quieres comentar... y si te gusto compártelo...

La Plantilla de Entrada, otra muy buena utilidad que nos brinda blogger para facilitarnos las labores repetitivas de nuestras entradas, así que si mas vamos a verla.

Para acceder a ella tendremos que ir a:

Vista diseño de nuestro blog y pasaremos a configuración, Entradas y comentarios y vemos que tenemos dentro de Entradas, Plantilla de las entradas, es en ese recuadro donde pondremos todo lo que queramos que salga en nuestras entradas, ahora bien todo lo tendremos que poner en HTML, pero si no sabemos nada de este código bastara con ir a una nueva entrada y en vista redactar poner lo que queramos que salga y luego pasamos a vista html y copiamos y pegamos todo el código, en el recuadro que mencionábamos antes.
Esto ocurrirá a partir de incorporar el código, todas las demás entradas seguirán como estaban hasta ese momento. Pero todas las nuevas entradas que hagamos saldrán nuestro código y que si en ese momento no quisiéramos que se vieran, bastara con eliminarla en esta entrada, y la próxima , volvería a salir.
Por lo que si ponemos algo que luego no queremos que salga, sera cuestión de volver a donde hemos señalado en primer termino y eliminarlo. En este blog, ahora tenemos esta firma y los iconos sociales que tenemos en las nuevas entradas.

Ya sabes, si quieres comentar... y si te gusto compártelo...

Quitar Leer más automático de las entradas

Unknown Códigos, Post, Tutoriales

Si ahora lo quieres quitar el Leer más automático, seguiremos unos pasos para dejar la entrada como antes. Solo tendremos que retroceder los pasos que en su día dimos para ponerlo.

Seria interesante que antes de hacer nada, respaldáramos la plantilla.
1. Entramos en Diseño | Edición de HTML Control F buscamos el siguiente código;:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Busca lo marcado en verde para situarte, puede que no sea el mismo pero veras que se parece bastante.
2. Una vez localizado, eliminalo todo y pones en su lugar el siguiente código:

<data:post.body/>

Haremos vista previa y si todo va bien, veras las entradas completas.

Así que ahora lo que haremos sera quitar el script, así que aligeraremos nuestra plantilla al no obligarlo a cargar algo que no necesitamos.

3. Buscaremos ahora antes de </head> o después de <head> un código como este lo eliminaremos:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Con estos pasos ya no tendremos el Leer más automático con imágenes en miniatura.
Espero que te sea util.
Si te gusto compártelo...

Si ahora lo quieres quitar el Leer más automático, seguiremos unos pasos para dejar la entrada como antes. Solo tendremos que retroceder los pasos que en su día dimos para ponerlo.

Seria interesante que antes de hacer nada, respaldáramos la plantilla.
1. Entramos en Diseño | Edición de HTML Control F buscamos el siguiente código;:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Busca lo marcado en verde para situarte, puede que no sea el mismo pero veras que se parece bastante.
2. Una vez localizado, eliminalo todo y pones en su lugar el siguiente código:

<data:post.body/>

3. Buscaremos ahora antes de </head> o después de <head> un código como este lo eliminaremos:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Con estos pasos ya no tendremos el Leer más automático con imágenes en miniatura.
Espero que te sea util.
Si te gusto compártelo...

Como poner un cuadro de texto en los Post

Unknown Códigos, Post, Tutoriales

En ocasiones tenemos que poner un cuadro de texto en los post, ya que si no podía ser interminable, pues bien entre otros, este es un sistema muy rápido y fácil de ejecutar.

Consiste en tener a mano este código, tal y como esta, eso sí tendremos que ponerlo en vista HTML, sino no funcionara.

Como puedes ver, lo que está en azul, lo podemos poner al centro, a la izquierda o derecha. center left right

Las medidas para poder modificarlo a nuestro gusto o adaptarlo al espacio que tengamos.

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 500px; height: 200px;"><div align="left"><span style="font-size: 100%;">

En este espacio ponemos el texto que queramos; sea largo o corto.

</span></div></pre></div>

Así que ya veis este será el resultado:




Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dell



as.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no


Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no

¿Te ha resultado útil?
Puedes comentar y compartir

En ocasiones tenemos que poner un cuadro de texto en los post, ya que si no podía ser interminable, pues bien entre otros, este es un sistema muy rápido y fácil de ejecutar.

Consiste en tener a mano este código, tal y como esta, eso sí tendremos que ponerlo en vista HTML, sino no funcionara.

Como puedes ver, lo que está en azul, lo podemos poner al centro, a la izquierda o derecha. center left right

Las medidas para poder modificarlo a nuestro gusto o adaptarlo al espacio que tengamos.

<span id="fullpost"><div align="center"><pre style="overflow: auto; width: 500px; height: 200px;"><div align="left"><span style="font-size: 100%;">

En este espacio ponemos el texto que queramos; sea largo o corto.

</span></div></pre></div>

Así que ya veis este será el resultado:




Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dell



as.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no


Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no

¿Te ha resultado útil?
Puedes comentar y compartir

Expandir títulos de los post en las etiquetas

Unknown Códigos, Post, Tutoriales

Vamos a ver como mostrar los títulos de los post cuando ordenamos por etiquetas nuestro blog, Iremos a Diseño, Html, Buscaremos </head> y pondremos el siguiente script:

<script type='text/javascript'>//<![CDATA[function toggleIt(id) {post = document.getElementById(id);if (post.style.display != 'none') {post.style.display = 'none';} else {post.style.display = '';}}function showFullPost(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'inline';if (spans[i].id == "readmore")spans[i].style.display = 'none';}}function showFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'inline';if (spans[i].id == "showlink")spans[i].style.display = 'none';if (spans[i].id == "hidelink")spans[i].style.display = 'inline';}}function hideFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'none';if (spans[i].id == "showlink")spans[i].style.display = 'inline';if (spans[i].id == "hidelink")spans[i].style.display = 'none';}post.scrollIntoView(true);}function checkFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');var found = 0;for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")found = 1;if ((spans[i].id == "showlink") && (found == 0))spans[i].style.display = 'none';}}function commentDisplay(json) {for (var i = 0; i < numcomments; i++) {var entry = json.feed.entry[i];var alturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}alturl = alturl.replace("#", "#comment-");if (entry.content) {comment = entry.content.$t;} else if (entry.summary) {comment = entry.summary.$t;}var re = /<\S[^>]*>/g; comment = comment.replace(re, ""); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');if (comment.length < numchars)document.write(comment + '<br/><br/>');elsedocument.write(comment.substring(0, numchars) + '...<br/><br/>');}}//]]></script>

Buscaremos en nuestra plantilla:

<b:includable id='main' var='top'><div id='blog-posts'><b:loop values='data:posts' var='post'><b:if cond='data:post.dateHeader'><h2 class='date-header'><data:post.dateHeader/></h2> </b:if>

Justo encima, pondremos lo siguiente

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'><b:include data='post' name='PeekABooPost'/><b:else/><b:include data='post' name='post'/></b:if><b:else/>

Ahora buscaremos

<b:include data='post' name='post'/>

y debajo pondremos:

</b:if>

o explicado de otra manera, seria buscar lo que esta escrito en negro y pegar encima lo azul.

<b:includable id='PeekABooPost' var='post'><div class='post uncustomized-post-template'><table><tr><td width='40px'><a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Expandir/contraer la entrada'>[+/-]</a></td><td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table><div class='post-body' expr:id='data:post.id' style='display:none'><p><data:post.body/></p><div style='clear: both;'/> </div></div></b:includable><b:includable id='main' var='top'><div id='blog-posts'><b:loop values='data:posts' var='post'><b:if cond='data:post.dateHeader'><h2 class='date-header'><data:post.dateHeader/></h2></b:if><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><b:include data='post' name='PeekABooPost'/><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Y esta seria la manera de hacerlo. Guardar cambios

Vamos a ver como mostrar los títulos de los post cuando ordenamos por etiquetas nuestro blog, Iremos a Diseño, Html, Buscaremos </head> y pondremos el siguiente script:

<script type='text/javascript'>//<![CDATA[function toggleIt(id) {post = document.getElementById(id);if (post.style.display != 'none') {post.style.display = 'none';} else {post.style.display = '';}}function showFullPost(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'inline';if (spans[i].id == "readmore")spans[i].style.display = 'none';}}function showFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'inline';if (spans[i].id == "showlink")spans[i].style.display = 'none';if (spans[i].id == "hidelink")spans[i].style.display = 'inline';}}function hideFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")spans[i].style.display = 'none';if (spans[i].id == "showlink")spans[i].style.display = 'inline';if (spans[i].id == "hidelink")spans[i].style.display = 'none';}post.scrollIntoView(true);}function checkFull(id) {var post = document.getElementById(id);var spans = post.getElementsByTagName('span');var found = 0;for (var i = 0; i < spans.length; i++) {if (spans[i].id == "fullpost")found = 1;if ((spans[i].id == "showlink") && (found == 0))spans[i].style.display = 'none';}}function commentDisplay(json) {for (var i = 0; i < numcomments; i++) {var entry = json.feed.entry[i];var alturl;if (i == json.feed.entry.length) break;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}alturl = alturl.replace("#", "#comment-");if (entry.content) {comment = entry.content.$t;} else if (entry.summary) {comment = entry.summary.$t;}var re = /<\S[^>]*>/g; comment = comment.replace(re, ""); document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');if (comment.length < numchars)document.write(comment + '<br/><br/>');elsedocument.write(comment.substring(0, numchars) + '...<br/><br/>');}}//]]></script>

Buscaremos en nuestra plantilla:

<b:includable id='main' var='top'><div id='blog-posts'><b:loop values='data:posts' var='post'><b:if cond='data:post.dateHeader'><h2 class='date-header'><data:post.dateHeader/></h2> </b:if>

Justo encima, pondremos lo siguiente

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'><b:include data='post' name='PeekABooPost'/><b:else/><b:include data='post' name='post'/></b:if><b:else/>

Ahora buscaremos

<b:include data='post' name='post'/>

y debajo pondremos:

</b:if>

o explicado de otra manera, seria buscar lo que esta escrito en negro y pegar encima lo azul.

<b:includable id='PeekABooPost' var='post'><div class='post uncustomized-post-template'><table><tr><td width='40px'><a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Expandir/contraer la entrada'>[+/-]</a></td><td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table><div class='post-body' expr:id='data:post.id' style='display:none'><p><data:post.body/></p><div style='clear: both;'/> </div></div></b:includable><b:includable id='main' var='top'><div id='blog-posts'><b:loop values='data:posts' var='post'><b:if cond='data:post.dateHeader'><h2 class='date-header'><data:post.dateHeader/></h2></b:if><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><b:include data='post' name='PeekABooPost'/><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Y esta seria la manera de hacerlo. Guardar cambios

Leer más automático con imágenes en miniatura

Unknown Códigos, Post, Tutoriales

La opción Leer Más, está en Blogger, aunque tenderemos que hacerlo a mano, y la verdad teniendo la posibilidad de escribir nuestro artículo y que un script lo haga, pienso que vale la pena perder un tiempo, instalándolo y luego ya olvidarnos del tema.

Además nuestro script nos va a mostrar los thumbnails, que son las miniaturas de las imágenes en la entrada.

El script de Anhvo que permite poner el Leer más en todas las entradas de forma automática, y además de eso muestra la imagen en miniatura que tenemos en la entrada, la cual podemos configurar para que sea del tamaño que se desee.

Para ponerlo en tu blog iremos a
Plantilla Edición de HTML, buscaremos con Ctrol F

<data:post.body/>

Ahora pega antes de
Sustituye esa etiqueta por este otro código:

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

Antes de </head> lo siguiente:

<
script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE__j4ssSG_ujIS74az2B1XlDx_aok9noUqw-kq2q2kuAJn0CiYbWaNx5qU_tj7Jy52w7ciyrTpMtrDR-OfQFVdTWVD6vh45tS5ODBhkE5qQgSLsMNfg6oAp_VNrczA5emVNbGK9mqfZ0/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Tendremos que observar que la primera etiqueta que hay que cambiar, este dos o más veces,

Si fuera así, la cambiaríamos en la primera, daríamos Vista Previa y si no vemos los cambios lo haríamos en la siguiente que tuviésemos repetida y así sucesivamente.

Si quieres darle otro estilo al enlace de Leer más como un color de fondo, cambiar el color del texto, etc. entonces pega antes de

]]></b:skin>

lo siguiente:

.rmlink {float:right;background: #04B4AE; /* Color de fondo */border: 1px solid #000;font-weight: bold;padding: 1px 2px;margin-left:20px;}
.rmlink a {
color: #FFF; /* Color del texto */
text-decoration: none;font-weight: bold;}
.rmlink:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;text-decoration:none;}

También puedes cambiar el texto Leer más... por otro texto cambiando lo que está en color verde en el primer código. Si prefieres usar una imagen en lugar de un texto entonces sustituye ese texto por el código de la imagen:

<img src="URL de la imagen" />

Es sencillo y ya tendremos nuestro Leer más instalado

Además nuestro script nos va a mostrar los thumbnails, que son las miniaturas de las imágenes en la entrada.

Para ponerlo en tu blog iremos a
Plantilla Edición de HTML, buscaremos con Ctrol F

<data:post.body/>

Ahora pega antes de
Sustituye esa etiqueta por este otro código:

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

Antes de </head> lo siguiente:

<
script type='text/javascript'>
summary_txt = 410;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE__j4ssSG_ujIS74az2B1XlDx_aok9noUqw-kq2q2kuAJn0CiYbWaNx5qU_tj7Jy52w7ciyrTpMtrDR-OfQFVdTWVD6vh45tS5ODBhkE5qQgSLsMNfg6oAp_VNrczA5emVNbGK9mqfZ0/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Tendremos que observar que la primera etiqueta que hay que cambiar, este dos o más veces,

Si fuera así, la cambiaríamos en la primera, daríamos Vista Previa y si no vemos los cambios lo haríamos en la siguiente que tuviésemos repetida y así sucesivamente.

Si quieres darle otro estilo al enlace de Leer más como un color de fondo, cambiar el color del texto, etc. entonces pega antes de

]]></b:skin>

lo siguiente:

.rmlink {float:right;background: #04B4AE; /* Color de fondo */border: 1px solid #000;font-weight: bold;padding: 1px 2px;margin-left:20px;}
.rmlink a {
color: #FFF; /* Color del texto */
text-decoration: none;font-weight: bold;}
.rmlink:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;text-decoration:none;}

<img src="URL de la imagen" />

Es sencillo y ya tendremos nuestro Leer más instalado

[+/-] Texto oculto con enlace para visualizarlo

Unknown Códigos, Post

Si queremos tener una pagina con varios apartados agrupados con un solo titulo.
bastara con ir a Vista diseño y con Ctrol F buscar </head> y añade este script encima:

<script type='text/JavaScript'>

function blmostrocult(blconted) {

var c=blconted.nextSibling;

if(c.style.display=='none') {

c.style.display='block';

} else {

c.style.display='none';

}

return false;

}

</script>

Luego abriremos nuestra pagina y colocaremos el siguiente código en edición HTML remplazaremos

[+/-] TITULO por lo que queramos poner y en contenido oculto pondremos todo lo que queramos que aparezca al desplegar.

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">[+/-] TITULO</a><div style="display: none;">CONTENIDO OCULTO</div>

Si queremos tener una pagina con varios apartados agrupados con un solo titulo.
bastara con ir a Vista diseño y con Ctrol F buscar </head> y añade este script encima:

<script type='text/JavaScript'>

function blmostrocult(blconted) {

var c=blconted.nextSibling;

if(c.style.display=='none') {

c.style.display='block';

} else {

c.style.display='none';

}

return false;

}

</script>

Luego abriremos nuestra pagina y colocaremos el siguiente código en edición HTML remplazaremos

[+/-] TITULO por lo que queramos poner y en contenido oculto pondremos todo lo que queramos que aparezca al desplegar.

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">[+/-] TITULO</a><div style="display: none;">CONTENIDO OCULTO</div>

Código para escribir en dos columnas

Unknown Códigos, Post

Para utilizar el siguiente código, que nos permite escribir en columnas, tendremos que abrir una nueva entrada e ir a edición HTML .
Se trata de pegar el código y el contenido que queramos poner en cada una de las columnas lo pondremos donde dice:

Aquí el texto que quieras poner a la izquierda

Y lo mismo para el texto que queramos poner a la derecha:

Aquí el texto que quieras poner a la derecha

<div style="float: left; width: 45%;">
<div style="text-align: justify;">
Aqui el textoque quieras poner en la izquierda
</div>
</div>
<div style="float: right; width: 45%;">
<div style="text-align: justify;">
Aqui el textoque quieras poner en la derecha
</div>

Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas. Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias. Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática. El gran Oxmox le desanconsejó hacerlo, ya que esas tierras estaban llenas de comas malvadas, signos de interrogación salvajes y puntos y coma traicioneros, pero el texto simulado no se dejó atemorizar. Empacó sus siete versales, enfundó su inicial en el cinturón y se puso en camino. Cuando ya había escalado las primeras colinas de las montañas cursivas, se dio media vuelta para dirigir su mirada por última vez, hacia su ciudad natal Letralandia, el encabezamiento del pueblo Alfabeto y el subtítulo de su

Aquí el texto que quieras poner a la izquierda

Y lo mismo para el texto que queramos poner a la derecha:

Aquí el texto que quieras poner a la derecha

<div style="float: left; width: 45%;">
<div style="text-align: justify;">
Aqui el textoque quieras poner en la izquierda
</div>
</div>
<div style="float: right; width: 45%;">
<div style="text-align: justify;">
Aqui el textoque quieras poner en la derecha
</div>

Imagen Ampliada colocando el cursor encima

Unknown Códigos, Post

Colocando el cursor sobre ella, se ampliara.
Para ello tendremos que poner el siguiente código y cambiar url de la imagen, esto lo realizaremos en la entrada y en vista HTML

<img src="URL de la imagen"onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;
" width="100" height="80" />

Colocando el cursor sobre ella, se ampliara.
Para ello tendremos que poner el siguiente código y cambiar url de la imagen, esto lo realizaremos en la entrada y en vista HTML

<img src="URL de la imagen"onmouseover="this.width=400;this.height=300;" onmouseout="this.width=100;this.height=80;
" width="100" height="80" />

Como Quitar Borde a las imagenes

Unknown Imagenes, Post, Tutoriales

Las plantillas de Blogger vienen con un borde incluido en las imágenes,
entra al blog en vista Diseño y vas a Html, con Ctrl F buscas este código y cambias el valor de "border" por 0,
Localizas en tu plantilla en modo Html, esta parte del código: