Ocultar/Eliminar el mensaje "Mostrando entradas con la etiqueta..." para bloguer

 Página donde lo he encontrado:

http://www.ciudadblogger.com/2009/07/ocultareliminar-el-mensaje-mostrando.htmlde lo he encontrado publicado el 16 de julio de 2009 por El Potro

Parece que ya no publica en la actualidad pero tiene muy buenos tutoriales.     

Cuando se está buscando una entrada dentro del blog y usamos las etiquetas para localizarla, aparece un recuadro con el mensaje:
Mostrando entradas con la etiqueta XXXXX. Mostrar todas las entradas.



O bien, al hacer una búsqueda dentro del blog aparece el mensaje:
Ninguna entrada coincide con la consulta. Mostrar todas las entradas.



Para ocultar este mensaje hacemos lo siguiente:

Entra a Plantilla | Edición de HTML y antes de ]]></b:skin> pega esto:

.status-msg-wrap {visibility:hidden;display:none;}

Guarda los cambios y listo.


Para eliminar el mensaje:

Entra a Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca este código:

<b:include data='top' name='status-message'/>Elimínalo y guarda los cambios.

Con cualquiera de estos dos métodos, ese recuadro dejará de aparecer en nuestras búsquedas.

Read More

Volver al menú

------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------

Read More

Imagenes con recuadro alrededor

Cuadro relieve

Cuadro puntos

Cuadro negro

Cuadro estrecho

Otro cuadro

Cambiar color texto

Cambiar letra

texto con subrayado superior

Ejemplo de texto con doble subrayado

Cuando una prenda va cerrada mediante botones al conjunto de ojales y botones se les denomina botonadura
Una prenda puede llevar botonadura simple situada en el centro de la prenda con una sola fila de botones o botonadura doble situada a ambos lados de la línea de centro y con dos filas de botones.
Medida de cruce según prenda:
Camisas y vestidos: Cruce de 1 a 1'5 cm. Usado con más frecuencia 1'5 cm. Separación entre botones aprox. 8 cm. si la prenda es entallada conviene colocar uno en línea de pecho y otro en línea cintura para que no se abran
Chaquetas: Cruce de 1 a 2'5 cm. Más usado 2 cm. Separación entre botones aprox. 10 cm.
Abrigos: Cruce de 2 a 3 cm. Más usado 2'5 cm. Separación entre botones aprox. 12 cm. el primer botón se suele situar a 1 ó 1'5 cm. del borde de la prenda en el centro escote.
Serán verticales los ojales en camisas, vestidos, blusas... y horizontales en chaquetas, abrigos, puños, tirillas...

Read More

Leer más con imágenes en miniatura mejorado 


Anteriormente vimos cómo tener el Leer más con imágenes en miniatura que hace que todas las entradas tengan un resumen de forma automática, sin tener que estar ingresando códigos extra cada vez que redactamos una entrada.
Si bien ese script funciona muy bien muchos han sido quienes han preguntado si es posible mostrar una imagen aun cuando la entrada no la tenga; y si había alguna forma para que las imágenes en miniatura no quedaran fuera de proporción, pues usualmente no subimos imágenes perfectamente cuadradas sino más bien rectangulares y al mostrarse en miniatura se deformaban.


Bien, después de un par de horas de pelearme con la computadora pude hacerle tres mejoras al script de modo que si una entrada no tiene una imagen podrá mostrar una imagen predeterminada para ilustrar el resumen.
Luego, las imágenes en miniatura ya no perderán su proporción, por lo que una imagen rectangular podrá verse más pequeña pero igualmente rectangular.
Y además, las imágenes en miniatura tendrán un enlace a la entrada, así que podrás acceder al post completo desde el link de Leer más, o desde el título de la entrada, o bien, haciendo click en la imagen en miniatura.







El procedimiento es el mismo, primero entramos en Diseño | Edición de HTML, y busca esta línea:
<data:post.body/>Elimínala y en su lugar agrega esto:

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

