Cómo expandir y contraer el contenido de entradas o gadgets

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

Expandir y contraer cosas en los posts o los gadgets con Scriptaculous

Previamente vimos como expandir o contraer el contenido de un gadget, pero no usabamos ningún efecto. Esta vez, usaremos un efecto deslizante, un efecto slide que podremos aplicar a un gadget o a parte de una entrada.

Antes de comenzar, debemos tener el código de Scriptaculous en la plantilla. Sólo es necesario incluirlo una vez, por lo que si ya lo aplicaste, podrás saltarte este paso.

1) Debes pegar este script antes de la etiqueta </head>

<!-- Script Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Script Prototype y Scriptaculous-->

Ahora guarda la plantilla.

2) Una vez tengas el script instalado, ya podrás aplicar el efecto a cualquier parte de tu blog, ya sea en una entrada o en un gadget.

Este es el código para usar el efecto deslizante con un enlace de texto:

<div style="margin-left: 30px;"><a style="color: #999999; " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento1','slide'); return false">TEXTO DEL ENLACE</a></div>
<div id="elemento1" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Y este es el resultado:

Ejemplo de texto con enlace ▼

¿Por qué se producen terremotos?

Los terremotos son producidos por cambios de posiciones de capas interiores de la Tierra y por su corrimiento.

El terremoto puede ampliarse, dependiendo de la profundidad en la cual el punto de temblor se encuentre.

Este es el código para usar el efecto deslizante con una imagen:

<div style="margin-left: 30px;"><span ><a style="color: rgb(153, 153, 153); " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento2','slide'); return false"><center><img src="URL DE TU IMAGEN"/></center></a></span></div><div id="elemento2" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Y este es el resultado:

La Ardilla
Sciurus culgaris

La ardilla se alimenta de semillas y frutas. Es muy común encontrarla en bosques de coníferas, buscando su golosina favorita: los piñones.

Tienen hábitos diurnos y alcanzan la edad de 3 años. Actualmente, debido a la contaminación del planeta, su media de vida es de 6 meses.

En ambos códigos deberás sustituir lo siguiente:


TEXTO DEL ENLACE por la frase o texto que actuará como enlace para desplegar el contenido.

CONTENIDO OCULTO por cualquier cosa que desees ocultar. Puede ser un código, un bloque de texto, una tabla, una imagen...

URL DE TU IMAGEN por la imagen que actuará como botón para desplegar el contenido.

Notas:

Si te fijas, en los códigos del paso dos aparece dos veces la palabra elemento X resaltada en naranja.

Si quieres añadir este efecto más de una vez, deberás cambiar la palabra elemento X por elemento 1 o elmento 2, siempre y cuando no lo hayas puesto antes en otro código.

Puedes cambiar el efecto deslizante por uno que "aparece" para ello utilizaremos la palabra appear, que incluiremos en lugar de slide.

Read More

Coloca un Cartel de avisos que cambia de colores al azar

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

Caja de texto o cartel de advertencia con fondo de color al azar

Hay varios trucos que nos ayudan a mostrar artilugios al azar o de forma aleatoria, desde imágenes hasta frases oentradas.

Pero esto es diferente. Se trata de una caja de texto con una particularidad muy especial: tiene un fondo de color verde, uno de color azul, otro de color lila... y los va mostrando de forma aleatoria, cada vez que se actualiza o se navega por el blog.

Se puede insertar tanto en una entrada cualquiera como en un elemento de página html-javascript.


 Ver ejemplo en funcionamiento

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

Pega este script:

<script type="text/javascript">
var coloresaleatorios=["#cc66ad", "#66c8cc", "#66CC66", "#ccb566", "#8066cc"]
var alazar_color=Math.floor(Math.random()*coloresaleatorios.length)
if (coloresaleatorios[alazar_color].indexOf(":")!=-1){
coloresorden="background-color: "+coloresaleatorios[alazar_color].split(":")[0]+";"
coloresorden+="color: "+coloresaleatorios[alazar_color].split(":")[1]+";"
}
else
coloresorden="background-color: "+coloresaleatorios[alazar_color]+";"
document.write('<style type="text/css">\n')
document.write('.coloralazarbalcn{'+coloresorden+'}\n')
if (coloresaleatorios[alazar_color].split(":").length==3)
document.write('.coloralazarbalcn a{color:'+coloresaleatorios[alazar_color].split(":")[2]+';}\n')
document.write('<\/style>')</script>

Lo que te muestro en color verde son los códigos de los colores de fondo.

