Usamos cookies propias y de terceros para ofrecer info personalizada según su navegación. Si continua navegando consideramos que acepta el uso de cookiesOKMás información

Como dividir footer o pie de página del Blog


En las plantillas tenemos la opción de elegir el footer, con una columna, dos o tres. 
Para ello iremos a Plantilla, Personalizar:


página del Blog


página del Blog



En el diseñador de Plantillas de Blogger
Diseño
Diseño de pie de página,
y elegimos el que queramos, una dos o tres columnas.

Pero en ocasiones tenemos plantillas en las cuales no hay ninguna, y como todo se puede arreglar, vamos a ver como solucionarlo.


Vamos a Edición HTML de la plantilla y buscamos  este  código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Lo reemplazamos por el siguiente código:


<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>


Vista previa y si todo esta bien, guardamos los cambios. 

Vamos a Diseño > Elementos de Página veremos las tres columnas
El 
32% , lo podremos modificar si queremos otras anchuras

Si la parte de las 3 columnas queda sin color de fondo podemos añadir la siguiente línea al CSS para darle color:


#footer-wrapper{background-color: #ffff66;/* color linea*/border: 1px solid #0000FF;/* color /fondo.*/}


Con esto ya tienes tu Footer dividido en 3 columnas para poder darle mayor utilidad.   ¿Tienes que dividir tu pie de página?



En las plantillas tenemos la opción de elegir el footer, con una columna, dos o tres. 
Para ello iremos a Plantilla, Personalizar:


página del Blog


página del Blog



En el diseñador de Plantillas de Blogger
Diseño
Diseño de pie de página,
y elegimos el que queramos, una dos o tres columnas.

Pero en ocasiones tenemos plantillas en las cuales no hay ninguna, y como todo se puede arreglar, vamos a ver como solucionarlo.


Vamos a Edición HTML de la plantilla y buscamos  este  código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Lo reemplazamos por el siguiente código:


<div id='footer-wrapper'>
<div id='footer-column-container'>
<div id='footer-column-left' style='float:left; width: 32%;margin: 2px;'>
<b:section class='footer-column' id='footer2' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-center' style='float:left; width: 32%;margin: 2px'>
<b:section class='footer-column' id='footer3' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div id='footer-column-right' style='float:right; width: 32%;'>
<b:section class='footer-column' id='footer4' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer-bottom'>
<b:section class='footer' id='footer-column-bottom' maxwidgets='5' showaddelement='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div></div>
<div style='clear:both;'/>


Vista previa y si todo esta bien, guardamos los cambios. 

Vamos a Diseño > Elementos de Página veremos las tres columnas
El 
32% , lo podremos modificar si queremos otras anchuras

Si la parte de las 3 columnas queda sin color de fondo podemos añadir la siguiente línea al CSS para darle color:


#footer-wrapper{background-color: #ffff66;/* color linea*/border: 1px solid #0000FF;/* color /fondo.*/}


Con esto ya tienes tu Footer dividido en 3 columnas para poder darle mayor utilidad.   ¿Tienes que dividir tu pie de página?


Tienda Online a cualquier hora y en cualquier lugar del mundo

Unknown

Tienda Online a cualquier hora y en cualquier lugar del mundo

Una tienda online, electrónica o virtual es un comercio que hace transacciones en un sitio de internet. Los propietarios de dichas tiendas ponen a disposición de los clientes, manuales características e imágenes de los productos, con el fin de que el comprador pueda satisfacer sus deseos, para finalmente comprarlos.

Tienda Online

Es un servicio que se puede hacer a cualquier hora y en cualquier lugar. Hay varias maneras de abonar los servicios o productos, con tarjeta de crédito, transferencia bancaria o paypal. Han experimentado un gran expansión ya que son muy cómodas y puedes visitar todas las que quieras y comparar sin moverte de casa. Llegan a todos los lugares del mundo, solo con una conexión y un ordenador.Si el producto que has comprado, te llega en mal estado o no es lo que esperabas, puedes hacer la devolución del producto.

