Como mostrar las últimas entradas de una categoría especifica en la barra lateral

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Mostrar las últimas entradas de una etiqueta específica en la barra lateral

Ya hemos visto la forma de instalar un widget para mostrar, de forma aleatoria, las últimas entradas en el blog.

Siempre viene bien informar a los lectores de un blog acerca de las novedades que han sido incluidas o los últimos artículos añadidos y, por ello, he dado con un procedimiento muy sencillo para mostrar las últimas entradas o los últimos artículos de una etiqueta (categoría / tema) específico.

Básicamente utilizaremos el gadget "Feed" que ofrece blogger y, por medio de una dirección que apunta al feed de una etiqueta cualquiera, haremos visible los últimos títulos en el blog.

Diseño>añadir gadget (elemento de página)>html-javascript

Utiliza esta URL del feed:

http://elbalcondejaime.blogspot.com/feeds/posts/default/-/Widget%20%2F%20Gadget

En donde debes reemplazar elbalcondejaime por el nombre de tu blog, así como Widget%20%2F%20Gadget por la etiqueta escogida.

Importante: Si la etiqueta escogida está formada por una única palabra, por ejemplo "Fotos" no tendrás problema alguno y bastará con seguir los pasos.

Si por el contrario, la etiqueta escogida está formada por más de una palabra y por tanto, contiene espacios (como es el caso de Widget%20%2F%20Gadget, la etiqueta escogida por mí y que viene a ser: Widget / Gadget), deberás hacer lo siguiente:

1) Localiza una entrada agrupada en esa etiqueta.

2) Ya sea en el pie del post o bajo el título del artículo, localiza el enlace a la etiqueta y, con el botón derecho sobre él, selecciona: copiar la dirección del enlace...




Seguidamente obtendrás una línea similar a esta:

http://elbalcondejaime.blogspot.com/search/label/Widget%20%2F%20Gadget

Con los carácteres %20 que ves en naranja (representan espacios).

Tan solo debes copiar la etiqueta que aparece después de label/ y pegarla en la línea que cité al principio de la entrada.

Haz clic en continuar, una vez tengas todo listo y guarda el gadget para terminar.

Read More

Como dividir tus entradas en dos columnas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Divide tus entradas en dos columnas

Esta es una curiosa forma de cambiar la estructura de las entradas que publicas en tu bitácora. El truco es muy sencillo de realizar y requiere muy poco tiempo.

Se trata de un diseño muy utilizado en los periódicos y las revistas y que a muchos lectores les facilita la lectura de un artículo.

A continuación te muestro el código necesario para conseguir el truco. Puedes ponerlo en una entrada cualquiera, en un artículo que ya hayas escrito (recomiendo que escribas antes la entrada y que después la dividas entre ambas columnas ya que si la escribes directamente en el código podría haber un desnivel).

<div style="float:left; width: 50%">TEXTO IZQUIERDA</div><div style="float:right; width: 50%">TEXTO DERECHA</div>
<div style="clear: both"></div>

No olvides que al poner un código en una entrada, debes hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



Incluye la mitad de tu entrada en donde dice 'TEXTO IZQUIERDA' y la otra mitad en 'TEXTO DERECHA' (borrando estas frases antes).

Publica la entrada y listo.

Notas:

- Si se da el caso de que una columna aparece más alta que la otra, vuelve a incluir el código. No puede haber espacio entre el cierre </div> de la primera columna y el <div... de la segunda.

- Puedes modificar el ancho de las columnas modificando el porcentaje (50%) en el código.

- Como se hace muy pesado tener que estar copiando el código de esta entrada cada vez que desees dividir tus posts, haz uso de la la plantilla de entrada que nos ofrece blogger.

Read More

Como instalar las últimas entradas o minigalerías en blogger

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Ultimas entradas con miniatura de imagen

Hace unos días publiqué un procedimiento que nos permite mostrar las últimas entradas publicadas en el blog con una pequeña imagen representativa siempre que el artículo la incluya en su interior, así como un breve resumen del mismo.

Para conseguirlo, hacemos uso del gadget "Lista de Blogs" que ofrece blogger. Aunque muchos lectores obtuvieron un resultado exquisito, he querido darte a conocer esta otra forma de conseguir lo mismo.