Puedes sustituirlos por tus colores favoritos utilizando la tabla de colores.

Si deseas añadir más colores de fondo, utiliza "#66CC66" tantas veces como desees pero ten en cuenta que debes separarlo por comas.

1) Para poner la caja en un gadget o elemento de página de la barra lateral pega esta línea debajo del script anterior:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

2) Para poner la caja en una entrada, guarda el gadget en el que pegaste el script y utiliza esta línea en el post para mostrarla:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

El cartel tiene un fondo de color gris. Podrás editarlo conociendo cada atributo:

border: 2px solid #cccccc; 2px es el grosor del borde. Incrementa o disminuye el valor para modificarlo.

El estilo es solid (normal) pero puedes utilizar otros modelos como dashed (lineal) o dotted (punteado).

Por último, #cccccc que representa el color del borde. Cámbialo haciendo uso de la tabla de colores.

Eso es todo por ahora, si necesitas cualquier tipo de ayuda avísame.

Read More

Añade sombra a tus imágenes del 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 truvos blogger. ! Ve la entrada en su blog original.


Sombra en las imágenes de tu blog con CSS

Hace tiempo descubrimos un generador de sombras para las imágenes del blog, el cual era muy fácil de usar.

En esta entrada aprenderemos un truco aún más sencillo que puede instalarse en unos pocos segundos y nos ofrece la posibilidad de mostrar las imágenes del blog con una bonita sombra.



Podemos aplicar el truco a todas las imágenes del blog.

Y es tan sencillo como dar un solo clic en el siguiente botón:

O añadiendo unas líneas de CSS en tu plantilla:

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

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

.post img, table.tr-caption-container {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla para terminar...




Si lo que deseas es añadir sombra en una imagen en particular (o varias) en lugar de hacerlo para todos los iconos del blog, busca la etiqueta ]]></b:skin> y agrega este otro bloque de CSS encima:

.blsombra img {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla.

Dirígete a una entrada cualquiera en la que desees aplicar la sombra.

Ahora utiliza el siguiente código para insertar la imagen personalizada:

<div class="blsombra"><img src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen y listo ^[+].

Notas:

- Para no estar copiando el código que aplica la sombra a una imagen en especial, haz uso de la plantilla de entrada que ofrece blogger.

- Puedes editar el color de la sombra que llevarán tus imágenes.

Sustituye en cada caso el código #cccccc por el valor hexadecimal de tu color favorito (que podrás encontrar usando la tabla de colores).

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

Colocar cualquier tipo de imagen como cabecera del 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 truvos blogger. ! Ve la entrada en su blog original.


Colocar cualquier tipo de imagen como cabecera del blog

Algo fundamental en un blog es el uso de una atractiva cabecera, un logotipo curioso o simplemente un título especial. En muchas ocasiones nos preguntamos si añadir una imagen gif (ya sea con o sin movimiento) o con cualquier otro formato en la cabecera o header del blog es posible.

Y, aunque previamente aprendimos a mostrar en la cabecera, un fondo de imagen en movimiento, no hemos visto aún la forma de hacerlo con una imagen en particular.

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

Busca este bloque y añade las líneas que ves en color verde:

#header-wrapper {
visibility: hidden; display: none; height: 0px;
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ahora busca esta línea:

<div id='header-wrapper'>

Y añade este código justo encima:

<center><a href='URL DE LA PAGINA'><img title="Inicio" src='URL DE LA IMAGEN'/></a></center>

Sustituye URL DE LA PAGINA con la dirección de tu blog, de manera que al hacer clic sobre la imagen, ésta nos lleve al inicio de la bitácora.

Reemplaza URL DE LA IMAGEN por la dirección de tu imagen o logotipo ^[+].

Las etiquetas <center> y </center> al principio y al final del código, centrarán la imagen. Para alinearla a la izquierda simplemente debes borrarlas. Si por el contrario, prefieres alinearla a la derecha, cámbialas por <right> y </right>.

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

Read More

Como mostrar las entradas con una etiqueta esecífica

¡ 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 entradas con una etiqueta específica en la portada del blog

Hacía tiempo que no traía un truco novedoso, algo más completo o un tanto más complicado de instalar que los efectos, widgets o aplicaciones que tan poco nos cuesta conseguir.

Con esto no insinuo que el truco de este post sea complicado pero algo distinto si que es, sobre todo en el sentido de que hay que buscar alguna que otra etiqueta, perdernos en el código de la plantilla para conseguir que en la portada de nuestro blog únicamente se muestren las entradas de una etiqueta en particular.

Por ejemplo, si en un blog se publica sobre temas de política y al mismo tiempo sobre gastronomía (dos cosas bastante distintas...) y queremos que tan solo las nuevas entradas de gastronomía queden visibles en la portada, a pesar de que publiquemos un nuevo artículo de política, aplicaremos este truco, utilizando la etiqueta "gastronomía" en el código.

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

Busca esta línea:

<b:loop values='data:posts' var='post'>

Y elimina todo el código que aparece después y hasta la etiqueta de cierre </b:loop> (sin incluirla).

En su lugar, introduce este otro bloque:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ETIQUETA&quot;'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Ahora tan solo queda reemplazar la palabra ETIQUETA del código por la etiqueta que utilizas para agrupar las entradas que quedarán visibles en la portada. Es importante que escribas la etiqueta tal cual aparece en tus posts, es decir, con mayúsculas, minúsculas, tildes, espacios...

Haz vista previa para comprobar que no hay errores y guarda la plantilla para terminar.

Read More

Como permitir que los lectores se suscriban a una categoría especifíca del 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 truvos blogger. ! Ve la entrada en su blog original.


Permitir que los lectores de tu blog se suscriban a una etiqueta específica

Este truco te permitirá ofrecer a tus lectores la posibilidad de suscribirse a una etiqueta específica del blog, recibiendo así las últimas entradas agrupadas bajo dicha categoría.

Para hacer ver al visitante dicha ventaja, incluiremos un pequeño icono de rss en el lado izquierdo de cada enlace.


Explicaré dos formas de instalar el truco: para las plantillas antiguas de blogger y para las nuevas, de manera que funcione sin problemas.

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

Este es el código necesario:

<b:widget id='Label2' locked='false' title='Feeds de Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li style='list-style:none outside none;border-bottom:1px solid #cccccc; padding:3px 20px;'>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vjtS4oeTJ2SyeKAzkvvhJx-PBMXMmZtlb37V5RLFN1fWcMbIKXaxCn1yUotvatyN2YwKaKown7crd6fkIFQ3n4_Q9X0EoGZIxNTyQBeHTDEoSLpQHeeIutKJeihWVsMEUOU7Ui9oB-I/s400/balcnfd.png' style='padding-right:3px;' title='Suscribirme a esta etiqueta'/></a>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

1) Si tu plantilla es antigua, encuentra estas líneas y añade el código debajo:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

