Plantilla Natural basada en Minima de Blogger

Una plantilla que parte del diseño de la "Mínima" de Blogger.
La hice por encargo para alguien que al final se arrepintió de hacer el cambio, así que la dejo para quien quiera usarla. En el blog donde podéis verla funcionando están las instrucciones para configurar el menú de pestañas, así como para ponerla en el blog.
La imagen de la cabecera (header) va incluida en el código de la plantilla (no subida desde Blogger) así que al instalarla también aparecerá la imagen en el header.

La he probado en IExplorer y Firefox y en ambos se visualiza y funciona correctamente.
La plantilla lleva incluida una serie de modificaciones "menores" como:
. Links sin subrayado,
. Nvabar (barra de Blogger) oculta,
. Mensaje en las páginas de etiquetas "mostrar entradas con la etiqueta X" oculto,
. Icono al pie del post en las etiquetas,
. Icono al pie del blog en el "suscribirse a",
. Diseño de comentarios en las páginas de etiquetas,
. Título del post expandible en las páginas de etiquetas,
. Menú de pestañas, etc...

Ver o descargar plantilla "Natural"

Abierto por vacaciones

Pues si, queridos amig@s, llegó el momento.

Me voy unos días de vacaciones, llegó el tiempo de descansar un poquito.
Espero que donde voy, no me sea difícil la conexión a internet, en un momento preparo mi portátil para su primer viaje largo...
Intentaré hacer lo posible para seguir al "pie del cañón" aunque sea buscando un ciber para la conexión. Mientras regreso, podéis seguir visitando El Escaparate y utilizando sus ayudas y, eso si, si algún email de ayuda llega, tendréis que armaros de paciencia para esperar, aunque espero que eso no suceda y pueda contestar sin demasiada tardanza..

Abrazos mil y felices vacaciones.

Imagen o color de fondo en el título del post y de la sidebar

Me consulta Mente Solitaria sobre como poner un fondo de color en el título de sus post, como ya tenía un post en "borradores" sobre el tema, no me ha costado mucho "retocarlo" un poco...

Para poner la imagen como fondo del titulo de las entradas del blog, buscamos esto en el CSS de nuestra plantilla:

.post h3 {

Justo debajo, añadimos esto:

background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;

Yo tengo border: 0px, si queremos que la imagen se vea bordeada cambiamos el cero por el número que queramos, a mayor número, borde más grueso.
He puesto height: 30px, que marca el alto de la imagen, si no ponemos nada la imagen se adaptará al alto del título que, para mi gusto queda estrecha...
Si cambiamos el 30 por un número mayor, la imagen se verá más ancha y viceversa.
Fijaros que el color que he puesto para el borde es ffffff, o lo que es lo mismo, blanco, si usamos la imagen con borde podemos cambiarle el color por el que nos guste.

Para poner una imagen en el título de la sidebar, buscamos esto en el CSS de nuestra plantilla:

.sidebar h2 {

Aquí he de aclarar que haciendo las pruebas en una de mis plantillas (Mínima), me encontré con que el .sidebar h2 { no aparecía por ningún lado, así que se me ocurrió añadirlo directamente, y funcionó. :-)
Lo añadí en la zona de /* Sidebar Content */ que es donde en la Mínima están las otras propiedades de la sidebar.

Después de .sidebar h2 }, añadimos lo mismo que para el título de las entradas, es decir, esto:

background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;

Los cambios que se pueden hacer son los mismos que en la imagen del título de las entradas.

Lo he probado en cuatro plantillas distintas y el resultado ha sido óptimo.
Si la imagen es más pequeña que el ancho de las entradas o la sidebar, esta se repetirá automáticamente hasta conseguir la medida adecuada, para evitarlo he utilizado una imagen del ancho de las entradas más o menos.


Si lo que queremos es simplemente darle un fondo de color a los títulos, haremos prácticamente lo mismo, pero el código que debemos añadir es este:

background:#0033FF;

He puesto en el ejemplo un tono de color azul, pero podemos cambiarlo por el que mejor quede con el blog.
En WebTaller podéis consultar una tabla de colores con sus respectivos códigos.

Imagen en la fecha del blog

Antes de empezar hemos de conseguir la imagen que nos guste y subirla a una web de alojamiento de imágenes o al mismo Blogger, de este modo obtendremos su url.
A continuación buscamos en nuestra plantilla, en el CSS, esta parte de su código:

h2.date-header {

ahí podemos controlar el aspecto de nuestra fecha. Justo debajo, por ejemplo, colocamos estas nuevas líneas de código, así es tal como está el calendario que tengo en mi blog:

background: url(http://img178.imageshack.us/img178/1228/datevn4.png) center left no-repeat;
padding-left:20px;
padding-top:5px;

Según sea el tamaño de la imagen escogida, tendremos que cambiar el valor de padding-left (distancia del título a la imagen) y padding-top (nos ayudará a centrar la imagen con el texto).
Usamos la vista previa y si es de nuestro agrado, guardamos cambios. En la url de la imagen he dejado puesta la dirección del icono con el calendario que tengo en El Escaparate, por si queréis usarla o probar con ella antes de escoger la vuestra.
¡Suerte!

Pop up con publicidad no deseada

Son muchos los visitantes del Escaparate que me han consultado sobre la forma de eliminar esas molestas ventanitas o pop ups que salen en sus blog y que muestran algún tipo de publicidad.
Generalmente, por no decir siempre, esto es debido a la instalación de algún tipo de contador gratuito que, sin previo aviso, incluye en su código la famosa ventanita.
Uno de los contadores mas usados, incluye en su javascript el código para mostrar un pop up, estoy hablando de webstats4U o motigo webstats .
Solía aconsejar retirar el código completo y, por tanto, prescindir del contador, hasta que leí en el blog de pepino La Revolución Industrial un post muy interesante sobre el tema, donde nos indica como eliminar solamente la parte que nos interesa para evitar el molesto pop up y, al mismo tiempo, que nuestro contador siga desempeñando su cometido.

Yo no lo he probado, dado que no uso ese sistema de contador, pero me han comentado que el problema se soluciona.
El código quedaría así (el ejemplo es del blog de Pepino) después de eliminar la parte de javascript que provoca el pop up:

<!-- Begin webstats4U code -->
<!-- Title: La Revolución Industrial -->
<!-- URL: http://larevolucionindustrial.blogspot.com/ -->
<a target="_blank" href="http://www.webstats4u.com/stats?AEEhlg3X2SmkeVArRv0OSoxLQr5w">
<img border="0" width="18" alt="Webstats4U - Web site estadísticas gratuito El contador para sitios web particulares" src="http://m1.webstats4u.com/n?id=AEEhlg3X2SmkeVArRv0OSoxLQr5w" height="18"/>
</a>
<!-- End webstats4U code -->

Opacidad con imágenes (I)

Podemos conseguir fácilmente distintos grados de opacidad para nuestras imágenes, el efecto queda bien, aunque en mi caso no le encuentro demasiada utilidad, supongo que vendrá bien para los que incluyan en su blog imágenes propias, es una forma de protegerlas sin afearlas con texto o marcas de agua.

Esta es la imagen original con los distintos grados de opacidad que podemos darle, y el código que hemos de aplicar para conseguirla en cada caso.
En "width" y "height", dentro del código, hemos de poner la anchura y altura de nuestra imagen.


Esta es la imagen con una opacidad del 75% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>

Esta es la imagen con una opacidad del 50% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>

Esta es la imagen con una opacidad del 25% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>

Esta es la imagen con una opacidad del 100% aplicada.
<div style="width:122px;height:122px;filter:alpha(opacity=100);-moz-opacity:.100;opacity:.100;
background:url(http://img82.imageshack.us/img82/6461/imageswb5.jpg)">
</div>

Tenéis que cambiar la url, por la de vuestra imagen.
Procurad colocar el código todo seguido en la misma línea, sino, a veces, no se muestra la imagen, yo lo he puesto "partido" para que entrase en el post.

Mensajitos para el blog

Una página para generar mensajes con imagen que puedes usar para adornar el blog, o dar la bienvenida a tus visitas, por ejemplo. En la misma web encontraremos bastantes tipos de generadores, pero yo me he quedado con el de "Snoopy" porque me encantan esos dibujos. :-)
www.redkid.net

Multi-traductor

Está hecho usando el traductor online de worldlingo así que no hemos de esperar demasiado, ya sabéis como va esto de los traductores online que no son del todo aceptables en sus traducciones.
No obstante he incluido en el buscador todos los idiomas que allí proporcionan: Inglés, Francés, Chino, alemán, árabe, portugués, ruso...
Tenéis que copiarlo y pegarlo en un elemento html-javascript, y no se os olvide cambiar la url de mi blog por la url de vuestro blog.

Spanish to Arabic
Spanish to Chinese (Simplified)
Spanish to Chinese (Traditional)
Spanish to Dutch
Spanish to French
Spanish to German
Spanish to Greek
Spanish to Italian
Spanish to Japanese
Spanish to Korean
Spanish to Portuguese
Spanish to Russian
Spanish to English
Spanish to Swedish

Código

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="AR"/>Spanish to Arabic
<option value="ZH_CN"/>Spanish to Chinese (Simplified)
<option value="ZH_TW"/>Spanish to Chinese (Traditional)
<option value="NL"/>Spanish to Dutch
<option value="FR"/>Spanish to French
<option value="DE"/>Spanish to German
<option value="EL"/>Spanish to Greek
<option value="IT"/>Spanish to Italian
<option value="JA"/>Spanish to Japanese
<option value="KO"/>Spanish to Korean
<option value="PT"/>Spanish to Portuguese
<option value="RU"/>Spanish to Russian
<option value="EN"/>Spanish to English
<option value="SV"/>Spanish to Swedish
</select>
<input value="http://elescaparatederosa.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 35px;" value="Go" type="submit"/>
</form>

También podéis añadir el widget directamente a vuestro blog (no se os olvide cambiar la url una vez instalado):

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank"><br /><input value="ES" name="wl_srclang" type="hidden"/><br /><select style="font-size: 70%; width: 160px;" name="wl_trglang"><br /><option value="AR"/>Spanish to Arabic<br /><option value="ZH_CN"/>Spanish to Chinese (Simplified)<br /><option value="ZH_TW"/>Spanish to Chinese (Traditional)<br /><option value="NL"/>Spanish to Dutch<br /><option value="FR"/>Spanish to French<br /><option value="DE"/>Spanish to German<br /><option value="EL"/>Spanish to Greek<br /><option value="IT"/>Spanish to Italian<br /><option value="JA"/>Spanish to Japanese<br /><option value="KO"/>Spanish to Korean<br /><option value="PT"/>Spanish to Portuguese<br /><option value="RU"/>Spanish to Russian<br /><option value="EN"/>Spanish to English<br /><option value="SV"/>Spanish to Swedish<br /></select><input value="http://elescaparatederosa.blogspot.com/" name="wl_url" type="hidden"/><br /><input style="font-size: 70%; width: 35px;" value="Go" type="submit"/><br /></form><br />

Sin comentarios , 1 comentario, X comentarios

Es un "truco" muy simple de realizar de Hoctro´c Place que nos da una posibilidad muy útil para mostrar nuestros comentarios según hayan comentado o no.
Después de implementar este truco, los comentarios en el pie de nuestras entradas se verán "sin comentarios" (si nadie ha comentado), "1 comentario" (si solo hay uno) o "X comentarios" (mostrará el número de los que haya en ese post).


[1] Vamos a Diseño - Edición HTML y expandimos los artilugios.
Buscamos esto:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>

Unas líneas más abajo veremos un <h4>
Cambiamos desde <h4> hasta </h4>, ambos incluidos, por esto:

<h4>
<b:if cond='data:post.numComments == 0'>
Sin comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 comentario:
<b:else/>
<data:post.numComments/> comentarios:
</b:if>
</b:if>
</h4>

[2] Seguimos bajando por la plantilla hasta encontrar esto:

<p class='post-footer-line post-footer-line-1'>

Unas líneas más abajo veremos esto:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>


Cambiamos desde la línea que está a continuación de esa, hasta </a> por esto:

<b:if cond='data:post.numComments == 0'>
sin comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 comentario
<b:else/>
<data:post.numComments/> comentarios
</b:if>
</b:if>
</a>

Antes de guardar usamos la vista previa y si todo ha ido como debería, veremos "sin comentarios" (en los post donde no hay), "1 comentario" (cuando solo hay uno) y "X comentarios" (marcará el número de comentarios).

Por supuesto que podemos cambiar el texto "comentarios" por el que queramos (Sin opiniones, opinión, opiniones...)