Utilizaremos un elemento html-javascript e incluiremos un script en su interior. Puedes ver el resultado en la siguiente imagen:

Diseño>añadir gadget (elemento de página)>Lista de Blogs

Pega lo siguiente:

<script language="JavaScript">
blimagen = new Array();

blimagen[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";
blimagen[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsA-4BdfrqLKowQFpd9rFThDBnT8W3fHaQrMJRlwHV9pxYTaP1gBLYx49lXbzm01ALWMvkQhyphenhyphenjT772CmMpf564ifvMyYozfURLuta54yiTjMw7U6Z2q6R_FUMIeueGLaJLZ4k9qGw0D8Q/s320/blnoimg1.png";

blanchobloque = 210;
blcnaleat1 = true;
blmargen = 9;
blcolorbord = "#ffffff";
blcnfond = "#ffffff";
blimmanch = 50;
blimmalt = 50;

bltamanotexto = 12;
blcolorenlace = "#333333";
blstiil = true;
icon = " ";

blcomentt = "comentarios";
showblcne = false;
blcntamanoresumen2 = 90;
blcntamanoresumen = 11;
blcolorTextoResumn = "#666";
icon2 = " ";

blnumeroEntradasMostrar = 4;
blcnTuBlog = "http://elbalcondejaime.blogspot.com/";

</script>
<script src="https://sites.google.com/site/scriptsbalcon/b/blcnposts.js" type="text/javascript"></script>

Ahora tan solo debes reemplazar la dirección de mi blog por la de tu bitácora (se indica en color rojo).

Para cambiar el aspecto del widget, atiende a estas indicaciones:

blanchobloque = 210; Aumenta o disminuye la cifra (210) para editar el ancho del bloque general que muestra la lista de entradas recientes.

blcolorbord = "#ffffff"; Muestra un marco. Estará oculto si tu blog tiene el color blanco como fondo. Para cambiar el color del borde reemplaza #ffffff por cualquier otro código (usando la tabla de colores).

blnumeroEntradasMostrar = 4; La cifra 4 especifica el número total de entradas a mostrar en la lista.

blimmanch = 50; Aumenta o disminuye la cifra (50) para editar el ancho de la imagen en miniatura.

blimmalt = 50; Aumenta o disminuye la cifra (50) para editar el alto de la imagen en miniatura.

blcntamanoresumen2 = 90; Edita la cifra (90) para modificar la longitud de los resúmenes en cada entrada.

blcntamanoresumen = 11; Aumenta o disminuye la cifra (11) para editar el tamaño del texto del resumen.

blcolorTextoResumn = "#333333"; Reemplaza #333333 por el código de tu color favorito para editar el color del texto del resumen (utiliza la tabla de colores).

En breve ampliaré la entrada para darte a conocer el mismo gadget pero de apariencia distinta.

Read More

Inserta una imagen o iconos en todas tus entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Una imagen o icono en todas tus entradas

Mostrar un logotipo o una imagen en el cuerpo de todas tus entradas de forma automática puede ser de mucha utilidad según el diseño que tengas en tu blog.

A pesar de haber explicado con anterioridad el procedimiento para incluir una imagen en una entrada del blog, considero que resultará mucho más cómodo para ti poder hacer visible esta imagen fija aplicando el código una sola vez.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta <data:post.body/> en tu plantilla y justo al lado añade lo siguiente (a excepción de la etiqueta resaltada en verde):

<img src='URL IMAGEN' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/><data:post.body/>

Reemplaza URL IMAGEN por la dirección de la imagen y listo. Ésta se mostrará en la esquina superior izquierda del artículo. Para cambiar su posición utiliza estas alternativas:

- Imagen en la esquina superior derecha

<img src='URL IMAGEN' style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/><data:post.body/>

- Imagen en la esquina inferior izquierda

En este caso, añade el código a continuación de la etiqueta resaltada en verde:

<data:post.body/><img src='URL IMAGEN' style='float:left;height:80px;margin-bottom:10px;margin-right:10px;margin-top:6px;width:80px;'/>

- Imagen en la esquina inferior derecha

Sigue el mismo procedimiento citado en el punto anterior pero utiliza esto otro:

<data:post.body/><img src='URL IMAGEN' style='float:right;height:80px;margin-bottom:10px;margin-left:10px;margin-top:6px;width:80px;'/>

Pulsa el botón Guardar plantilla para terminar.

Read More

Como poner el fondo de las entradas transparentes

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Fondo de las entradas transparente, Opacidad en los posts de tu blog

Con unas pocas líneas de código podemos hacer que el fondo de nuestras entradas sea parcialmente translúcido de manera que pueda transparentarse la imagen de fondo que tenemos en el blog.

El grado de opacidad puede editarse por lo que cada valor ofrecerá una visión distinta del fondo en los posts.

Accede a este blog de pruebas para comprobar el resultado.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y justo encima añade este bloque de CSS:

.post {
color:#000000;
padding:4px 18px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}

Edita el valor 8 resaltado en color verde por una cifra superior o inferior para añadir menos o más opacidad -respectivamente- a las entradas. Ten en cuenta que no debes incluir un valor que sobrepase el 9 o que sea inferior al 1.

Para añadir una imagen o un color de fondo al post, utiliza el atributo background bajo .post { tal y como se muestra a continuación:

.post {
background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 transparent;

Reemplaza URL DE LA IMAGEN por la dirección de la imagen.

Utiliza esta otra línea en caso de querer el fondo en color:

background:#cccccc;

#cccccc es el código del color escogido. Edítalo a tu gusto accediendo a la tabla de colores.

Guarda la plantilla y comprueba el resultado en varios navegadores para asegurarte que la opacidad se aprecia bien.

Read More

El título "Publicado por..."debajo de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Mostrar la línea 'Publicado por...' bajo el título de las entradas

Hay plantillas a las que les favorece, por motivos de estética, tener la línea de 'Publicado por...' y el nombre del autor de cada entrada bajo el título de ésta. Conseguirlo es muy fácil y en unos minutos lo habrás aplicado a tu blog.

Diseño>Edición de HTML>expandimos artilugios

Busca este bloque en tu plantilla y elimínalo:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Seguidamente, encuentra esta línea:

<div class="post-header-line-1">

Justo a continuación (debajo) añade lo siguiente (se trata del bloque anteriormente eliminado):

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Con esto habrás cambiado la posición de la línea 'Publicado por...'. Ya no aparecerá en el pie de tus entradas sino que lo hará bajo el título.

Sáltate el primer paso si te gustaría conservar el 'Publicado por...' también en el pie de los posts.

¿Cómo puedo incluir una imagen o icono justo antes de la línea?


Tan solo tienes que utilizar este otro bloque en lugar del anterior:

<img src="URL IMAGEN"/><span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Reemplaza URL IMAGEN por la dirección del icono o la imagen a mostrar.

Guarda la plantilla para terminar.

Read More

Promociona las entradas de tu blog

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Promocionar las entradas del blog es de suma importancia si queremos darlo a conocer a más gente, pero de igual forma es de suma importancia ofrecerle a los lectores las herramientas para que puedan hacerlo de una forma sencilla.

Un recurso muy útil es colocar un área donde los lectores puedan copiar la URL de las entradas que quieren compartir, ya sea que copien la URL de la entrada, el código HTML que enlaza a ella, o el código para colocar el enlace de la entrada en un foro.

El resultado será un área como esta debajo de todas las entradas del blog que al hacer click en el área de texto se seleccionará el enlace (este ejemplo no, es sólo una imagen):

Para agregarlo a tu blog entra en Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta etiqueta:

<data:post.body/>

O si usas el Leer más automático busca este código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
< b:if cond='data:blog.pageType != &quot;static_page&quot;'>
< div style='text-align:justify;' 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>

Justo debajo de cualquiera de esos dos agrega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
< div class='compartir-post'>
< p>Si has encontrado útil este artículo puedes compartirlo desde tu blog, página Web o foro.</p>
< p>&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;</p><p>&lt;label for=&quot;aa-forum&quot;&gt;Link HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;</p><p>
& lt;label for=&quot;aa-forum&quot;&gt;Link para foros:&lt;/label&gt;&lt;br /&gt;
& lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]<data:post.title/>[/url]&quot; /&gt;</p>
< /div>
< /b:if>

Ahora agrega antes de ]]></b:skin> esto:

/* Compartir entradas
----------------------------------------------- */
.compartir-post {
background:#EFF5FB; /* Color de fondo del contenedor */
margin-top:30px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
.compartir-post p {
font-size:12px; /* Tamaño de texto del mensaje */
}
.compartir-post input {
background:#ffffff;
border: 1px solid #A4A4A4; /* Borde de las celdas */
}

Guarda los cambios y listo. El resultado sólo aparecerá en las entradas individuales así que para verlo debes entrar a un post para cerciorarte que ha funcionado.

Por supuesto que a la caja para compartir le podemos cambiar el estilo, ya sea el color de fondo, agregar una imagen de fondo, tamaño de la letra, etc. Esas partes se modifican en las áreas que he puesto en color verde.

El contenedor como tal no tiene un tamaño específico pues se ajusta al ancho de las entradas, sin embargo, el ancho de las celdas donde aparecen los enlaces puede ajustarse modificando los números del primer código que insertamos y que están en color rojo.

Con esto hasta los lectores más novatos sabrán cuál es la URL de la entrada que les ha gustado y tendrán una forma más sencilla de poder copiar el enlace para compartirlo donde deseen.

Read More

Icono en los títulos de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Imagen o icono a la derecha de los títulos de las entradas

Los títulos de las entradas en blogger pueden modificarse de muchas formas, y una de ellas es agregándoles una imagen o icono a su derecha.

Aunque también puede hacerse por medio de unas líneas de CSS, explicaré el procedimiento para realizar el truco en HTML (lo que tiene ventajas... Podremos añadir una imagen de fondo y un icono distinto a la derecha).

Diseño>Edición de HTML>expandimos artilugios

Busca este bloque de código:

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

Y añade la línea que aparece resaltada en verde a continuación:

<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'>
<img style="margin-right:4px;" src= "URL DEL ICONO"/><a expr:href='data:post.url'><data:post.title/></a>

<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

Reemplaza URL DEL ICONO por la dirección de tu imagen o icono ^[+].

Haz vista previa para ver el resultado y guarda la plantilla para terminar.

Read More

Cómo cambiar de lugar los datos del post-footer o pie de entrada

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Las plantillas por lo general tienen los datos del post-footer justo ahí, en el post-footer, es decir, debajo de las entradas. Estos datos son las etiquetas, el autor, la hora, el número de comentarios, etc.

Muchos me preguntan cómo poner esos datos debajo del título de la entrada, así que vamos a ver cómo mover de lugar estos datos. Lo único que haremos es cortar y pegar; nada del otro mundo, un proceso que no nos deberá quitar mucho tiempo, sólo debemos tener cuidado de cortar el código correcto sin omitir o "comernos" algún caracter, de lo contrario aparecerán errores que no dejarán guardar la plantilla.

Primero entra en Diseño | Edición de HTML marca la casilla Expandir plantillas de artilugios y busca esta línea:

<div class='post-footer'>

Debajo de ella estarán los códigos que vamos a trasladar, te recomiendo que lo hagas uno por uno, y por cada movimiento que hagas le des Vista previa para verificar que lo has hecho correctamente.

En todos los casos vamos a cortar los siguientes códigos y pegarlos debajo de esta línea:

<div class='post-header-line-1'>

Ahora sí, vamos a cortar estos códigos y pegarlos debajo de la línea que acabamos de mencionar.


Para mover el Autor

<span class='post-author vcard'>
< b:if cond='data:top.showAuthor'>
< data:top.authorLabel/>
< span class='fn'><data:post.author/></span>
< /b:if>
< /span>

Para mover la Hora

<span class='post-timestamp'>
< b:if cond='data:top.showTimestamp'>
< data:top.timestampLabel/>
< b:if cond='data:post.url'>
< a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
< /b:if>
< /b:if>
< /span>

Para mover las Etiquetas

<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:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
< /b:loop>
< /b:if>
< /span>

Para mover el Link de comentarios

<span class='post-comment-link'>
< b:if cond='data:blog.pageType != &quot;item&quot;'>
< b:if cond='data:blog.pageType != &quot;static_page&quot;'>
< 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>

Para mover el icono de Envío de entradas

<!-- email post links -->
< 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='//www.blogger.com/img/icon18_email.gif' width='18'/>
< /a>
< /span>
< /b:if>

Para mover la opción de Enlaces a esta entrada

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</b:if>
</span>

En algunos casos es posible que estos datos queden muy pegados al cuerpo de la entrada, si es así entonces agrega debajo del último código que pegues esto:

<br />

O esto

<hr />

El primero es un salto de línea, el segundo es una línea que dividirá estos datos de la entrada.

También puedes poner un caracter especial que divida los datos entre cada uno tal como se ve en mi blog, para hacerlo sólo agrega después de cada código cualquier caracter que te guste, por ejemplo este |

O bien, puedes poner un icono delante de cada código, sólo agrega esto al inicio de cada código que agregues:

<img src='URL del icono' border='0' />

Si en lugar de mover los datos quisieras recuperar alguno que no tengas o que hayas eliminado anteriormente sólo agrega el código que le corresponde y listo.

También puedes darle un poco de estilo a estos datos como un color de fondo, un borde, etc.
Sólo pega antes de ]]></b:skin> esto:

.post-header-line-1 {
background:#F5F6CE;
border:1px solid #eee;
font-style:italic;
}

O si no ves ningún cambio entonces agrega esto:

.post-header {
background:#F5F6CE;
border:1px solid #eee;
font-style:italic;
}

Ahí puedes agregar todos los estilos que desees, la forma como lo personalices quedará a tu creatividad.

Read More

Cuando en el blog aparecen menos entradas de las configuradas ¿Qué hacer?

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Son muchos quienes por primera vez se topan con este conflicto, configuran su blog para mostrar equis número de entradas y de un momento a otro aparecen menos entradas en el blog de las que habían configurado.

No es algo nuevo ni se trata de un error de la plantilla o un problema de Blogger y aunque ya hace un tiempo habíamos tocado parte de ese tema me parece que es necesario explicar un poco más a detalle el porqué sucede esto debido al gran número de personas que preguntan muy a menudo por esta situación.

Es bien sabido por todos que desde siempre Google ha querido destacar por la rapidez en sus productos haciendo de este factor un distintivo de su marca. Blogger, al ser un producto de Google no se puede quedar atrás por lo tanto quiere que los blogs alojados en blogspot sean lo más rápido posibles en cargar, esto no por un capricho de ellos, sino porque está mas que visto que los usuarios preferimos los sitios que cargan más rápido a aquellos que nos quitan 3 minutos de nuestro "valioso tiempo" o que simplemente parece que nunca acabarán de cargar.