2) En caso de tener una plantilla nueva, busca esto y agrega el código debajo:

<b:section-contents id='sidebar-right-1'>

¿No lo encuentras? Prueba a buscar esto otro e insértalo encima:

<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'>

Pulsa el botón guardar y habrás terminado. Espero que esto te ayude a conseguir un mayor número de suscriptores y difundir con facilidad tus artículos.

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

Cambiando los datos del pie de post

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

Cambiando de lugar los datos del pie del post (post-footer)

En un artículo anterior explicaba la manera de trasladar la línea 'Publicado por...' desde el pie de las entradas hasta el título del post, situándola bajo éste.

Varios lectores me han preguntado si sería posible mover también la línea de 'Etiquetas', la que muestra la hora de publicación de una entrada o el enlace que contiene el número de comentarios publicados, al mismo sitio.

Además de poderse hacer, tan solo requiere cortar y pegar un par de códigos. Una tarea sencilla que conlleva poco tiempo pero con la que se debe tener cuidado y paciencia (omitir un simple carácter o una etiqueta hará que no podamos guardar la plantilla).

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

Para trasladar la hora de publicación busca este bloque:

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

Elimínalo. Inserta el que presento en esta entrada justo debajo de la línea <div class='post-header-line-1'>.

Si trasladaste ya la línea 'Publicado por...' bajo el título incluye el código debajo...

<div class="post-header-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>
AQUI EL CODIGO

Y obtendrás algo como esto:



Para mover la línea de las etiquetas encuentra un bloque de código similar a este:

<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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Bórralo e instera el bloque resaltado en color naranja bajo lo que te muestro a continuación:

<div class="post-header-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='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>

<br></br><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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

La etiqueta <br> y su cierre </br> mostrarán un salto de línea. Con esto haremos que las etiquetas aparezcan bajo la hora y el Publicado por...



Ahora solo nos queda trasladar el enlace que muestra el número de comentarios. Para ello, busca algo parecido a esto:

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