NOTA: La etiqueta <data:post.body/> en la mayoría de las plantillas aparece 2 o 3 veces, regularmente se debe cambiar la segunda, en caso de que no obtuvieras los resultados esperados aplica los cambios en las demás hasta que des con la indicada.
Ahora antes de </head> pega 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/AVvXsEj_k5BK1LyuFs1B4_MW9OHV4FkbAbZ3pmc1IkrSgCx-ZzwkIZuyS31SzoKISkEwevX8w75Bapm8nI_rXta8bCaUyLnZ1444pJIYgXlHsjou0wIH2i6YIJkZ22DFNcjezJZ67uOEU2rHjmM/" 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>Guarda los cambios y listo. Ahora veamos las modificaciones que se le puede hacer para personalizarlo.


En el primer código que hemos agregado, he puesto en negrita los estilos para el resumen, ahí se puede cambiar el tamaño de la letra, la alineación del texto, y se le pueden agregar más estilos como el color de la letra, color de fondo, etc.
En donde dice Leer más puedes cambiarlo por otro texto o bien, por una imagen, si ese es el caso entonces elimina ese texto y en su lugar agrega esto cambiando la URL de la imagen donde se indica:
<img src="URL de la imagen" border="0" />
En el segundo código que hemos agregado veremos al inicio dos variables:
summary_txt = 410; indica el número de caracteres que tendrá el resumen.
img_thumb_width = 120; es el ancho que tendrán las imágenes en miniatura.

Un poco más abajo está una URL en color azul, esa es la imagen que se mostrará en el resumen cuando la entrada no tenga una imagen, y será esta:

Esa imagen la puedes cambiar por cualquier otra que elijas, sólo cambia la URL en color azul por la de la imagen que quieres.


Como has podido notar los códigos son bastantes similares al método anterior sólo que con unas pequeñas modificaciones que aunque parecen insignificantes mejoran por mucho la funcionalidad del script.

http://www.ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

Read More

Hacer un menu de imagenes

HACER UN MENÚ DE IMÁGENES CON EFECTO HOVER






Hola a todos :) ! El tutorial de hoy es un poquito largo pero el resultado es muy bonito, ideal para hacer algo distinto en el blog, espero les guste...
1. Diseñar las imágenes que vamos a utilizar:


Vamos a iniciar diseñando las imágenes que van a ser dos por cada botón y tienen que ser de distinto color para que se note el efecto hover al pasar el puntero del mouse sobre ellas.


Consejo: Utilizar una paleta de colores para que las imágenes combinen entre si

Donde encontrar iconos bonitos? Hace días encontré esta página preciosa, tiene unos iconos muy bonitos, aunque debes de tener Illustrator o Photoshop para poder usarlos: V E R P Á G I N A y para los que no utilicen estos programas les dejo esta página donde hay unos iconos preciosos V E R P Á G I N A
Donde encontrar paleta de colores?: Esta página la uso mucho y me encanta! V E R P Á G I N A








2. Obtener la url de las imágenes:

Alojar las imágenes en Dropbox o en los álbumes de google, en mi caso yo siempre uso los álbumes de mi cuenta de google porque es muy sencillo y efectivo.

3. Ordenar etiquetas en blogger:
V E R TU T O R I A L


4. Modificar el código para crear el menú:

Copiar y pegar este código en un documento de texto (word) para poder editarlo
Cambiar los textos que están en colores por la URL de nuestras imagenes y la URL de la página a la que vamos a enlazar cada imagen.


<center>
<table cellpadding="12px" cellspacing="12px">
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
<td><a href="URL PÁGINA PARA ENLAZAR"><img height="90px" onmouseout="this.src='URL IMAGEN #1';" onmouseover="this.src='URL IMAGEN 2';" src=" URL IMAGEN #1" width="85px" /></a></td>
</table></center>



E L C Ó D I G O


<center> : Esto espara centrar las imágenes
<table cellpadding="12px" cellspacing="12px">: Esta parte es la que hace que nuestras imágenes se vean alineadas e indican el espacio de separacion de cada una, asi que puede variar el valor 12px a más o menos, todo depende de como nos guste.
URL página para enlazar: Acá debemos de colocar la URL de la página que queremos que nos lleve al darle clic a la imagen
URL imagen #1: Colocamos la URL de la imagen que queremos que aparezca de forma predeterminada
URL imagen #2: Colocamos la URL de la imagen que va a crear el efecto hover, entonces debe de ser la imagen que es de color diferente. Esto es que al pasar el cursor del mouse sobre la imagen se cambie a la imagen que esta de otro color.
height="90px: Indica la altura de cada imagen
width="85px: Indica el ancho de cada imagen
Onmouseout: Muestra la imagen #1 cuando el puntero del mouse esta fuera
Onmouseover: Muestra la imagen #2 cuando el puntero del mouse esta sobre la imagen #1