Siempre que sea un producto físico, ya que las descargas digitales, no tienen devoluciones. Eso si las devoluciones siempre puede encarecer el producto. Por que si tienen que cruzar aduanas, el precio se incrementara. Para los empresarios ha significado un paso adelante, ya que les da la opción de tener una tienda que puede llegar muy lejos con una inversión con un pequeño coste. Hay que buscar tienda online seguras, por aquello de las amenazas a la privacidad, no hay que proporcionar datos personales si no es una conexión segura, esto es muy importante.

Desde los años 90 el comercio electrónico va en alza. Actualmente casi todas las empresas, disponen de una tienda, que aveces da mejores precios que las tiendas físicas. Existen también muchas plataformas, en las que solo se necesita introducir los productos y rápidamente están en la web. He utilizado prestashop y desde luego tiene mucho potencial, solo configurando bien puedes ponerla en marcha rapidamente, con unos resultados muy interesantes.

Hay otras como magneto que también, aunque no la he utilizado. Montones de tiendas que venden artesania y solo con registrarse se puede poner en marcha.
Espero haber dado respuesta  a tu pregunta.
¿Y tu, tienes una tienda online? ¿Que opinas?


Tienda Online a cualquier hora y en cualquier lugar del mundo

Una tienda online, electrónica o virtual es un comercio que hace transacciones en un sitio de internet. Los propietarios de dichas tiendas ponen a disposición de los clientes, manuales características e imágenes de los productos, con el fin de que el comprador pueda satisfacer sus deseos, para finalmente comprarlos.

Tienda Online

Es un servicio que se puede hacer a cualquier hora y en cualquier lugar. Hay varias maneras de abonar los servicios o productos, con tarjeta de crédito, transferencia bancaria o paypal. Han experimentado un gran expansión ya que son muy cómodas y puedes visitar todas las que quieras y comparar sin moverte de casa. Llegan a todos los lugares del mundo, solo con una conexión y un ordenador.Si el producto que has comprado, te llega en mal estado o no es lo que esperabas, puedes hacer la devolución del producto.

Siempre que sea un producto físico, ya que las descargas digitales, no tienen devoluciones. Eso si las devoluciones siempre puede encarecer el producto. Por que si tienen que cruzar aduanas, el precio se incrementara. Para los empresarios ha significado un paso adelante, ya que les da la opción de tener una tienda que puede llegar muy lejos con una inversión con un pequeño coste. Hay que buscar tienda online seguras, por aquello de las amenazas a la privacidad, no hay que proporcionar datos personales si no es una conexión segura, esto es muy importante.

Desde los años 90 el comercio electrónico va en alza. Actualmente casi todas las empresas, disponen de una tienda, que aveces da mejores precios que las tiendas físicas. Existen también muchas plataformas, en las que solo se necesita introducir los productos y rápidamente están en la web. He utilizado prestashop y desde luego tiene mucho potencial, solo configurando bien puedes ponerla en marcha rapidamente, con unos resultados muy interesantes.

Hay otras como magneto que también, aunque no la he utilizado. Montones de tiendas que venden artesania y solo con registrarse se puede poner en marcha.
Espero haber dado respuesta  a tu pregunta.
¿Y tu, tienes una tienda online? ¿Que opinas?


Blogger o Wordpress

¿Que plataforma te gusta más?

El otro os decía que  me pidieron que explicara para saber como instalar un servidor, y ya puestos me dije, porque no instalar un wordpress y así poder mirar las características que nos ofrece esta plataforma que tiene muchos amigos y también muchos detractores. Mi posición hasta ayer, era que quería tener un blog de blogger, ya que llevo muchos años manejando esta plataforma.

¿Blogger o Wordpress?

Pues bien resulta que estoy asombrada, de verdad, asombrada con todo lo que nos ofrece, llevo horas y horas, viendo de todo, por que eso si, tiene de todo y para todo. La verdad es que no me había dado nunca por explorar y veo que tiene un mundo de posibilidades para todo tipo de temas.

Empieza con los temas que puedes instalar y ya sigues con los plugins que son una verdadera pasada. Así que en los próximos días me voy a dedicar a profundizar en wordpress.

Y ahora, gran dilema, que elegir blogger o wordpress, esto es como todo, unos te hablan de las maravillas de cada una de las plataformas, si queréis saber mi opinión, de momento voy a seguir con blogger, sin perder de vista wordpress.