Cópialo y bórralo. Debes situarlo bajo el bloque naranja anteriormente citado. Al hacerlo, el enlace aparecerá al lado de las etiquetas, a la izquierda. Para situarlo en el lado derecho reemplaza la primera línea del código por esta otra (a la que tan solo agregué el atributo float):

<span class='post-comment-link' style="float:right;">

Así mismo, para conseguir un salto de línea, utiliza la etiqueta <br> y su cierre </br>.

Este ha sido el resultado final que obtuve con dos saltos de línea (uno en 'Etiquetas' y otro en 'Comentarios') y al aplicarlo todo:

Read More

Cómo instalar títulos en la sidebar con fondos aleatorios

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

Pués como dice el título, con este truco vas a conseguir que el fondo de los títulos de la sidebar (títulos de los gadgets) sea aleatorio, con la posibilidad de elegir varias imágenes de fondo.

Para insertar el truco en tu blog realiza los siguientes pasos:

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

1) Busca el siguiente bloque (si no aparece en la plantilla, ve directamente al paso 2):

.sidebar h2{
background: #ffffff url(DIRECCION FONDO) no-repeat top left;
text-align: center;
padding-top:15px;
}

Ten en cuenta que no debe ser igual a este, pero debe contener la línea que comienza por background.

Borra esta línea:

background: #ffffff url(DIRECCION FONDO) no-repeat top left;

2) Ahora busca la etiqueta </head> y encima pega este script:

<script type='text/javascript'>
//<![CDATA[
var banner= new Array()
banner[0]="FONDO 1"
banner[1]="FONDO 2"
banner[2]="FONDO 3"
var random=Math.floor(3*Math.random());
document.write("<style type='text/css'>");
document.write(".sidebar h2 {");
document.write(' background: url("' + banner[random] + '") no-repeat;');
document.write("}");
document.write("<\/style>");
//]]>
</script>

Sustituye FONDO X por la dirección de la imagen de fondo que llevará el título del gadget.

Ten en cuenta que en cada espacio (FONDO 1, FONDO 2, FONDO 3) debes incluir una dirección diferente, de manera que la imagen cambie automáticamente al actualizar el blog.

Si deseas agregar más imágenes de fondo, agrega líneas como esta, cambiando las cifras:

banner[3]="FONDO 4"
banner[4]="FONDO 5"

Por el contrario, si lo que deseas es tener simplemente dos fondos aleatorios, elimina esto:

banner[2]="FONDO 3"

Al agregar o borrar líneas para incluir imágenes de fondo, cambia el valor 3 de esta parte del script por el número de líneas que tengas en total:

var random=Math.floor(3*Math.random());

Por último Guarda la plantilla:




Si tienes problemas para realizar este truco, no olvides escribir un comentario para consultarme.

Algunas plantillas tienen nombres diferentes y sólo será necesario localizar dicho nombre para que el truco funcione a la perfección.

Read More

Instala una barra flotante en las entradas del 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 truvos blogger. ! Ve la entrada en su blog original.

Barra flotante para compartir las entradas del blog con opción de cerrar

En una entrada anterior expliqué la forma de obtener una preciosa caja de suscripción para el blog. Esta caja ofrece a los lectores los enlaces de suscripción de nuestro blog, así como el link hacia nuestro perfil en Twitter o en Facebook.

Los dos últimos enlaces guardan una pequeña similitud con este truco. He construido una herramienta muy novedosa, una barra para compartir los artículos del blog con opción de cerrar y que aparecerá únicamente en las páginas de entradas individuales, flotando en el lado izquierdo de la pantalla.

Un widget muy profesional y cómodo, que se puede o no ocultar -a opción del lector- y que permitirá difundir el artículo que estemos viendo en Twitter, Facebook, Google Buzz y Stumble Upon.

¿Lo mejor de todo? No tienes que editar absolutamente nada en el código, simplemente copiarlo e implementarlo en la plantilla con dos sencillos y rápidos pasos.

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

Busca la etiqueta </head> y añade esto encima (antes):

<script type='text/javascript'>function Compartpostblcn(){
div = document.getElementById("Compartpostblcn");
div.style.display="none";}
setTimeout(Compartpostblcn, 90000);</script>
<link href='https://sites.google.com/site/editoriosus/fds/blcnCompartepost.css' rel='stylesheet' type='text/css'/>

Ahora busca la etiqueta <body> en tu plantilla e inserta este bloque de código debajo:

<b:if cond='data:blog.pageType == "item"'><div id='Compartpostblcn'><a href='javascript:Compartpostblcn();'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOThK8pFsaPP_6ZsV5KJvHiQW3vAArlyx8nSaEO8EDmMhZ5VLNfgIeVtxxrL8-LJoUKe1XHKz0a6kTvkrr6_uxZ2VQ6x3KzABskQuUfnaDH7t5XymTrwzF2QHzGQ1M4VZmWURPXj61O2rl/s320/blcerracompar.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:8px;padding-top:4px;' title='Cerrar'/>
<div class='JJblccomp1'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div><div class='JJblccomp1'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='JJblccomp1'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Publicar en Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='JJblccomp1'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/><a href='http://goo.gl/favZ'><img alt='Stumble Upon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXAuBuRCuR4wg1su7WsRHgrtXsMDu47d3nRih2jiwHmx637bWxoLM0YgaPOyUzzUE3rUOP-sjclhWC2KrWGZZDqWv-QmTrfRL9r2IJYzgAAU9aD839f7WcmxFaaIxkp98vZMrRWve8w62N/s320/blobbt.png' style='border:none;float:right;margin-bottom:10px;margin-top:4px;padding-right:2px;padding-top:4px;'/></a></div></a></div></b:if>

En caso de no encontrar esta última etiqueta, prueba a escribir en el buscador de tu navegador (puedes abrirlo pulsando las teclas Ctrl y F simultáneamente-) <body o prueba con esta línea:

<body expr:class='"loading" + data:blog.mobileClass'>

Guarda la plantilla para terminar. No olvides que la barra para compartir aparecerá en las páginas de posts individuales. Accede a una entrada cualquiera y comprueba el resultado.

Read More

Traductores para Blogger: Instala un sencillo traductor de banderas en un paso

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

Traductor de banderas desplegable en tu blog

Al igual que el traductor anterior, este ofrece a los lectores de tu blog unas banderitas que actúan como botones, pero en este caso, con una nueva característica: la presencia de un botón general que las mantiene escondidas y las muestra al ser pulsado.

En la siguiente imagen puedes comprobar el resultado:



Además, la instalación de este nuevo y mejorado traductor es más sencilla y rápida ya que no requiere edición alguna del código.

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

Pega esto en su interior:

<center><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><style>.google_translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;border:0;}#German img{border:0;margin-top:6px;}.google_translate:hover img {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;border:0;}.google_translatextra:hover img {filter:alpha(opacity=0.30);-moz-opacity: 0.30;opacity: 0.30;border:none;}</style><a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5n9Cm7QQfyDcGzvghr4_Vi_0wHXjwhEgcGU4jUDNjhNVMkZiC-luC-9r9dDLIvQTz7iAFZJKz98-kmHGATTwI2ByN4VLbIz2xy7Eqzlx3P_Bdp2zM6xH9J5araR5VS_5eBSl43Gx8Dnyb/s320/bltrad1.png"/></a><div style="display: none;margin-top: 18px;"><div style="text-align:center;"><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6Ejt4-HczuE3DIzVOz2qoGTgjQuKO4cIEPE1hEMzZIknSl-1y1Q8nB7Lfpjw0lJupz3fqB7ftitCr9_yklsMc-ltky045SYu4VwKp9_VE4qKmsVfgX5NeH6xCj9UnFO-l7RxpHp2_OjQ/s320/blenglish.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Alemán" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="Alemán" border="0" align="absbottom" title="Alemán" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_rlV_XW7odmP1KD6HAXX5B4UOswSXfXfiZg20oKcCj-pLI085QxCrvs1MiHkZ7vQSIeK5m2F1RSCvx-z9hcuO_bGJ7gDkzSunNib6i82qzKt599G7bTL4dbpweoG2lew6LX4CpIOt7vk-/s320/blaleman.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Francés" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="Francés" border="0" align="absbottom" title="Francés" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OoWqJxvUlUX8J2uf3rQA-q_YV9HkYrttNTKcY8ACZXS1Nl3HGNzTRsb6WgXStGAncLeY1ZKZLQtVufRT30WQXhQuYoAoiPRooR42bYVLVQPhd0vFRRAbRpKIs2TakpZyBKXcllUnpRGV/s320/blfrances.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Español" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Español" border="0" align="absbottom" title="Español" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-gDlEmbWgpZgsnME53kMf2YvMrp0vhQDzIQdWe2QxdZKKGEpkQ8ozVgzHDhCsZ4L9jZXcwOBBgm7JlEyjq1qY8GjR4J5pznI3Yr5UAy2AphmtxE83fu9i1UKLV3Jr9mW9UjEwo20xqV1/s320/blespanol.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italiano" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italiano" border="0" align="absbottom" title="Italiano" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSHU2DOVrLjdpm_kyck-ewksw5haDGEGVJSnAdF31O0-lZ1wgZBpXYXgzz49sEJbyhHf3W67SlvQvjRF-_v7w8_O9TH9foU_fYKjVfDLHHnOJdxqav_qDBTUFy2g7LDk8JOWD_Cr8OfX7/s320/blitaliano.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Netherlands" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Netherlands" border="0" align="absbottom" title="Netherlands" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMw6-TRJ90CxJAmSxQ6F5I_hB0N5vuBkNZaniTI_2pg2UDUQaxUxtrweYRSWMkwQ3y2SKhUgvaVdUeUhgraZHA4mKkGj3RBC3VtCk0KNZepIIcPELN4U0UAgXamVhvhdU-9O8O3lxfkuYq/s320/blneder.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Ruso" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Ruso" border="0" align="absbottom" title="Ruso" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC5Qz_4NsbyOzASjkDiywQ55OsytASyfkerC83PsZaRnFtf1YWxLelWyvfs08leYJGKvD7f6M6rwFpWMK6n8tinuJOP6SsoTWafdDbd_dMi21OkuOL8mk6xF8JeerATDwgninY60808CJI/s320/blrusia.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portugués" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portugués" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAqDAyob46GFi3wgJt9PnDR5XmwC-MFx7irOMKia2YZuS_vXUYSiMCaqOJGjlZqTRnRF96DctGRkIn3JUcumqPylvN50MWqF-3G_iqRMBUSbkXSGXFq-B5gqCG8O7qu0iwdGwaW1KdOxA/s320/blbrasil.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chino Simplificado" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chino Simplificado" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYU46NUXqFVI38MfoGaiNlgXCbrDPnr2NazaewNGaw3WGmdHRhHZi5CXLCCM_zwa6bfHRP416c8HaYd4whiGiUseOUda1nq9poNmC9mVO8QEcHusNsovL5ob6Dror_ZMMBdHSvklR0pYW/s320/blchina.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japonés" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japonés" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTQMsxUDv3wcfa9sHlcytQ-iC7kvip0BmsknAMryblRsdpED0Ja4UN4gppijoRlh38Y4o3xsun3In112yGnbiWaJJskwIdRi9uY_ysjonHOtB0wBg53_k7xNBx2335LFwVK2WEtkYTlgU/s320/bljapones.png" style="cursor: pointer;margin-right:8px" width="24"/></a><div><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Coreano" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Coreano" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRcHJnB_E-cGMpnFDpvCrZQ6zstnwYO6V8Ly2PJDu63qmpmRIMS-PHR__X1Bf6ppAe8v4f2XdAcYl5KltvFWALYurFM6HAiiFpbyO8DJq4WJhlUx_9dNyJ7XUpXpSTAlXCZF6tabr6CeBH/s320/blcoreano.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Árabe" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Árabe" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVdFBtvLygi6xDQn7MMPaFDQZ5BhyphenhyphenQkdsnqUUz3wxC7WmhnrAbtoyPOe5UkVFybK7Oyxp7TpUytonunNoY8jQd0KgQo2DyaXIcRDyMui-alGMw8LsyfQdwuMWrdmgHPmoimbl2-s3ykmH/s320/blarabe.png" style="cursor: pointer;margin-right:8px" width="24"/></a><center><a href="http://goo.gl/favZ"><div id="German"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUyNvJliF9X3q_ywiaCTrFICwiS9pKG4dsyuTiDynjhbqmx3_flVlu51Gtqx3FA4HQdvzbBz8n3wvLcQEUYz5bbm69tZjiND1EWBGYJKO4CbE4rHGLFbLN5cPQmgOI0eQkeSPwqWPuRhP/s320/aleman.png"/></div></a></center></div></div></div></center>

Guarda el gadget para terminar.

Read More

Muestra estrellas de valoración

¡ 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 estrellas de valoración en las entradas de tu blog

Algo admirado por muchos bloggers son las típicas estrellas de valoración que un gran número de sitios web poseen al final de sus artículos, vídeos o imágenes.

Es sin duda un artilugio muy atractivo que permite a los lectores de un espacio dar su opinión sobre el contenido publicado.

Hace tiempo publiqué una entrada en la que introducía un script proporcionado por el servicio Outbrain y con el que conseguíamos esto mismo. Desafortunadamente, las estrellitas tardaban algo en cargar e incluso mostraban publicidad ajena al blog.