5. Donde colocar el menú?:

Este menú lo podemos colocar donde queramos, únicamente debemos de copiar y pegar todo el código en un gadget de HTML y listo.
Y este es el resultado final:
http://unblogbonitoparati.blogspot.com/2015/05/menu-blogger-imagenes-efecto-hover.html

Read More

Varios bloguer

Modificar secciones

Menús desplegables

Menú desplegable horizontal

Horizontal con despliegue vertical








Iconos sociales
https://prodpersonal.blogspot.com/2017/03/iconos-de-redes-sociales-fijos-en-el.html

Read More

Resumen entradas

Creando un resumen de entradas.

En la entrada "Resumen de entradas en Blogger: Dar estilo al enlace de salto de línea" se explica cómo mostrar un resumen de los artículos en la página principal del blog de forma manual, siendo necesario incluir en cada entrada un salto de línea.

En esta ocasión vamos a crear un resumen de entradas automático para la página Inicio del blog y ver cómo pueden configurarse sus distintos elementos.

1. CREAR UN RESUMEN DE ENTRADAS EN LA PÁGINA INICIO DEL BLOG DE FORMA AUTOMÁTICA


Vamos a Tema → Editar HTML

Una vez dentro de la ventana de edición, activamos el buscador con CTRL + F y escribimos </head>.

A continuación de esta etiqueta </head> añadimos el siguiente script,

 <!--SCRIPT PARA RESUMEN DE ENTRADAS EN LA PÁGINA INICIO -->
<script type='text/javascript'>
img_thumb_width = 150; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/
summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/
</script>
 <script type='text/javascript'>
 //<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

1.2. Añadir los condicionales.


Los condicionales los añadimos para que se ejecute el script con el resumen de entradas solo en la página principal del blog.

Localizamos en la plantilla la etiqueta <data:post.body/> (normalmente suele haber dos o tres).

Eliminamos la última etiqueta <data:post.body/> y en su lugar añadimos el siguiente código HTML,

<!-- si es una página estática se muestra el contenido de la entrada data:post.body -->
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>  <!-- si la condición no se cumple entonces se ejecutan las siguientes órdenes -->
<!-- si NO es una entrada individual "item" se ejecuta el script -->
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
</b:if>
 <!-- si es una entrada individual "item" muestra el contenido de la entrada data:post.body -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

Guardamos los cambios y visualizamos el blog.

El Resumen de Entradas incluye en primer lugar la fecha de publicación del blog y bajo ella, el título del post.

Si el artículo tiene una imagen destacada o Thumbnail, se mostrará a continuación del título y se situará a la izquierda del texto [float:left].

Muestra también el salto de línea "Leer más" que llevará al lector a la página correspondiente a esa entrada y por último se mostrará el pie de entrada o post-footer.


IMAGEN 1 - Resumen de Entradas Blogger


La primera entrada no tiene ninguna imagen por lo tanto el resumen de entradas solo muestra su fecha, título, fragmento resumido, "leer más" y post-footer.

La segunda entrada se muestra con una imagen destacada o Thumbnail. Si no la tiene, Blogger por defecto cogerá la primera de la publicacion.

Si el espacio ocupado por la imagen es inferior al espacio que ocupa el texto, el resultado sería el siguiente,



IMAGEN 2 - Resumen de Entradas Blogger




Ya hemos incluido un Resumen de Entradas pero es muy posible que necesitemos personalizarlo para adecuarlo a nuestras necesidades.

Vamos a ver diferentes supuestos.

2. Cómo se puede modificar el tamaño de las miniaturas o Thumbnails


Dentro del script, buscamos las siguientes líneas.


img_thumb_width = 150; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/



y modificamos los valores asignados para el ancho y alto.

En este caso he modificado ambos valores a 350.



IMAGEN 3 - Resumen de Entradas Blogger [Thumbnail configuración tamaño]