De momento ya he echo mis primeros pasos en wordpress, lo he instalado en el servidor y he exportado un blog, y ahora estoy en la fase de recomponerlo, cuando este mas organizado os dejare el enlace para que lo podáis ver.

Eso si, la opción de exportar de blogger no me ha funcionado, pero bueno le he buscado la vuelta y lo he conseguido. Si alguien esta interesado en saber los pasos que he dado para conseguirlo, mandarme un correo y haré un post en el que lo explicare, ya que aun buscándole la vuelta resulta muy sencillo.

Y bueno, los primeros pasos han sido ponerlo en español, buscar plugins, para una serie de cosas que queria que tuviera y es verdad, que me esta gustando mucho. Por que una vez que tengas todo lo que necesitas, ya solo te tienes que dedicar a escribir y nada mas.

¿Y tu has probado blogger o wordpress? ¿Con cual te quedas?

¿Que plataforma te gusta más?

El otro os decía que  me pidieron que explicara para saber como instalar un servidor, y ya puestos me dije, porque no instalar un wordpress y así poder mirar las características que nos ofrece esta plataforma que tiene muchos amigos y también muchos detractores. Mi posición hasta ayer, era que quería tener un blog de blogger, ya que llevo muchos años manejando esta plataforma.

¿Blogger o Wordpress?

Pues bien resulta que estoy asombrada, de verdad, asombrada con todo lo que nos ofrece, llevo horas y horas, viendo de todo, por que eso si, tiene de todo y para todo. La verdad es que no me había dado nunca por explorar y veo que tiene un mundo de posibilidades para todo tipo de temas.

Empieza con los temas que puedes instalar y ya sigues con los plugins que son una verdadera pasada. Así que en los próximos días me voy a dedicar a profundizar en wordpress.

Y ahora, gran dilema, que elegir blogger o wordpress, esto es como todo, unos te hablan de las maravillas de cada una de las plataformas, si queréis saber mi opinión, de momento voy a seguir con blogger, sin perder de vista wordpress.

De momento ya he echo mis primeros pasos en wordpress, lo he instalado en el servidor y he exportado un blog, y ahora estoy en la fase de recomponerlo, cuando este mas organizado os dejare el enlace para que lo podáis ver.

Eso si, la opción de exportar de blogger no me ha funcionado, pero bueno le he buscado la vuelta y lo he conseguido. Si alguien esta interesado en saber los pasos que he dado para conseguirlo, mandarme un correo y haré un post en el que lo explicare, ya que aun buscándole la vuelta resulta muy sencillo.

Y bueno, los primeros pasos han sido ponerlo en español, buscar plugins, para una serie de cosas que queria que tuviera y es verdad, que me esta gustando mucho. Por que una vez que tengas todo lo que necesitas, ya solo te tienes que dedicar a escribir y nada mas.

¿Y tu has probado blogger o wordpress? ¿Con cual te quedas?

Leer más automático menos en la primera entrada del blog

Unknown
Leer mas Automático Menos en La Primera Entrada del Blog



Vamos a   utilizar esa entrada Para El leer más en todos los post menos en la primera que se vera Entera.
Asi que despúes de realizar Los Pasos mencionados en La Entrada, añadiremos lo siguiente:
Buscaremos:

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

 Aquí y cambiaremos el Código anterior porción este:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'> <data:post.title/> </ a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'> <data:post.title/> </ a>
<b:else/>
<data:post.title/>
</ B: if>
</ B: if>
</ H3>
</ B: if>
<div class='post-body entry-content'>
<p> <data:post.body/> </ p>
</ Div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'> <data:post.author/> </ span>
</ B: if>
</ Span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'> <tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/> </ span> </ td>
<td> <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/> </ td>
</ Tr> </ table>
</ B: if>
</ Span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </ b: if> </ a>
</ B: if>
</ B: if>
</ B: if>
</ Span>
<span class='post-icons'>
<-! De de Publicar enlaces de Correo electronico ->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</ A>
</ Span>
</ B: if>
</ Span>
</ Div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/> </ a> <b: si'datos: label.isLast = "true"' = cond>, </ b: if>
</ B: loop>
</ B: if>
</ Span>
</ Div>
</ Div>
</ Div>
<b:else/>
<b:include data='post' name='post'/>
</ B: if>
<b:else/>
<b:include data='post' name='post'/>
</ B: if>