Es por ello que desde febrero del 2010 Blogger puso en marcha la autopaginación como una medida para controlar la velocidad de carga de los blogs. Esto es que, si un blog tarda mucho tiempo en cargar debido a la cantidad de contenido que posee, entonces, sin importar cuántas entradas hayas configurado, Blogger determinará de forma automática el número apropiado de entradas a mostrar tanto en la portada como en las páginas de etiquetas y archivos a fin de no hacer el blog tan lento.

Por lo tanto, si tenías configurado (por ejemplo) 10 entradas a mostrar entonces podría ser que sólo se muestren la mitad de ellas o menos.

No hay un truco o receta mágica para evitarlo, es una medida que tomó Blogger y que parece no haber marcha atrás. Sin embargo sí puedes hacer algo para reducir el tiempo de carga de tu blog y de esta forma quizá puedas ver un par de entradas más (no te obsesiones, no verás 50 entradas de nuevo).

Si la acción fue tomada por la velocidad de carga del blog entonces trabaja en reducirla:

• Quita los gadgets que no sean necesarios o que sean lentos en cargar
• Revisa si tienes algún script que alguna vez pusiste pero que dejaste de usar y olvidaste eliminar de la plantilla
• Reduce el número de imágenes que tengas tanto en las entradas como dentro de la plantilla, o bien, utiliza un editor que optimice las imágenes para hacerlas más ligeras.
• Muestra algunos gadgets sólo en las entradas, así evitarás que éstos tengan que cargar en la portada y archivo del blog