Por ello he decidido hacer uso de JS Kit, un script cuya creación está en inglés y por tanto poco reconocido en los blogs de lengua latina o castellana. Además, pensé que mostrar el widget en inglés sería una desventaja para muchos por lo que traduje enteramente el script y obtuve un resultado como el que te muestro a continuación:

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

Busca la etiqueta <data:post.body/> en tu plantilla y justo debajo añade lo siguiente:

<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>

De esta forma, las estrellas aparecerán en todo momento al pie de tus artículos.

Si prefieres mostrar las estrellas justo debajo del título de tus posts, añade el código bajo esta otra línea:

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

Para hacer que únicamente se vean al abrir una entrada individualmente utiliza este otro código (en lugar del primero):

<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
</b:if>

Ahora encuentra la etiqueta </body> y encima agrega este bloque:

<div id='blEstrellasartic' style='padding-right: 6px;text-align: right;'><a href='http://goo.gl/VHSIZ'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCW57Dvm25BVflMw5mlj1_JD7fEaPpI9PjRSyKwyrZJWb8AOVaten9G4op69iq4EbP7WQAi-MtwrLY5r0klEcFgAW1Fo8CjkqQqiClr-pZgjduCmvbIACqq9rfya1BbpgWnXfxWp4yaysO/s320/blestrellas.png'/><script src='https://sites.google.com/site/scriptsbalcon/b/blestrellas%282%29.js'/></a></div>

Guarda la plantilla para terminar.

Read More

Secciones despegables del blog en cualquier sitio

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

Blog desplegable en cualquier apartado o en la portada de tu bitácora

Si te pareció interesante la entrada sobre los títulos desplegables en las páginas de etiquetas, o aquel tutorial con el que podíamos aumentar la velocidad de carga del blog por medio de un script, este truco te resultará fascinante.

Pensé en combinar ambas ventajas en una misma instalación hasta dar con la idea de tener un 'blog desplegable' o bien en la portada del blog o bien en todos sus apartados.

Aquí te dejo una pequeña imagen que he construido para facilitar la explicación:

Diseño>Edición de HTML>Sin expandir artilugios

Busca algo similar a esto:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>

Ahora, según la configuración deseada, reemplázalo por uno de estos dos códigos:

Para mostrar el truco en la portada del blog...

<b:if cond='data:blog.url == data:blog.homepageUrl'><script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog2' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div></b:if><b:if cond='data:blog.url != data:blog.homepageUrl'><b:section class='mainJ' id='mainJ' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></b:if>

Para mostrar el truco en todo el blog...

<script language='javascript'>function blcnJJMostr() {
var blJJTE = document.getElementById("blcnJJMostrCon");
var blJJTE1 = document.getElementById("blcnJJMostrCon2");
if(blJJTE.style.display == "block") {
blJJTE.style.display = "none";
blJJTE1.innerHTML = "Ver Blog"; }
else {
blJJTE.style.display = "block";
blJJTE1.innerHTML = "Ocultar Blog"; } }</script><span style='margin-left:10px;padding:4px 6px;border:1px solid #cccccc;background:#f2f2f2;'><a href='javascript:blcnJJMostr();' id='blcnJJMostrCon2' style='text-decoration:none;'>Ver Blog</a></span>
<div id='blcnJJMostrCon' style='display: none;'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section></div>

Guarda la plantilla y habrás terminado. Comprobarás que tu blog carga a una mayor velocidad y que navegar por él es más fácil pues el lector puede desplegar el contenido que le interesa leer.

Te aconsejaría añadir también el truco para insertar dos columnas sobre o bajo la zona de entradas, de manera que puedas mostrar gadgets de texto, imágenes o galerías de imágenes y crear un 'orden personalizado' en el blog.

Read More

Como mostrar las últimas entradas de una etiqueta en particular

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

Estás leyendo Ultimas entradas de una etiqueta en particular en el blog (script), en Widget - Gadget

Ultimas entradas de una etiqueta en particular en el blog (script)

Mostrar las últimas entradas en nuestro blog es un complemento muy útil para los lectores que desean acceder con facilidad y rapidez al contenido recientemente publicado. Son muchos los procedimientos que ya hemos visto para instalar esta herramienta. Ultimas entradas con miniatura de imagen, Últimas entradas en movimiento (widget de control manual) e incluso Mostrar las últimas entradas de una etiqueta específica.