Tendremos esto Con el leer más aire miniaturas automáticas Menos en La Primera Entrada de la Página Principal.

Espero Que lo consigas Y me lo cuentes ...
Leer mas Automático Menos en La Primera Entrada del Blog



Vamos a   utilizar esa entrada Para El leer más en todos los post menos en la primera que se vera Entera.
Asi que despúes de realizar Los Pasos mencionados en La Entrada, añadiremos lo siguiente:
Buscaremos:

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

 Aquí y cambiaremos el Código anterior porción este:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='post hentry'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'> <data:post.title/> </ a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'> <data:post.title/> </ a>
<b:else/>
<data:post.title/>
</ B: if>
</ B: if>
</ H3>
</ B: if>
<div class='post-body entry-content'>
<p> <data:post.body/> </ p>
</ Div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'> <data:post.author/> </ span>
</ B: if>
</ Span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'> <tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/> </ span> </ td>
<td> <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/> </ td>
</ Tr> </ table>
</ B: if>
</ Span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 1'> 1 <data:top.commentLabel/> <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </ b: if> </ a>
</ B: if>
</ B: if>
</ B: if>
</ Span>
<span class='post-icons'>
<-! De de Publicar enlaces de Correo electronico ->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</ A>
</ Span>
</ B: if>
</ Span>
</ Div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/> </ a> <b: si'datos: label.isLast = "true"' = cond>, </ b: if>
</ B: loop>
</ B: if>
</ Span>
</ Div>
</ Div>
</ Div>
<b:else/>
<b:include data='post' name='post'/>
</ B: if>
<b:else/>
<b:include data='post' name='post'/>
</ B: if>

Tendremos esto Con el leer más aire miniaturas automáticas Menos en La Primera Entrada de la Página Principal.

Espero Que lo consigas Y me lo cuentes ...

Personalizar los links entradas recientes...

Unknown
Vamos a explicar como Personalizar los links de entradas recientes, página principal, entradas antiguas,  tendremos que tener tres imágenes con los temas que nos gusten.
Las alojaremos para tener las URL.
link

Vamos a explicar como Personalizar los links de entradas recientes, página principal, entradas antiguas,  tendremos que tener tres imágenes con los temas que nos gusten.
Las alojaremos para tener las URL.
link

Fotos de antes y después que cambian con el ratón

Unknown
Si quisiéramos poner Fotos de antes y después que cambian con el ratón que seria muy interesante para ver un cambio, por ejemplo la decoración de una habitación, o simplemente cambiar de una foto a otra, como en el ejemplo que a continuación he puesto en este post.
Bastaría con poner el siguiente código,

<img src="UNO" onmouseover="this.src='DOS';" onmouseout="this.src='UNO';"/>


remplazando donde dice UNO por la URL de la imagen  uno y donde dice DOS por la URL de la imagen Dos.
Así que tendremos que tener nuestras imágenes alojadas en un servidor y tener la url de la imagen.
Sustituir el UNO por la Url de la imagen que queramos sea la primera. y
sustituir el DOS por la Url de la imagen  que se vea al poner el ratón encima.
Esto si queremos ponerlo en una entrada lo pondremos en HTML,  guardaremos y daremos en vista previa para ver los resultados.
Si nos interesa ponerlo en un gadget,
Añadiremos en vista Diseño un gadget y lo elegiremos en HTML/Javascript: y pegaremos el codigo con los cambios antes mencionados, pudiendo ponerlo donde nos interese..
Si quisiéramos poner Fotos de antes y después que cambian con el ratón que seria muy interesante para ver un cambio, por ejemplo la decoración de una habitación, o simplemente cambiar de una foto a otra, como en el ejemplo que a continuación he puesto en este post.
Bastaría con poner el siguiente código,

<img src="UNO" onmouseover="this.src='DOS';" onmouseout="this.src='UNO';"/>