En resumen, imagina que en tu blog harás una venta de garage y todo lo que no uses o no sea necesario que se vaya para afuera, y lo que vayas a dejar que no ocupe tanto espacio. Más delante hablaremos un poco más sobre el tema de reducir la velocidad de carga del blog.

Seguro que muchos se quejan (y se seguirán quejando) por estas medidas pero piensa que tener un blog más rápido significa tener mayores probabilidades de tener más visitas en el blog pues los que antes abandonaban la página porque no cargaba ahora podrán quedarse en tu blog a navegar sin esperar mucho tiempo en ver el contenido de tu sitio.

Read More

Cómo instalar un contador de visitas para cada entrada

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

 Esta vez traigo un contador de post individual para cada entrada o post en Blogger.

Un truco similar fue hecho hace algun tiempo pero dejo de funcionar pero el contador que traigo hoy por ahora funciona muy bien y es proporcionado por la pagina Branica,claro que para que blogger lo aceptase tuve que hacerle unas pequeñas modificaciones.

El contador se ve de la siguiente manera

 

Pasos

1. Para añadir el contador vamos a Diseño,Edicion HTML,Expandir plantillas de artilugio y buscas la siguiente linea:

<div class='post-footer-line post-footer-line-3'/>

2. Abajo de la anterior linea pegamos el siguiente codigo y guardamos los cambios en la plantilla.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
< a class='counter' href='http://www.branica.com/hosting.html'>Visitas<img alt='click here' id='counter' src='http://counters.branica.com/?i=0&amp;amp;b=transparent.png'/></a>
< /b:if>