Si queremos que las imágenes ocupen el ancho total de la caja contenedora debemos modificar los valores a 100%. Si la imagen tuviera un ancho inferior al espacio de la caja contenedora se mostraría con sus dimensiones originales.


img_thumb_width = "100%"; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = "100%"; /*Alto imagen miniatura Thumbnail*/






3. Cómo se puede mostrar una imagen predeterminada para las entradas sin Thumbnails


Si queremos que las publicaciones que no tienen ninguna imagen o miniatura muestren una imagen predeterminada (será la misma para todas las entradas que cumplan esta condición) tenemos que añadir estas líneas al script.

Las pegaremos después de var summ = summary_noimg; y antes de if(img.length>=1) {


.....
var summ = summary_noimg; 
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 15px 10px 0px;"><img src="URL de la imagen" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_noimg;
}
 if(img.length>=1) {
...

4. Cómo se puede modificar la longitud del fragmento de texto


Dentro del script, buscamos las siguientes líneas.


summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/



Voy a modificar ambos valores.

Para las entradas que no tengan una miniatura o una imagen modifico el valor a 500.
[summary_noimg = 500]

Para las entradas que cuenten con Thumbnail o alguna imagen, el valor será de 5.
[summary_img = 5]




IMAGEN 4 - Resumen de Entradas Blogger [Texto configuración longitud]




En la primera entrada que tiene imagen se muestra la palabra "Internet" que tiene 8 caracteres. Aunque he establecido un valor de 5 se muestra una longitud superior porque no corta las palabras (tiene en cuenta los espacios).

Si pusiera un valor igual a 0 seguirá mostrando la palabra "Internet".




5. Cómo modificar el tipo de letra del fragmento de texto


Dentro del script busco la etiqueta <div>.


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



Y la sustituyo por una etiqueta <div style>.


var summary = imgtag + '<div style = "font-family:tahoma; font-size:18px; font-weight:600">' + removeHtmlTag(div.innerHTML,summ) + '</div>';



El texto se mostrará en fuente Tahoma, con tamaño de 18px y en negrilla.



IMAGEN 5 - Resumen de Entradas Blogger [Texto configuración formato Fuente]







6. Cómo posicionar el texto bajo la imagen o Thumbnail


Seguimos en el script y localizamos esta línea.


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



Igual que en el caso anterior modifico la etiqueta <div> por la marcada en negrilla.


var summary = imgtag + '<div class="summary" style="clear:both">' + removeHtmlTag(div.innerHTML,summ) + '</div>';



Ahora el fragmento de texto se muestra bajo la imagen.



IMAGEN 6 - Resumen de Entradas Blogger [Texto bajo la imagen o Thumbnail]


7. Cómo eliminar el fragmento de texto


Buscamos en el script la misma línea que en el apartado anterior.


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



En esta ocasión la reemplazo por una etiqueta <div style>


var summary = imgtag + '<div style = "display: none">' + removeHtmlTag(div.innerHTML,summ) + '</div>';



Ahora el resumen de entradas no muestra el texto.


IMAGEN 7 - Resumen de Entradas Blogger [Texto eliminado]


8. Cómo eliminar la miniatura o Thumbnail


Dentro del script, buscamos las líneas relativas a la imagen.


imgtag = '<span style="overflow:hidden; border: none; margin:0 15px 10px 0; float:left; max-height:'+img_thumb_height+'px;width:auto;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';



Modifico la etiqueta <span style> eliminando las propiedades marcadas en negrilla del cuadro superior y en su lugar incluyo [display:none].


imgtag = '<span style="display: none;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';



Ahora el resumen de entradas ya no muestra las imágenes.



IMAGEN 8 - Resumen de Entradas Blogger [Sin imágenes o Thumbnails]

9. Cómo eliminar el pie de página de cada publicación


Si queremos eliminar el post-footer o pie de página que muestra el autor de la publicación, los comentarios de los usuarios, los botones de redes sociales para compartir y las etiquetas, tenemos que localizar los condicionales que hemos añadido en el punto 2 e incluir las líneas en rojo.


<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.post-footer { display: none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

Como se puede ver en la siguiente imagen ya no es visible el pie de página.



IMAGEN 9 - Resumen de Entradas Blogger [Sin post-footer o pie de entrada]

10. Cómo eliminar la fecha de publicación de cada entrada


Si no queremos que en el resumen se muestre la fecha de publicación de las entradas tenemos que seguir trabajando con los condicionales del punto 2. Para este supuesto necesitamos incluir las líneas marcadas en rojo.


<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.date-header { display: none;}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>


La página principal del blog se verá así,



IMAGEN 10 - Resumen de Entradas Blogger [Sin fecha de publicación]


11. Cómo eliminar el título de cada entrada


Normalmente es necesario y útil mostrar el título de las publicaciones pero si decidimos eliminarlo haremos igual que en el punto anterior (eliminación de la fecha) añadiendo,


<style type='text/css'>
.post-title { display: none;}
</style>






12. Cómo aplicar formato al salto de línea "Leer más"


Continuando con las líneas correspondientes a los condicionales del punto 2, buscamos la etiqueta span del salto de línea.
<span class='jump-link'>.


<span class='jump-link' style='float:right;padding-top:10px;padding-right:50px;'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>



La propiedad float nos permite ajustar el texto "Leer más". Por el momento se posiciona a la derecha, con un padding superior de 10px y un padding derecho de 50px.


float:right (a la derecha)
padding-top:10px (relleno superior de 10px)
padding-right:50px (relleno derecho de 50px)



Podemos modificar su configuración y estilo añadiendo las propiedades que necesitemos para ajustar su formato al deseado.

Por ejemplo, vamos a posicionarlo a la izquierda, con un margen superior de 10px para separarlo del fragmento de texto, se aplica un padding de 5px para que el texto "Leer más" quede centrado, el fondo es amarillo con borde negro, la fuente del texto en verdana tamaño 15px y negrilla.

Eliminamos el texto en malva y lo sustituimos por el marcado en rojo.


<span class='jump-link' style='float:left;margin-top:10px;padding:5px;background:yellow;border:solid black;font-family:verdana; font-size:15px; font-weight:600'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></span>



Ahora vemos que ha cambiado el salto de página.



IMAGEN 11 - Resumen de Entradas Blogger [Formato salto de página]

Una vez comprobado cómo puede añadirse un resumen de entradas en la portada del blog y cómo pueden configurarse sus distintos elementos, vamos a ver un ejemplo.





Ejemplo de Resumen de Entradas [Fecha + Título + Fragmento Texto + Salto de Página]

En un gran número de blogs es frecuente encontrar en su portada un resumen de entradas que muestra la fecha de publicación, el título de la entrada, el fragmento de texto con un borde y el enlace para ver el contenido de la entrada.



IMAGEN 12 - Resumen de Entradas Blogger [Ejemplo]

Código del script

 <!--SCRIPT PARA RESUMEN DE ENTRADAS EN LA PÁGINA INICIO -->
<script type='text/javascript'>
img_thumb_width = 510; /*Ancho imagen miniatura Thumbnail */
img_thumb_height = 150; /*Alto imagen miniatura Thumbnail*/
summary_noimg = 400; /*Longitud del Resumen de Texto si no hay miniatura Thumbnail*/
summary_img = 300; /*Longitud del Resumen de Texto si hay miniatura Thumbnail*/
</script>
 <script type='text/javascript'>
 //<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="overflow:hidden; border: none; margin-bottom:25px; margin-top: -20px; float:left; max-height:'+img_thumb_height+'px;width:auto"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="auto"/></span>';
var summ = summary_img;
}
  var summary = imgtag + '<div class="summary" style="clear:both">' + '<div style = "font-family:arial; font-size:16px; font-weight:600; border: double lightgray; padding: 8px; margin-left:5px; margin-right:5px">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

HTML con los condicionales

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
 <span class='jump-link' style='float:left;margin-top:10px;margin-bottom:25px; padding:5px;background:linear-gradient(rgba(242,225,206, 0.5) 45%, dimgrey 95%, beige);border-radius:15px;
  border:4px ridge maroon;font-family:verdana; font-size:15px; font-weight:600'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></span>
<style type='text/css'>
.post-footer { display: none;}
</style>
</b:if>
 <b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if>
</b:if>

Como hemos podido comprobar, mostrar en la página principal del blog un resumen de las entradas en lugar de la publicación completa puede resultar muy interesante.

Es posible que no se ejecute correctamente el script, en este caso eliminamos la etiqueta <data:post.body/> anterior a la última y añadimos el código HTML del punto 2.


https://prodpersonal.blogspot.com/2018/02/resumen-de-entradas-en-la-portada-del.html

Read More

Sidebar

TÍTULO DE GADGET SIDEBAR CON LÍNEA SENCILLA ANTES Y DESPUÉS:

.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.sidebar h2:before {
font-size: 20px;
content: "\2014" "\00A0" ;
}

.sidebar h2:after {
font-size: 20px;
content: "\00A0" "\2014" ;
}

TÍTULO DE GADGET SIDEBAR CON LÍNEA TRIPLE ANTES Y DESPUÉS:

.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #666;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.sidebar h2:before {
font-size: 15px;
content: "\2261" "\00A0" ;

}