Este último truco es el que precisamente explicaré en esta entrada. No se trata del mismo tutorial sino que he dado con otro procedimiento más simple y efectivo para mostrar lo mismo: una lista con los títulos de tus últimos artículos bajo una etiqueta en particular.

A continuación te muestro una imagen del resultado:

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

Busca la etiqueta </head> en tu plantilla y justo antes añade estas líneas:

<script src='https://sites.google.com/site/editoriosus/fds/UltimsblJtetiq.js'/><link href='https://sites.google.com/site/editoriosus/fds/blJtetik.css' media='screen' rel='stylesheet' type='text/css'/><style>#UltimblJtetiqu a {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7jlCxccXOlsZLYbF1k8WVJIP9JaNi-s4faQegcPQg4XE1bpp7E7HRqePESCc8LYXp1_xM3bxI_Nfaqr94bnwwpZ0D6ug42LSVQ2Tq_oVLsMx2vkVHWLtV9NkZG3NvKMNfHGLntC9K7MI/") no-repeat scroll 0 -6px transparent;}</style>

Seguidamente guarda la plantilla.

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

Agrega esto en su interior:

<div id="UltimblJtetiqu"><script src="http://TUBLOG.blogspot.com/feeds/posts/default/-/ETIQUETA?max-results=10&alt=json-in-script&callback=blJtetiq"></script></div>

Reemplaza TUBLOG por la dirección de tu blog (no hace falta que incluyas el http:// o el .blogspot.com ya que tal y como puedes ver ha sido insertado).

En ETIQUETA escribe la etiqueta tal y como aparece en tus entradas (con sus mayúsculas, minúsculas, tildes, acentos...) de manera que los últimos posts puedan mostrarse.

En la línea max-results=10 puedes controlar el número de títulos que aparecerán. Aumenta o disminuye la cifra (10).

Guarda el gadget para terminar.

Read More

Galería de Imágenes en 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.

Estás leyendo Sencilla galería de imágenes en tus entradas, en Entradas

Sencilla galería de imágenes en tus entradas

Desde que vimos como instalar una mini-galería de imágenes o slideshow en la barra lateral del blog muchos preguntaron si podría incluirse en una entrada. Por desgracia, la apariencia que debería tener la galería se pierde al mostrarla en un post y las imágenes suelen desordenarse.

Y bueno, después de haber estado unas horas frente al blog de pruebas aquí les traigo esta novedosa aplicación: un álbum o galería de imágenes sólo para entradas.

Una de las ventajas que ofrece el truco es que las imágenes cargarán a mayor velocidad.

Comprueba aquí el resultado:

Parque

El Ártico

Alimentos

Una madre

La instalación es sorprendentemente rápida y sencilla.

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

Busca la etiqueta </head> en tu plantilla y justo antes añade esto:

<link href='https://sites.google.com/site/editoriosus/fds/blJJGaleriaartic1.css' media='screen' rel='stylesheet' type='text/css'/><style type='text/css'>.blJJTeGaleris img {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG6AJT4W2kp3RYNtvBUCeWS5MWau3reF1niSY2x_CLnQY2FN4e5y1KRbhzfPMWOvX3Y309oAvxoXbFfF8RYZdr90oDxBDAGp3ks4tb6ExsqaHmbgtoJXxe8KOxG8vxDCM9EO8cHR2iBQ/s320/balcnminiaut.png") no-repeat scroll 0 0 transparent;}</style>

Ahora guarda la plantilla. Accede a la entrada en la que te gustaría mostrar el álbum o crea una nueva para comprobar el resultado.

Este es el código necesario:

<div id="balCCGaleriaJaim1">
<a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 1"><span><img width="380" src="URL IMAGEN 1"><br>TITULO IMAGEN 1</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 2"><span><img width="380" src="URL IMAGEN 2"><br>TITULO IMAGEN 2</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 3"><span><img width="380" src="URL IMAGEN 3"><br>TITULO IMAGEN 3</span></a><a href="javascript:void(0);" class="blJJTeGaleris"><img width="100" src="URL IMAGEN 4"><span><img width="380" src="URL IMAGEN 4"><br>TITULO IMAGEN 4</span></a>
</div>

Reemplaza en cada caso URL IMAGEN X con la dirección de tu imagen (debe introducirse dos veces) y TITULO IMAGEN X con el texto que aparecerá bajo cada fotografía.

En caso de querer mostrar más imágenes, haz uso de otro bloque como este dado que únicamente puedes insertar cuatro imágenes en cada álbum (pero un número ilimitado de éstos últimos).

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



Pulsa el botón Publicar y listo

Read More