Nota: Los cambios se veran reflejado solo en las entradas o post de tu blog.

Read More

Cómo insertar entradas expandibles en tu blog +/-

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Entradas expandibles en tu blog [+/-]

Con este truco que te voy a enseñar, te será más cómodo encontrar lo que necesitas en un blog, además, es más cómodo de leer :-D (lo puedes comprobar poniendo "trucos" por ejemplo en mi buscador)

Los signos [+/-] son para expandir la entrada del post y poder verla y recogerla cuando quieras, lo bueno es que la podemos seguir viendo "entera" simplemente haciendo click en su título...

Diseño>edición HTML>expandimos artilugios

Busca el código </head> y a continuación añade este script:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>

<script src='http://sites.google.com/site/scriptsbalcon/b/blpostsexpandibles.txt' type='text/javascript'/>

Ahora tienes que pegar lo que te muestro en rojo:

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</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.pageType != "static_page"'>
<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>
<b:else/><b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

Guarda la plantilla una vez hayas terminado. Accede a una etiqueta concreta para comprobar que, los artículos agrupados en dicha categoría, se muestran 'en expandible'.

Read More

Cambia por iconos de navegación las leyendas "Entradas antiguas" y "Entradas recientes"...

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Iconos de navegación : sustituyendo: "entradas recientes" "página principal" "entradas antiguas"

En tu blog, cuando ves una entrada, te darás cuenta de que debajo de ella, sale lo siguiente:

*Entrada más recientes *Página principal *Entradas antiguas

Pero hay una manera de cambiar esas frases por iconos...

Diseño>edición HTML>expandimos artilugios

Busca esto:

<b:includable id='nextprev'>

Ahora busca la línea <b:includable id='nextprev'> y la línea que finaliza el bloque: </b:includable>

Borra todo ese bloque incluidas las líneas de <b:includable id='nextprev'> y </b:includable>

Pega esto en su lugar:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL FLECHA IZQUIERDA'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL FLECHA DERECHA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL IMAGEN DE INICIO'/></a>
</div>
<div class='clear'/>
</b:includable>

Ahora te toca rellenar con URL (direcciones) las tres líneas marcadas.

Si también quieres los iconos de navegación encima de las entradas, para mejorar la navegación de tus usuarios, busca esto y añades la línea que está en rojo:

<b:includable id='main' var='top'>
<div id='blog-posts'>
<b:include name='nextprev'/>

Por último, buscamos la etiqueta ]]></b:skin> y antes de ella le pegamos esto:

#blog-pager-older-link {
float: right;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

La función del bloque que hemos añadido ahora consiste en "recordar" dónde va cada icono, y así cuando cambiemos algo de los posts en la plantilla, no se descolocarán, si no lo haces tus iconos se acabarán juntando o descolocando.