.sidebar h2:after {
font-size: 15px;
content: "\00A0" "\2261" ;
}






TÍTULO DE GADGET SIDEBAR CON LÍNEA DOBLE ANTES Y DESPUÉS:

.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #666; text-transform: uppercase; letter-spacing: 2px; text-align: center; padding-top: 5px; padding-bottom: 5px;}.sidebar h2:before { font-size: 15px; content: "\2550" "\00A0" ; } .sidebar h2:after { font-size: 15px; content: "\00A0" "\2550" ; }


TÍTULO DE GADGET SIDEBAR CON CUADRADO:

.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #666; text-transform: uppercase; letter-spacing: 3px; text-align: center; border:1px solid #8fb59e; padding: 15px; }
  

R E C U E R D A : si modificas los píxeles en la parte de "border" puedes conseguir líneas más gruesas.



TÍTULO DE GADGET SIDEBAR CON LÍNEA ARRIBA Y ABAJO:

.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #666; text-transform: uppercase; letter-spacing: 3px; text-align: center; border-top:2px solid #8fb59e; border-bottom:2px solid #8fb59e; padding: 10px; }

Voy a usar este modelo, que como sabéis hay que optimizar la imagen para que no tengamos que redimensionar las medidas, así que he modificado el tamaño para que me coincida con el de los títulos de la sidebar.