remplazando donde dice UNO por la URL de la imagen  uno y donde dice DOS por la URL de la imagen Dos.
Así que tendremos que tener nuestras imágenes alojadas en un servidor y tener la url de la imagen.
Sustituir el UNO por la Url de la imagen que queramos sea la primera. y
sustituir el DOS por la Url de la imagen  que se vea al poner el ratón encima.
Esto si queremos ponerlo en una entrada lo pondremos en HTML,  guardaremos y daremos en vista previa para ver los resultados.
Si nos interesa ponerlo en un gadget,
Añadiremos en vista Diseño un gadget y lo elegiremos en HTML/Javascript: y pegaremos el codigo con los cambios antes mencionados, pudiendo ponerlo donde nos interese..

Como resaltar un texto dentro un post

Unknown

resaltar-texto
Para resaltar un texto dentro un post, insertaríamos un código en la entrada
 <table bgcolor="#bbf2ce"><tbody><tr><td><p align="justify"><strong>Con este texto, resaltariamos con un color verde </strong></p></td></tr></tbody></table> 
Y el resultado obtenido es este:

Con este texto, resaltariamos con un color verde


Con este texto, resaltariamos con un color verde 

bgcolor.. donde podrás poner el color que más vaya con tu blog.

resaltar-texto
Para resaltar un texto dentro un post, insertaríamos un código en la entrada
 <table bgcolor="#bbf2ce"><tbody><tr><td><p align="justify"><strong>Con este texto, resaltariamos con un color verde </strong></p></td></tr></tbody></table> 
Y el resultado obtenido es este:

Con este texto, resaltariamos con un color verde


Con este texto, resaltariamos con un color verde 

bgcolor.. donde podrás poner el color que más vaya con tu blog.

Blind text generator texto de relleno

Unknown
Cuando queremos probar un post para ver como queda y necesitamos texto, es incomodo tener que empezar a buscar texto de relleno, para simular.


 En esta página nos solucionan este problema en un segundo, solo tendremos que mirar y elegir lo que queramos respecto a texto todo seguido o por párrafos, caracteres o densidad de texto, solamente copiar y pegar. Inmediatamente tendremos el resultado. La página es
Blind text generator.

Ya sabes, si quieres comentar...  y si te gusto compártelo...
Cuando queremos probar un post para ver como queda y necesitamos texto, es incomodo tener que empezar a buscar texto de relleno, para simular.


 En esta página nos solucionan este problema en un segundo, solo tendremos que mirar y elegir lo que queramos respecto a texto todo seguido o por párrafos, caracteres o densidad de texto, solamente copiar y pegar. Inmediatamente tendremos el resultado. La página es
Blind text generator.

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

Elegir cuántas entradas mostrar en las páginas de Etiquetas

Unknown
Podemos Elegir cuántas entradas mostrar en las páginas de Etiquetas. 
elegir-cuantas-entradas-mostrar-en-etiquetas

Para ello, iremos a Edición HTML de la plantilla, buscamos:
'data:label.url'
Con mucho cuidado cámbialo por esto:
'data:label.url + "?max-results=6"'

Si este código se repite, lo haremos en todos los que encontremos
 el número de entradas que quieras que aparezcan, esta resaltado en verde


Conseguiremos que el enlace de la etiqueta, o en el gadget de Etiquetas  cambie la URL para mostrar el número de entradas que hemos seleccionamos.


Si tuvieras un menú con las URLs de las etiquetas  añadiriamos un parámetro a esos enlaces, 
la URL de una etiqueta seria así:
http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta
Y se le añadiría lo de color verde:
http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta?max-results=6
Podemos decidir cuántas entradas se mostrarán. Resaltado en verde.
Así elegiremos cuántas entradas mostrar en las páginas de Etiquetas.


Ya sabes, si quieres comentar...  y si te gusto compártelo...
Podemos Elegir cuántas entradas mostrar en las páginas de Etiquetas. 
elegir-cuantas-entradas-mostrar-en-etiquetas

Para ello, iremos a Edición HTML de la plantilla, buscamos:
'data:label.url'
Con mucho cuidado cámbialo por esto:
'data:label.url + "?max-results=6"'

Si este código se repite, lo haremos en todos los que encontremos
 el número de entradas que quieras que aparezcan, esta resaltado en verde


Conseguiremos que el enlace de la etiqueta, o en el gadget de Etiquetas  cambie la URL para mostrar el número de entradas que hemos seleccionamos.