Puedes encontrar muchos iconos de flechas en las siguientes páginas web...

Icon Finder

Icon let

Icon look

Nota:
Las páginas están en inglés, por lo que si deseas las flechas debes buscarlas así:

Left arrow: flecha izquierda
Right arrow: flecha derecha
Home: Inicio (la casita :-D)

Read More

Agregar una imagen antes del título de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Antes del titulo de las entradas... una imagen

Se trata de poner un icono o una pequeña imágen antes del título de una entrada. Hay dos procedimientos para colocar este pequeño icono, yo os lo explico ahora mismo:

Diseño>edición HTML>expandimos artilugios

Buscamos este código:

<h3 class='post-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>

Ahora añadimos esto justo después de <a expr:href='data:post.url'>

<img src= "URL DE LA IMAGEN"/>

Sustituye URL DE LA IMAGEN por la dirección de tu imagen.

La otra opción de hacerlo es esta:

Buscamos este código, (expandiendo artilugios) en el CSS de nuestra plantilla:

.post h3 {

Justo después le pegamos esto:

background: url(URL DE LA IMAGEN) no-repeat 0;
padding-left: 20px;

Si queremos cambiar algo, el padding-left nos dice la distancia que habrá del icono al texto, podremos cambiar su valor, según sea el tamaño de nuestro icono.

Debes sustituir URL DE LA IMAGEN por la dirección del icono o la imagen a mostrar.

Ya hemos terminado, podemos ver el resultado en la vista previa.

Read More

Cómo cambiar el título de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Cambiar el tamaño del titulo de las entradas.

Un truco muy bueno, que e logrado descubrir haciendo "experimentos" en mi blog de pruebas, se trata de agrandar el tamaño del texto en el título de nuestras entradas.

Plantilla-edición HTML- expandimos artilugios

Buscamos este trocito de código:

.post-title {

Y dentro de ese trocito de código buscamos esto: font-size: 155%; lo podemos cambiar al tamaño que deseemos.

Si queremos cambiar más cosas...

Justo debajo del código anterior está esto:

font-weight: bold; (el estilo del texto, que normalmente está en negrita)line-height: 1.1em; (el tamaño de la linea, es la altura)

En todos los códigos podemos hacer vista previa para ver el resultado.

Read More

Cómo insertar cajas de texto tuneadas y en movimiento

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Cajas de texto tuneadas, y en movimiento

Unas cajitas para tu blog, que puedes utilizar perfectamente en una entrada con solo pegar el código de la que prefieras...

EL TEXTO QUE QUIERAS!!

El código:

<br /><div align=center> <br /><br /><br /><br /><div style="SCROLLBAR-FACE-COLOR: #000000; BORDER-LEFT-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #333333; OVERFLOW: scroll; WIDTH: 259px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px dashed; BORDER-RIGHT-STYLE: ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BORDER-LEFT-STYLE: ridge; HEIGHT: 211px; BACKGROUND-COLOR: #000000; BORDER-RIGHT-COLOR: #ffffff" align=center> <br /><br /><br /><br /><p> AQUÍ TU TEXTO PARA LA CAJA! <p> </P></DIV></DIV>

Para escribir el texto en las cajitas estas, basta con hacer doble click sobre ellas y podrás escribirlo!!

El código:

<br /><div style="BORDER-RIGHT: #6666ff 3px dashed; BORDER-TOP: #000000 3px dashed; SCROLLBAR-FACE-COLOR: #00FF66; SCROLLBAR-HIGHLIGHT-COLOR: #cce9fd; OVERFLOW: scroll; BORDER-LEFT: #000000 3px dashed; WIDTH: 193px; SCROLLBAR-SHADOW-COLOR: #ffbbf1; SCROLLBAR-3DLIGHT-COLOR: #ddaaff; SCROLLBAR-ARROW-COLOR: #b444ff; BORDER-BOTTOM: #000000 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #333366; HEIGHT: 220px; BACKGROUND-COLOR: #99FF99" align=center> <br /><br /><br /><br /><br /><br /><br /><br /><p> <span style="color: rgb(204, 0, 0);">aquí el texto que quieras</span> </P></DIV><br /><br />

Read More

Inserta cajas de texto en las esquinas de tus entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Cajita de texto en las esquinas de tus posts

Un buen truco para tus posts...

Un truco bastante bueno, como puedes ver a la derecha del post, se trata de una cajita en la que podemos añadir cualquier indicación o texto que queramos en nuestro blog.

El código:
</span><br /><span style="float:right;width:130px;margin-top:5px;margin-left:5px;margin-right:5px;padding:10px;border:1px solid black;background:#CCCCCC;"><br />AQUI TU TEXTO </span>
Para cambiar el tamaño del texto: font-size:3px;

Read More

Cómo poner un marco al título de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Poner un marco al título de las entradas

Como ves en mi blog, los títulos de las entradas tienen un marco, si quieres saber como ponerlo, y como editarlo, atiende a los pasos a continuación...

Diseño>edición HTML>expandimos artilugios

Ahora debes buscar este trozo de CSS:

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

Una vez localizado, mira lo que te señalo en rojo, cámbialo y añade lo que no tengas...

.post h3 {
margin:.25em 0 0;
padding:5 5
5px;
font-size:140%;
text-align:
center;
text-transform:uppercase;
font-weight:bold;
border: 1px solid;
line-height:1.4em;
color:$titlecolor;}

En donde pone "border" podemos escoger el tamaño (está en 1px) pero debemos poner siempre los píxeles, es decir px. Donde pone "solid" en la línea de border, puedes poner otros estilos de marcos, como pueden ser...
Solid: Marco de línea recta, sólida.
dotted: Marco de puntos.
dashed: Marco de rayas.
double: Marco con doble línea sólida.

Read More

Cómo mostrar todas las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Mostrar todas las entradas del blog.

Si quieres tener un link que al hacer click en el, puedan ver todas las entradas que hay en tu blog solo tienes que copiar la línea de código...

El código:

<a href="http://elbalcondejaime.blogspot.com/search/label/?max-results=999">Mostrar todas las entradas</a>

Debes cambiar la dirección del balcón por la de tu blog.

Donde pone "Mostrar todas las entradas" puedes poner el título que quieras.

Si además quieres añadirle una imagen al enlace, hazlo con estas líneas...

<a href="http://elbalcondejaime.blogspot.com/search/label/?max-results=999"><img src="URL DE TU IMAGEN"/>Mostrar todas las entradas</a>

Debes cambiar la dirección del balcón por la de tu blog. Donde pone "Mostrar todas las entradas" puedes poner el título que quieras.

Donde pone "URL DE TU IMAGEN" pon la dirección (URL) de tu icono o imagen.

Puedes ver el resultado aquí:

Mostrar todas las entradas

Read More

Cómo añadir fondo y marco de color a un párrafo

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en trucos blogger. ! Ve la entrada en su blog original.

Añadiendo marco y fondo en color a los párrafos

Te voy a enseñar algo fascinante, algo que es muy sencillo y a su vez muy emocionante... con sólo unos poquitos pasos puedes hacer que tus párrafos queden como este que estás leyendo ahora, con un lindo fondo, un marco... en fín, ¡te quedará en una cajita! ;-)Para aprender a realizar el truquillo sigue los pasos...

Primero ve a una entrada en la que quieras aplicar el marco y el fondo.

Pegas este código en la entrada, pero en la parte de Edición de HTML, justo al lado de donde se escribe el título.

<p style="border: 2px solid #3e9efe; padding: 10px; background-color: rgb #80bfff; color: black; font-family: arial,helvetica; font-size: 14px; font-weight: bold;">AQUI VA EL TEXTO</p>

Puedes cambiarle los colores (están como en el cuadro que te mostré) y ponerle los que más te gusten, y también puedes cambiar el grosor del borde...

border: 2px solid #3e9efe; es la etiqueta del borde, en 2px puedes poner el grosor que quieras. En solid, puedes poner el estilo que desees (está en normal, sólido) por ejemplo: dashed, dotted... En #3e9efe pones el color que quieras para el borde (el que está puesto es azúl oscuro).

background-color: rgb #80bfff; de es la etiqueta del fondo, puedes cambiar el color de fondo borrando la línea: #80bfff y poniendo el color que quieras.

*Si no sabes de dónde conseguir el código de los colores, puedes conseguirlos en la tabla de colores.

Read More