Pues allá vamos con el código:




.sidebar h2 {
font-family: 'Arial' !important;
font-size:12px !important;
color: #fff !important;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRPpivLsnDww0hUihfaBpQDmEWnBuYhgJNQ9APEIT46HVLpl9l15rFNV-0HXseQ6Pcpveb9UJzvtVZDPR8CABITxwInT8g9Jwl6D9Km5JecxYb63CJDXYe9ycMbZetgkzjIfG1PxAjbUr/s1600/10washitape-grande-miss-lavanda.png);
padding: 10px;
}






TÍTULO DE GADGET SIDEBAR CON FONDO DE COLOR CUADRADO:

.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #fff !important; text-transform: uppercase; letter-spacing: 3px; text-align: center; background: #8fb59e; padding: 10px; }







TÍTULO DE GADGET SIDEBAR CON FONDO DE COLOR REDONDEADO:

.sidebar h2 { font-family: 'Arial' !important; font-size:12px !important; color: #fff !important; text-transform: uppercase; letter-spacing: 3px; text-align: center; background: #8fb59e;border-radius: 50px; padding: 10px; }

TÍTULO DE GADGET SIDEBAR SOLO TEXTO:

.sidebar h2 {
font-size:20px !important; color: #8fb59e !important;
text-transform: uppercase; letter-spacing: 5px; text-align: center; padding: 10px; }



En este caso la tipografía es la que hemos elegido en nuestro editor de plantilla de blogger.


En este otro post te explico muchas más opciones de personalización pero si no quieres meterme mucho en código puedes usar estos que te he facilitado. Lo único que debes cambiar en aquel código que elijas es el color.

Para eso sabes que tienes que tener tu paleta de colores, de donde podrás escoger el color que más te guste para esta tarea de hoy.

https://www.bloggerpasoapaso.com/2016/06/personaliza-titulos-gadget-sidebar-juntos.html

Read More