Si tuvieras un menú con las URLs de las etiquetas  añadiriamos un parámetro a esos enlaces, 
la URL de una etiqueta seria así:
http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta
Y se le añadiría lo de color verde:
http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta?max-results=6
Podemos decidir cuántas entradas se mostrarán. Resaltado en verde.
Así elegiremos cuántas entradas mostrar en las páginas de Etiquetas.


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

Enmarcar titulo del Post

Unknown
Pondremos un recuadro enmarcando el titulo de nuestros post:

enmarcando-titulo-post












Entramos en Plantilla iremos a HTML y localizamos

/*Posts


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;


Quitaremos

color:$titlecolor;

Y pegamos el siguiente código:

background-color: #991188;


Si queremos centrar el título del post añadiremos:

text-align:center;

Podemos añadir también un borde pegando en el mismo sitio el siguiente código:

border: dotted #000000; 6px


Al final el código lo dejaríamos de la siguiente forma:


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
background-color: #991188;
text-align:center;
border: dotted #000000; 4px
}


Modificaremos el color de fondo (#991188;)
y el grosor del marco (line-height:1.4em;),
el tipo de borde (dotted),
también podríamos poner una imagen de fondo.

Ya sabes, si quieres comentar...  y si te gusto compártelo...
Pondremos un recuadro enmarcando el titulo de nuestros post:

enmarcando-titulo-post












Entramos en Plantilla iremos a HTML y localizamos

/*Posts


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;


Quitaremos

color:$titlecolor;

Y pegamos el siguiente código:

background-color: #991188;


Si queremos centrar el título del post añadiremos:

text-align:center;

Podemos añadir también un borde pegando en el mismo sitio el siguiente código:

border: dotted #000000; 6px


Al final el código lo dejaríamos de la siguiente forma:


.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
background-color: #991188;
text-align:center;
border: dotted #000000; 4px
}


Modificaremos el color de fondo (#991188;)
y el grosor del marco (line-height:1.4em;),
el tipo de borde (dotted),
también podríamos poner una imagen de fondo.

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

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. 


plantilla-entrada

Para acceder a ella tendremos que ir a:
  1. 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.
  2. 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. 
  3. 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. 


plantilla-entrada

Para acceder a ella tendremos que ir a:
  1. 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.
  2. 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. 
  3. 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

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.

codigos

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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</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 == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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.

codigos

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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</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 == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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...

Como poner un cuadro de texto en los Post

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.
codigo


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.
codigo


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

expandir-titulos-post-etiquetas
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'><!-- posts --><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 != &quot;item&quot;'><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='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' 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;'/> <!-- clear for photos floats --></div></div></b:includable><b:includable id='main' var='top'><!-- posts --><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 != &quot;item&quot;'><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

expandir-titulos-post-etiquetas
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'><!-- posts --><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 != &quot;item&quot;'><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='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' 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;'/> <!-- clear for photos floats --></div></div></b:includable><b:includable id='main' var='top'><!-- posts --><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 != &quot;item&quot;'><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

seguirleyendo
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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</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 == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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


seguirleyendo
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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</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 == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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


[+/-] Texto oculto con enlace para visualizarlo

Unknown
codigo



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>



codigo



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
Codigo

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
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
Codigo

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
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

Imagen Ampliada colocando el cursor encima

Unknown
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" />



impresora



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" />



impresora



Como Quitar Borde a las imagenes

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:

.post img {padding:4px;border:1px solid $bordercolor;}










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:

.post img {padding:4px;border:1px solid $bordercolor;}










Poner el color en las entrada o una imagen de fondo

codigos

plantilla-blog


















Si solo quieres poner color en una entrada,puedes utilizar este codigo:
Para poner el color en las entradas

<div style="background:#FFCC99; padding: 20px;"></div>
Para poner la foto de fondo

<div style="background-image:url(URL de la imagen); padding:50px;">Texto de la entrada</div>

Deberás ponerlo en HTML.














codigos

plantilla-blog


















Si solo quieres poner color en una entrada,puedes utilizar este codigo:
Para poner el color en las entradas

<div style="background:#FFCC99; padding: 20px;"></div>
Para poner la foto de fondo

<div style="background-image:url(URL de la imagen); padding:50px;">Texto de la entrada</div>

Deberás ponerlo en HTML.