Menú horizontal para el blog

El funcionamiento de este menú es como los otros que he probado anteriormente, con la única diferencia que hay que hacerlo más o menos a mano. Aún con este pequeño inconveniente, a mi me gusta mucho, no es difícil de hacer y al pinchar sobre los botones se muestran todas las entradas con esa etiqueta.
El único problema que me ha surgido, es que, como yo tengo muchas etiquetas, los botones me salían en dos filas, para evitarlo reduje su tamaño, pero esto hizo que se viera demasiado pequeño, así que opte por colocar un tres de ellos en la sidebar, con lo que está demostrado que también sirve como menú vertical.

Os explico como se hace:

1- Antes de ]]></b:skin> en el HTML de nuestra plantilla, colocamos esta porción de CSS:

#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #C0C0C0;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */

}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
background-color: #333399;
}

#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #CC3300;
color: white;

}

#navcontainer #active { border-left: 1px solid #fff;
}

Aquí es donde podemos cambiar los colores de nuestro menú, el tamaño del texto, la separación, etc.

2- Buscamos en nuestra plantilla esta línea de código:

<div id='content-wrapper'>

Y justo a continuación añadimos la parte del código que mostrará nuestro menú debajo de la cabecera del blog:

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://elescaparatederosa.blogspot.com/search/label/Trucos Blog' id='current'>Trucos Blog</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Trucos imagenes'>Trucos Imagenes</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Datos utiles'>Datos Útiles</a></li>

<li><a href='http://elescaparatederosa.blogspot.com/search/label/Ranking de comentarios'>Ranking de comentarios</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Boton Enlace'>Botón Enlace</a></li>
<li><a href='http://elescaparatederosa.blogspot.com/search/label/Cosas mias'>Cosas mias</a></li>
</ul></div>

Lo copio tal cual está hecho el mio, tenéis que cambiar el nombre de mi blog por el vuestro y, por supuesto el nombre de las etiquetas por las de vuestro blog, así cuando pinchemos sobre uno de los botones del menú, se mostrarán todas las entradas con esa etiqueta.
Hay que tener cuidado al escribir el nombre de la etiqueta, pues si no está escrito exactamente como en el blog no funcionará el link del menú.
Fijaros que el nombre de las etiquetas, hay que ponerlo dos veces en cada enlace, una justo después de /label/ y la otra a continuación, ya que la primera es el enlace y la segunda el nombre que se muestra en el botón del menú.

Para usarlo en vertical, tenemos que aplicar en un nuevo elemento HTML-Javascript, el segundo código, pero etiqueta por etiqueta, es decir así:

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://elescaparatederosa.blogspot.com/search/label/Trucos Blog' id='current'>Trucos Blog</a></li>
</ul></div>

¡Suerte!

Musica mp3 en el blog

Aviso:

Parece ser que la web de Boomp3 ha sido cerrada. Cierro los comentarios de la entrada.

En esta web podemos subir nuestros propios temas en mp3 directamente desde el PC.
La página está en inglés, pero su uso es igual de fácil que intuitivo.
Yo lo he hecho sin registrarme, simplemente para probar, pero con el registro tenemos la posibilidad de administrar nuestros temas en una lista propia.
Si lo que queremos es encontrar un tema determinado sin tener que subirlo ni registrarnos, podemos buscarlo entre los temas que otros han subido previamente.
Como resultado obtendremos un código para pegar en nuestro blog, antes de copiarlo podemos escoger la forma de reproducción, es decir, si el tema comenzará a reproducirse automáticamente o sera el visitante del blog el que de al "play".
En ambos casos existe la posibilidad de detener la reproducción.
Si escogéis la opción de reproducción automática, estará bien que el reproductor este a la vista de las visitas, para que en el caso de que opten por detenerlo puedan encontrarlo fácilmente. No queremos "agobiar" a nuestras visitas con una música que no sea de su agrado ¿no os parece?



Para que nuestro reproductor aparezca centrado en las entradas, la sidebar, o donde sea, metemos su código entre <center> y </center>

Jane, espero que fuese algo como esto lo que estabas buscando.

Proteger una imagen

Un código sencillo de Mandarin Design que debes poner donde quieras mostrar el efecto, es decir, la imagen con texto sobre ella. Es útil si la imagen es de tu propiedad y no quieres que la usen.
Como siempre puedes cambiar colores de texto, tamaño, etc...en el código.
Podéis cambiar la posición del texto o el cuadrado, cambiando el valor numérico en "top".

Código:
<img src="http://URL DE LA IMAGEN"width=350 height=250><div style="position: relative;top: -200px;font: 16pt Haettenschweiler;font-weight:;color: #ffffff;margin-left: 10px;">EL TEXTO VA AQUI</div>

Resultado:

Una bonita foto desde mi ventana...

by Rosa

Otra opción para proteger tus imagenes es añadirles un cuadradito con texto transparente:

Código:
<DIV align="center">
<div style="width:350px;height:250px;background:url(URL DE LA IMAGEN)">
</div>
<p style="width:200px;text-align:justify;border:1px solid maroon;padding:5px;font-weight:bold;position:relative;top:-190px;left:10px;
color:black;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;">
TEXTO AQUI
</p>
</DIV>

Desde mi ventana.
By Rosa...

Eliminar título del blog (opción Blogger)

Si has subido tu imagen de cabecera con la nueva opción que nos proporciona Blogger y quieres que no se vea el título antiguo, simplemente vuelve a elementos de la página y pincha en editar cabecera, te saldrán dos nuevas opciones:

• Detrás del título y la descripción

• En lugar del título y la descripción

Marcas "En lugar del título y la descripción" y guardas. El título habrá desaparecido.

Imagen de cabecera (Opción en Blogger)

No os puedo decir si esta opción en Blogger lleva algún tiempo operativa...he de confesar que yo me he dado cuenta hoy por primera vez trabajando en un blog de pruebas.

Ya no es necesario "revolver" en el código de nuestra plantilla para colocar una imagen en la cabecera del blog. Blogger nos da esa opción en el diseño de plantilla, editar cabecera.

La imagen puede subirse al blog desde nuestro PC o desde internet. La forma de hacerlo es prácticamente la misma que cuando subimos una imagen a una de nuestras entradas. :-) :-)

¿Quién me enlaza?

En esta página (Wholinked) te dan la opción de colocar en tu blog una tabla donde aparecen en tiempo real los links que apuntan a tu blog, es decir, las páginas que te están enlazando.
Si tu blog es nuevo y aún no tienes "enlaces amigos" la tabla mostrará enlaces de motores de búsqueda, normalmente verás los directorios en que estás inscrito, tecnorathi, blogalaxia, etc.
Puedes escoger el color del fondo, de los links, con o sin título...en tres sencillos pasos tendrás la tabla en el blog. La página está en español :-)
Lo he probado en uno de mis otros blogs y queda muy guapo estéticamente.

Header aleatorias para el blog

Miguel me pregunta si es posible colocar distintas cabeceras con imágenes en un mismo blog.
Ya había visto algo al respecto, en realidad sabía de dos formas distintas de hacerlo, pero no las había probado hasta que Miguel me consultó al respecto :-)
De las dos, como siempre me he quedado con la que me ha parecido más sencilla a la hora de implementarla en la plantilla.

Es posible colocar distintas imágenes en la cabecera del blog de tal manera que cada vez que se acceda al blog, o se refresque la página, la imagen cambie aleatoriamente.

1- Antes de nada debemos tener las imágenes preparadas, todas del mismo tamaño que la cabecera, pues si ponemos una mayor que otra, el resultado sería un desastre óptico.

2- Las subimos a un servidor de alojamiento de archivos o al propio Blogger y guardamos sus urls (direcciones de las imágenes).

3- Si ya tenemos una imagen en la cabecera de nuestro blog, hemos de retirarla, pues sino nos "taparía" las otras. Si tenéis el título original de vuestro blog y queréis que siga mostrándose, no os preocupéis, se seguirá viendo sobre todas las imágenes aleatorias.

4- Copiamos este código en el CSS de la plantilla, ya sabéis, en la parte que hay muchas llaves como esta: }, yo lo he puesto con los otros "headers".

#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

5- Copiamos este script antes de </head> o justo después de <body> e incluso en un elemento html-javascript, he probado las tres colocaciones y funciona igualmente.


<script type="text/javascript">

var banner= new Array()

banner[0]="URL DE IMAGEN"
banner[1]="URL DE IMAGEN"
banner[2]="URL DE IMAGEN"
banner[3]="URL DE IMAGEN"
banner[4]="URL DE IMAGEN"
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

Como podéis apreciar en el ejemplo, este se compone de cinco imágenes, pero en var random=Math.round(4*Math.random());, si os fijáis el número a poner es 4, es decir, se pondrá siempre un número por debajo del total de cabeceras a mostrar, ya que la imagen cero también cuenta.

El resultado podéis verlo funcionando (con cinco imágenes) en la página del "hack" original, en esta dirección:

Visto en: Freeyasoul Adventure

Tu nombre con zombies

Desde luego es asombroso la cantidad de generadores online que podemos encontrarnos en internet. Hay de todo y para todos los gustos.

Con este puedes conseguir "manejar" a unos simpáticos zombies para que formen tu nombre, el de tu blog o el texto que quieras, mediante un código de copiar y pegar, se puede eliminar la referencia a la página borrando la última línea del código.

Y así de simpaticón queda... :-)


Zombie Letters from e-zombie.com

Sidebar "colorida" con Scriptaculous

Se trata de que cada gadget de la sidebar se vea con distinto diseño, de forma alterna.
Si queremos por ejemplo que los gadget se diferencien por su color, el resultado sería algo como el de la imagen de ejmplo.

Si tenéis en vuestro blog más de una sidebar, el efecto se muestra en todas por igual.


[1] Vamos en nuestro panel a Edición HTML y colocamos justo antes de ]]></b:skin> estas líneas de CSS:

.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}

[2] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en la plantilla para algún otro efecto, no es necesario volver a incluirlo):

<!-- 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>
<!-- Prototype y Scriptaculous-->

[3] Debajo del script de Scriptaculous que acabamos de incluir, colocamos esto:

<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>

Este script está subido a Google Pages así que, como siempre os aconsejo, lo mejor es que después de descargar el script cada uno lo use desde su propio alojamiento.
También puede usarse directamente en la plantilla colocandolo en lugar de la línea de código anterior.


Por supuesto que no solo podemos hacer que los gadget se distingan por su color, añadiendo algunos parámetros más en el CSS podríamos mostrar unos con borde,otros con imagen de fondo, etc.:

Incluso podemos hacer que todos presenten sus bordes redondeados (en IExplorer el borde se verá "normal"):

.even {
background: #EEEEEE url(url_de_la_imagen_de_fondo);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
.odd {
background-color: #AAAAAA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}

Visto en: Blogger Hacked

El "Leer más" con "Resumen"

Le he puesto este título a la entrada porque, en realidad, no encontré nada mejor que poner para que al leerlo, pudierais haceros una idea del tema del post.
En una entrada anterior os explicaba el "leer más" para vuestras entradas,es decir, la posibilidad de ocultar una parte del post y mostrarlo completo al pinchar sobre "leer más". Con este nuevo truco podemos mostrar el post completo en "leer más" y volver al resumen del post pinchando en "resumen".

[1] En plantilla-html, colocamos esta línea de código justo antes de </head>

<script type='text/javascript'
src='http://www.anniyalogam.com/widgets/hackosphere.js' />

Para evitar problemas, lo mejor sería descargar el script a nuestro PC y usarlo desde nuestro propio alojamiento, sustituyendo entonces la url anterior por la de nuestro propio script.


[2] Buscamos esta parte del código con los elementos expandidos:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Un poco más abajo, está el comienzo de la siguiente sección:

<b:includable id='post' var='post'>

[3] Los códigos que hemos de añadir en esa sección, están resaltados en negrita:

<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<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>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p>
<a expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
Leer mas...
</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'
href='javascript:void(0);'>
Resumen
</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>")
</script>
</b:if>
<div style='clear: both;'/>
</div>

[4] Cada vez que editemos una nueva entrada,hemos de colocar este código en nuestro editor:

Escribir el resumen que se verá AQUI
<span id="fullpost">
escribir el el resto de la entrada AQUI
</span>

[5] Si no queremos tener que copiar y pegar cada vez que vayamos a publicar un post, copiamos esto último en Plantilla - Opciones - Formato- Cajita de publicación de entradas y así nos saldrá la opción en todos los post a editar, si no queremos usarla la borramos y solucionado.

Una sencilla encuesta

Es una forma sencilla de obtener la opinión de tus lectores sobre un tema que tu les propongas. La encuesta tiene una estética simple y funcional y el código resultante puedes incluirlo en la parte de tu blog que prefieras. Tan solo has de ingresar a esta web y registrarte en tres simples pasos (usuario-correo y contraseña) te envían un email a tu correo en cuestión de segundos, después solo has de ingresar con tu nombre de usuario y contraseña y escoger "make a claim" escribes la pregunta para la encuesta y publicas. El código para incluirlo en el blog te saldrá debajo en una barrita. Copias y pegas.
Podrás seguir el resultado de tus encuestas entrando a tu cuenta.

Frases aleatorias en tu blog

Cada vez que los visitantes accedan a tu blog podrán leer una frase o cita distinta, puedes poner frases célebres, de famosos, tus propias frases...El código se puede ubicar en la sidebar o en el HTML de tu plantilla donde quieres que aparezca, a menudo he visto en otros blogs que están bajo la cabecera y a mi personalmente me gusta como queda. He puesto algunas frases que he encontrado por la red en el código de ejemplo, tenéis que cambiarlas por las que queréis mostrar vosotros. Si vas a poner tres frases en "new Array" pones el número 4, si pones cuatro frases, pones 5 en new Array...

Código:

<script language="JavaScript">
citas = new Array(4)
citas[0] = "Caerse está permitido, levantarse es obligatorio."
citas[1] = "A veces hay que darle un golpecito al Pc para que funcione."
citas[2] = "Es mejor que te odien por quien eres a que te amen por quien no eres."
citas[3] = "Mi carácter soy yo y yo soy mi carácter."
aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])
</script>

Header para el blog

Nuestro amigo Daniel nos recomienda muy amablemente una página done podemos encontrar más de quinientas cabeceras para embellecer nuestros blog.
Muy útil para aquellos que, como yo, nos entra dolor de cabeza solo el pensar en "liarnos" con algún programa de diseño... :-) ¡Gracias Daniel! Las hay preciosas...

Free Web Page Headers

Horoscopo del día

El horoscopo del día para tu blog con las predicciónes incluidas para tu salud, dinero y amor, mediante unos simpáticos iconitos.
Escojes tu horoscopo y te dan dos códigos distintos según el modelo que prefieras poner en tu blog. Euroresidentes.

Entradas expandibles (Blogger Beta)

Las habréis visto seguro en muchos blog, yo las tengo en este pero la verdad es que no suelo usarlo, me gusta más ver el post entero.
Suelen llamarle el "leer más" porque es eso normalmente lo que se pone para avisar que el post aún no ha terminado y que pinchando ahí puedes seguir leyendo la totalidad del post. Hay más de un sistema para conseguir este efecto, yo me he decidido por este porque me parece el más sencillo y me resultó a la primera.

1- Buscamos esta parte del código en nuestra plantilla-HTML-expandir plantilla de artilugios y buscamos esta línea de código:

<div class=’post-body’>

Incluimos debajo el siguiente código:


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


Una vez hecho esto localizamos esta línea:

<data:post.body/>

Y justo después añadimos este código:


<a expr:href='data:post.url'>Leer más...</a>
</b:if>


Tendrá que quedar así:

<div class='post-body'>

<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href=’data:post.url’>Leer más…</a>
</b:if>

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>


Guardamos cambios!

Aquí escribes la parte del post a mostrar.
<span class="fullpost">
Aquí escribes el resto del post.
</span>


Quedaría algo así:

Puede ser que te apetezca mostrar solamente el título de la entrada y mantener oculto el resto del post, entonces en "Aquí escribes la parte del post a mostrar" no pones nada y escribes el post completo en "Aquí escribes el resto del post". En este caso quedaría bien, creo yo, sustituir en el primer código el "leer más" por estos símbolos +/-.
En este caso, este sería el resultado:

Hacer ping

Me pregunta Jane en el Cbox que le explique que es eso de "ping".
Pues bien, os diré que en la red existen una serie de páginas webs destinadas a seguir las actualizaciones o retoques que hacemos en nuestro blog y notificarlo a los directorios donde has incluido tu blog con anterioridad. Puedes hacer ping directamente en dichos directorios mediante un sistema que ellos mismos suelen facilitar y puedes hacerlo también mediante uno de estas páginas de que te hablo así permites que sepan que has actualizado tu blog y lo rastrearán buscando los contenidos actualizados.
Hacer ping facilita que tu blog este actualizado en los buscadores de blogs.
Yo, por ejemplo, utilizo "Ping-o-matic", pero hay muchas otras que podrás encontrar en Google con facilidad, mediante esa página hago ping al mismo tiempo en varios de los directorios en los que mi blog está registrado.
Eso si, conviene no abusar, haremos ping solo cuando sea necesario, es decir, cuando actualizamos o variamos el contenido del blog de la forma que sea.
O sea, el hacer ping es como avisar que hemos actualizado o cambiado de alguna forma el contenido de nuestro blog, para que vengan a ver nuestros nuevos cambios.
Ahora solo nos queda registrar nuestro blog en los principales directorios y empezar a usar el "hacer ping".
Por cierto Jane, te recomiendo el directorio de blog UHB, ya que además de directorio tiene un blog interesante con varios temas de ayuda entre otras cosas... :-)

¡Enhorabuena!

Quiero dar la enhorabuena desde este post a una serie de blogs de ayuda que han tenido la merecida suerte de aparecer en el nº 169, de la revista PC Today (especializada en Informática e Internet).
Tengo la revista ahora mismo en mi mesa y me hubiese gustado escanear y públicar el artículo, pero "problemas técnicos" me lo impiden. :-).
Así que copio a mano directamente la parte que nos interesa:

Busca más información
Si tus nociones sobre weblogs son muy escasas o quieres ampliar información, lo mejor será que busques información en blogs cuyo tema principal es, precisamente, su diseño y administración. Por ejemplo Gem@ Blog (www.gemablog.com), Ayuda para tu blog (www.comunidadeayudaparatublog.blogspot.com), Recursos blog (www.recursos-blog.com), Todo para tu blog (www.todoparablog.blogspot.com), Blog an Roll (blogandroll-xosse.blogspot.com), Unión de Bloggers Hispanos (www.uniodebloggershispanos.com) o Blogmundi (www.blogmundi.com). Todos te ofrecen trucos, información sobre elementos que puedes incluir en tu bitácora, tutoriales, enlaces útiles, recursos y consejos para que tu blog sea lo más completo y atractivo posible. Así, si vas a crear o ya has generado tu blog en Blogger, estás de enhorabuena, puesto que prácticamente todas las páginas mencionadas cuentan con un apartado específico para ayudar a sus usuarios.

LO DICHO CHIC@S...¡ENHORABUENA A TODOS POR ESTA MENCIÓN TAN MERECIDA Y POR VUESTRO TRABAJO!

Una firma para tus post online

En esta My Live Signature tenemos la posibilidad de crear nuestra firma personal para las entradas de nuestro blog. Podéis ver la que me he hecho yo abajo de esta misma entrada.

El proceso es muy sencillo ni siquiera hace falta registrarse, pinchamos en "create signatura" y nos darán dos opciones, olvidaros de la segunda (que es de pago :-) ). Escogemos la primera y lo demás es facilísimo, introduces el nombre que quieras y vas siguiendo los pasos: escoger la fuente del texto (hay 140 modelos), el tamaño, el color, la posición de la firma (horizontal, vertical, ladeada...)y al final nos muestran el resultado y nos ofrecen tres posibilidades, hacerla animada (de pago), descargarla a nuestro PC u obtener su código HTML (el que he escogido yo).

Una vez obtenida vuestra firma podéis pegarla en plantilla-opciones-formato en la cajita de abajo de entradas y así aparecerá en todos los post, si en alguno no queréis ponerla, la borráis y ¡listo!

Si queréis que aparezca centrada como la mía, metéis el código que os dan entre <center> y </center>
¿Fácil o no?

Sencillo buscador - blog

Sencillo pero muy práctico buscador para blog.
Se trata de facilitar el que tus visitas encuentren facilmente, dentro de tu blog, lo que están buscando. Justo encima del código podéis colocar un texto e incluso una imagen, para que luzca mejor. Yo lo he puesto en mi sidebar y algunos visitantes que lo han usado me comentan que funciona muy bien.

Código:
<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Botón "Ir abajo"

En realidad no se si tiene mucha utilidad, pero ya que había explicado el de "Ir arriba" pues ahora toca el de "Ir abajo" :-)

1- Podéis ponerlo en un elemento html-javascript de la sidebar y arrastrarlo encima de las entradas, por ejemplo, y ya sabéis, podéis usarlo en forma de texto o con la imagen de un botón.

<a href="#abajo">AQUÍ EL TEXTO A MOSTRAR O LA IMAGEN DEL BOTÓN</a>

2- Ahora tenemos que colocar este código en la parte de abajo de la plantilla, es el código que "llama" al otro. En mis pruebas lo he puesto en otro elemento html-javascrip y lo he arrastrado debajo de las entradas.

<a id="abajo"></a>

Si queréis usarlo, os recomiendo implementar también el de "Ir arriba".
Si os gustan los botones "antipixel" podéis hacerlos fácilmente en esta página.

Imagen en la cabecera (Plantilla 897 de Blogger)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Me han llegado varias peticiones por email sobre como se podría cambiar la cabecera de la plantilla 897 por una imagen.

1- Buscamos esta parte de CSS en la plantilla- html Y sustituimos la url que viene por defecto en Blogger por la de tu imagen, ten la precaución de que la imagen tenga el mismo ancho que la cabecera más o menos, la anchura podemos variarla añadiendo en #header h1 {, el valorheight:100px; y cambiando 100 por la anchura de nuestra imagen.

#header h1 {
background:url("URL DE LA IMAGEN QUE QUIERAS PONER") no-repeat left top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
}

2- Si quieres eliminar el cuadrado de al lado con la estrella, borras esta parte del CSS (está justo encima de #header h1 {:

#header .titlewrapper {
background:#269 url("http://www.blogblog.com/no897/topleft.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}
Usamos la vista previa y si está correcto guardamos cambios.

3- Luego has de eliminar el título del blog (si quieres, claro). Expandimos plantilla de artilugios y buscamos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nnnnnnidododdd (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>

Borramos la última línea, la de data:title. Usamos la vista previa y si está correcto guardamos cambios.

4- Si también queremos eliminar las dos barras que están debajo de la cabecera con la descripción del blog, buscamos esto en el CSS:

/* Description
----------------------------------------------- */
#header .descriptionwrapper {
background: #88ddff url("http://www.blogblog.com/no897/bg_desc_top.gif") no-repeat left top;
margin:0 0 6px;
padding:12px 0 0;
color: $descColor;
font-size: 75%;
border-bottom: 1px solid #ffffff;
}
#header .description {
background:url("http://www.blogblog.com/no897/bg_desc_bot.gif") no-repeat left bottom;
margin:0;
padding:0 0 12px;
display:block;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
border-bottom: 1px solid #ffffff;
}

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www.blogblog.com/no897/temp_no.gif") no-repeat left center;
/* Keep everything below */
display:block;
padding:0 0 0 160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}
Y lo eliminamos por completo.
USAMOS LA VISTA PREVIA ANTES DE GUARDAR NADA.

Post con estilo "periódico"

El Escaparate 15-4-2007 ¿Te gustaría escribir las entradas de tu blog de esta manera tan chula,a dos columnas, que podríamos llamar por ejemplo, "estilo periódico?. A mi me parece una original forma de presentar cualquier texto, sobretodo en los post queda genial, o al menos, original ¿no os parece?.

El texto va dentro de una "tabla" (table) y después lleva los valores añadidos que conforman el estilo de letra, el tamaño y los márgenes. Todos esos valores se pueden modificar en el código a nuestro gusto. Y como veis se pueden incluir las imágenes subidas a Blogger como hacemos normalmente en nuestras entradas.

Os dejo el código para que os divirtáis "jugando" con él.

<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA PRIMERA<br />COLUMNA DEL POST</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA SEGUNDA COLUMNA DEL POST</p> </table>

Visto en : Mandarin Desingn


Otra forma de hacer esto mismo mediante divs

<div style="width: 45%; float: left;">Aqui lo que vaya en la columna izquierda</div><div style="width: 45%; float: right;">Aqui lo que vaya en la columna derecha</div>
<div style="clear: both;"></div>

Enmarcar textos

Dos sencillas formas de resaltar un texto. Puedes cambiar el borde y color en los códigos.

Código:
<p style="border: 2px ridge rgb(255,0,0);">http://elescaparatederosa.blogspot.com (Blog de ayuda para Blogger)</p>

Resultado:

http://elescaparatederosa.blogspot.com (Blog de ayuda para Blogger)

Código:
<span style="background-color: rgb(255, 0, 0);">http://elescaparatederosa.blogspot.com (Blog de ayuda para Blogger)</span>

Resultado:
http://elescaparatederosa.blogspot.com (Blog de ayuda para Blogger)

Cursores para el blog

En www.toolshell.org podéis encontrar un montón de cursores originales para el blog, creo que hay ciento cuarenta más o menos.
Colocarlos es muy sencillo, elegir el que nos guste y colocar el código que os dan en un elemento HTML-javascrip en la sidebar. Cada vez que elegimos uno, se refresca la página y el cursor se transforma en el elegido, asi podemos ver como quedan antes de decidirnos por uno.
Por supuesto los cursores no se ven con el tamaño de la foto, si no a un tamaño de un cursor normal más o menos.
La única pega es que al instalar el código se muestra en nuestro blog, un botón con un link a la página como el que veis debajo de la foto de los cursores.

BLOC TOC

Según Beautiful Beta es una "caja de contenidos interactivos". Podéis verlo funcionando en elblog de Beautiful Beta, en la sidebar de la derecha, donde dice "Show Toc", veréis que al pinchar se abre en la misma página una lista con los post del blog (hasta 100 post) en orden alfabético, si pincháis en post date podréis verlos por orden de publicación del más nuevo a los anteriores.
Además si se pasa el ratón sobre el título de las entradas se ve un avance de las primeras líneas del post en un tooltip (cajita de texto emergente), y si pincháis sobre una de las etiquetas se mostraran todas las entradas que la estén usando.

Antes de comenzar nos descargamos el script a nuestra PC y lo subimos a un servicio de alojamiento de archivos adecuado.

[Paso 1] Vamos a plantilla-HTML y buscamos esta parte del código:

<div id='main-wrapper'>
<b:section class='main' id='main' maxwidgets='1' showaddelement='no'>

y cambiamos en el maxwidgets el 1 por el 2 y en showaddelement ponemos yes.

Si alguno ya tenéis maxwidgets= 2 lo cambiáis por 3 y así sucesivamente.

Salvamos los cambios y vamos a elementos de la página.

[Paso 2] Añadimos un nuevo elemento de HTML- javascript, dejamos su título en blanco y pegamos dentro esto: <div id="toc"></div>, colocamos el nuevo elemento sobre las entradas del blog.

[Paso 3] Añadimos un nuevo elemento de HTML-Javascript en la sidebar y le ponemos un titulo (opcional), pegamos este código (acordaros de sustituir donde dice YOURBLOG por vuestra url y colocar la url del script en URL_DEL_SCRIPT):

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br><br></div>
<script style="" src="URL_DEL_SCRIPT"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;
max-results=999&amp;callback=loadtoc"></script>
</div>

[Paso 4] Antes del cierre ]]></b:skin> de la plantilla-HTML podéis añadir el css que nos da Beautiful Beta y así la vista de la relación de post se verá como la de ellos.
Yo lo he dejado tal cual, es decir, sin añadir el css a ver que resultaba...
El resutado ha sido que mi relación de entradas se ha adaptado automáticamente al estilo de mi blog, así que me ha gustado el resultado.
Para los que querais probar como en Beautiful Beta, os dejo el CSS:

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}

Si tienes más de 100 post para mostrar en tu blog, en el paso 3, copias y pegas la última línea sustituyendo 999 por 101, si tienes más de 100, vuelves a copiar la línea sustituyendo 101 por 201 y así sucesivamente...
La línea en cuestión es esta:

<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;
max-results=999&amp;callback=loadtoc"></script>

El script ha sido traducido al español por cortesía de Amaru.

Favicon para el blog

Un favicon es esa imagen pequeñita que vemos al entrar en algunas web o blogs antes del título en la barra de dirección del navegador.
Alex me pregunta en un email como podría poner uno en su blog. :-)

[1] Lo primero será crear nuestro propio favicon y para no complicaros demasiado podéis optar por hacer como yo y crearlo online. En Favicon from Pics podréis hacerlo sin ningún problema, pinchando en Examinar subís la imagen que vais a transformar en favicon desde vuestro PC, os saldrá una vista previa, incluso sale un favicon con movimiento. Descargáis el favicon a vuestro PC en formato zip, una vez descomprimido nos dará tres imágenes en distintos formatos, escogemos la que está en formato.ico.

[2] Subimos la imagen a un servidor de archivos que admita el formato .ico, como por ejemplo SkyDrive.

[3] Vamos a Plantilla -Edición HTML y buscamos el título del blog, es decir, esta parte del código:

<title><data:blog.pagetitle><title>

y justo antes colocamos esto:

<link href='URL DE TU IMAGEN-FAVICON' rel='shortcut icon' type='image/x-icon'/>
<link href='URL DE TU IMAGEN-FAVICON' rel='icon' type='image/x-icon'/>

Actualización:
Blogger ha cambiado algunas instrucciones en sus plantillas y puede darse el caso de que algunos favicones dejen de mostrarse, en ese caso tendremos que cambiar el código de posición.

Glitter-graphics

Una página para obtener un montón de adornos para el blog chulísimos y, lo mejor de todo, es que cualquier cosa que elijas la instalas en tu blog directamente con un código que te proporcionan, no necesitas subir las imagenes a ningún servidor externo. ¡Copiar y pegar!
Gifs animados, avatares, Clipart, Iconos...un poco de todo. En el generador de textos consigues efectos tan bonitos como la frase de arriba con varios modelos de letra para elegir.
Algunos de los iconitos son muy guapos, tienen unos fondos para web muy originales y casi 200 modelos diferentes de barras de separación.

Hacedles una visita ¡merece la pena!

http://www.glitter-graphics.com/

Genera tu retrato online

Un curioso generador online para hacer retratos a la carta.
Si te tomas el tiempo necesario puedes conseguir un efecto incluso casi real.
Queda chulo para usarlo como avatar, e incluso puedes añadirle el fondo que quieras.
Este es el resultado de mi propio retrato y os prometo que se me parece bastante. :-)
Portrait Illustration Generator

Pullquote sin complicaciones

El color, borde, tamaño, la posición
del pullquote,etc.
Se pueden adaptar fácilmente a
nuestro gusto cambiando los valores
necesarios en el código.

En un post anterior os explicaba como conseguir un pullquote muy bonito según BlogU.
Si no queréis complicaros la vida podéis hacer como yo, es decir, he pegado este código directamente en Plantilla - Opciones - Formato, abajo en le "cajita" de entradas, y cada vez que escribo un nuevo post me sale en el editor. ¿Que no voy a usarlo? lo borro, que si...escribo el texto del pullquote justo antes de </strong> y ¡listo!
Incluso podéis tenerlo a mano en el block de notas, por ejemplo, y cuando lo necesitéis copiar y pegar. Acordaros que en el editor de entradas la parte correspondiente al "pullquote" ha de ir primero que el texto de la entrada, sino el pullquote se vería debajo del texto.

Código:

<p style="float:right;width:30%;padding:8px;border:1px solid #000;font-size:.8em;margin:20px;background-color:#ddd;">
<strong> TEXTO_DEL_PULLQUOTE</strong><br>
</p>

¡Suerte! ;-)

Insertar enlaces (links)

Me preguntan algunas persona como insertar enlaces, la mayoría ya lo sabéis seguro, pero como hay gente que apenas se incia en este mundo del blog, lo explico a través de este post para quien tenga la duda.

Para insertar enlaces (links) en un post se pueden emplear dos formas; una de ellas es a través del HTML, solo copias y pegas el siguiente código y pones la dirección del sitio a linkar :

<a href="DIRECCION DE LA PAGINA A LINKAR">NOMBRE DE LA PAGINA</a>

Si además añades target="_blank" después de la dirección de la página (dejando un espacio), el link se abrirá en una nueva ventana.
De igual forma pueden insertarse en la sidebar.

Ejemplo:
<a href="http://eternamentecabreada.blogspot.com" target="_blank">Eternamente cabreada</a>


Resultado:
Eternamente cabreada

La otra forma es a través de la redacción de las entradas (Creación de entradas), primero escribes el texto al cual le quieres añadir un link, lo marcas con el apuntador (mouse) y luego haces click en el símbolo de link: , escribes la dirección URL del enlace y listo.
Esta forma, como supondréis, solo sirve para poner los enlaces en los post.

Texto tipo Google

Una simple "chorradilla" pero queda guapo... :-D

Google

El

EscaparaTe

<div style="text-align: center;"><span style="color: rgb(0, 57, 182);font-size:300%;" >G</span><span style="color: rgb(196, 18, 0);font-size:300%;" >o</span><span style="color: rgb(243, 197, 24);font-size:300%;" >o</span><span style="color: rgb(0, 57, 182);font-size:300%;" >g</span><span style="color: rgb(48, 167, 47);font-size:300%;" >l</span><span style="color: rgb(196, 18, 0);font-size:300%;" >e</span></div>

En font-size cambiamos el tamaño de letra.

Personalizar la fecha de las entradas

He estado "jugando" en mi block de pruebas un rato y he modificado de forma simple la apariencia de la fecha de las entradas:

En el HTML de la plantilla, en la parte del CSS, está: h2.date-header {, esta parte es la fecha de las entradas, normalmente se ve así:

h2.date-header {
margin:1.5em 0 .5em;
}

Yo le he añadido algunos valores, hasta encontrar el efecto que quería, y me ha quedado así:

h2.date-header {
margin:1.5em 0 .5em;
width: 100px;
text-align:center;
text-transform:uppercase;
border: solid #000000 1px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #c0ffff
}

Os explico lo que he hecho:

width: 100px; esto hace que el tamaño del borde que añadiré luego tenga el tamaño que quiero, si no lo ponemos el borde se adaptará al tamaño de la entrada.

text-align:center; esto hace que el texto esté en el centro del borde.

text-transform:small; para que el texto se vea en mayúsculas, si cambiamos uppercase por small se verá en minúsculas.

border: solid #000000 1px; el color y grosor del borde, si aumentas 1px, se verá mas grueso y si cambias #000000 se verá del color que quieras.

-moz-border-radius: 15px;
-webkit-border-radius: 15px; esto hará que los bordes se vean redondeados.

background: #c0ffff esto es el color del fondo, podéis cambiarlo por el vuestro.

Y este ha sido el resultado:




Si lo que estáis buscando es ocultar la fecha de las entradas, olvidaros de lo anterior y simplemente añadis en h2.date-header {
margin:1.5em 0 .5em;
}
esta línea:

visibility:hidden;

Títulos expandibles en los post de las etiquetas

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Me pregunta Nixon en un comentario como consigo que al pinchar sobre una de mis pestañas, se vea solamente la lista del título de las entradas y que una vez se pinche sobre uno de los títulos, este se expanda para mostrar la entrada completa.

Para poder hacer esto, antes es imprescindible tener etiquetados nuestros posts, si no sabéis como hacerlo, podéis consultar en esta entrada anterior como etiquetar vuestras entradas.

[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto, lo descomprimimos y lo subimos a un alojamiento adecuado para obtener su url.

[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:

<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="URL_DEL_SCRIPT" type="text/javascript">
</script>

[3] Buscamos la parte de este código que se encuentra escrito en color negro, y añadimos la parte del código que está escrita en rojo, colocada tal cual lo veis aquí:

<b:includable id='PeekABooPost' var='post'>

<div class='post uncustomized-post-template'>

<table><tr><td width='40px'>

<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>

<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

<div class='post-body' expr:id='data:post.id' style='display:none'>

<p><data:post.body/></p>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.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>

Solucionando problemas:

Algunas visitas me han comentado que su código no es igual al del truco y que no han podido hacerlo. La diferencia, en casi todos los casos, estaba en que no habían ocultado o eliminado la tabla que sale en las páginas de etiquetas y que dice algo así como "ver más entradas con esta etiqueta". El código de esa tabla es este:

<b:include data='top' name='status-message'/>
<data:adStart/>

La solución, sino queréis quitar u ocultar esa tabla, es colocar el código para los post expandibles, ignorando esa parte, es decir, cuando llegamos a ella, seguimos hacia abajo buscando la parte que necesitamos para colocar el código, y listo.

Nota:
Consulta como ponerle footer a tus entradas expandibles.

¡Vuelvo enseguida!

Mañana me voy de vacaciones de Semana Santa, a decir verdad, más que vacaciones son una visita... ¡pero estoy encantada! :-) Tengo a mi hijo mayor y mi nuera viviendo lejos y voy a aprovechar estos días para ir a verlos.
Mientras esté fuera vosotros ya sabéis ;-) cuidarme mi "casita" y seguir viniendo de visita como si estuvierais en la vuestra, aunque yo no esté mi casa está abierta para todos vosotros.
¡Portaros bien en mi ausencia!

P.D. Aunque mi hijo no tiene conexión en casa a lo mejor me "apaño" para publicar algún truquillo ;-) por si acaso me "ataca" el mono, dejo algúnos posts en "borradores"... :-D

Mostrar últimos comentarios y últimas entradas

Para mostrar los "últimos comentarios" en tu sidebar has de seguir unos sencillos pasos:

1- Ve a tu plantilla - añadir elemento de página, añades un elemento "feed", una vez ahí te solicita ingreses una url.
Pones esta:

http://NOMBRE DE TU BLOG.blogspot.com/feeds/comments/default

2- Escoge el número de comentarios que quieres que se vean, o si quieres mostrar fecha y autor, ponle un título (”Últimos comentarios”, “Opinaron”, "Pasaron por aquí", etc.) y dale a publicar. arrástralo a donde quieras mostrarlo en tu barra lateral.


Para mostrar "últimas entradas" has de hacer exactamente lo mismo que para "últimos comentarios" cambiando solamente la url, que es esta:

http://AQUÍELNOMBREDETUBLOG.blogspot.com/feeds/posts/default

¡Listo! :-)

Tagboard

He colocado un tagboard en la sidebar, ya sabéis...esa especie de "chat enano" que está tan de moda...
No es que sea santo de mi devoción, pero me han consultado hoy sobre como poner uno y como, en realidad, no tenía ni idea,  pues he tirado de "San Google" y me he encontrado con Cbox, hay que introducir el nombre de usuario que quieras, la contraseña y el email, y en menos de un segundo te llega el correo de confirmación.
Una vez ingresamos a la página, escogemos el modelo que queramos, copiamos el código que nos ofrecen y lo colocamos en un nuevo elemento de la sidebar.
Sencillo.

En fin...que no creo que el mio dure mucho ahí, pero de momento lo tenéis como muestra unos días.

Traducir al inglés tus post

Os explico como podéis poner un traductor en el pie de vuestras entradas para dar la posibilidad a vuestros visitantes de traducir ese determinado post al inglés. Aunque podéis optar incluso por traducirlos al italiano, alemán, francés y ruso, por gentileza de Vivek Sanghi.
El resultado es esa banderita pequeña que veis en el pie de mis entradas donde pone English al lado (eso lo podéis quitar en el código) en realidad yo pienso quitarlo, pero de momento lo dejo tal cuál para que podáis verlo y decidir como os gusta más "con o sin". ;-)

El código es este:

<a expr:href='"http://world.altavista.com/babelfish/trurl_pagecontent?url=" + data:post.url + "&amp;lp=es_en"' title='Spanish to English'><img src='http://1.bp.blogspot.com/_XGtsagQTuUQ/RZk8DP2JNiI/AAAAAAAAADk/eRxHS5s1f10/s320/english.jpg' alt='Eng' /> English</a>

Tenéis que colocarlo en vuestra plantilla-HTML después de:
<p class='post-footer-line post-footer-line-3'>

Fijaros bien porque ese es el post-fooder, es decir el pie de nuestras entradas, y según donde lo coloquéis lucirá mejor o peor. En realidad se trata de ir probando y escogiendo sitio :-), por suerte la banderita sale en "vista previa".
Si no queréis que salga lo de "English" lo borráis en el código, está justo antes del cierre </a>.
¡Suerte! :-)

Modificar el título de las entradas

Como suelo andar "destripando" plantillas, a diario experimento cosas nuevas. Hoy voy a explicaros como cambié el título de las entradas de otro de mis blogs, a mi me gusta como queda :-)

Dentro del CSS de nuestra plantilla es donde podemos cambiar los parámetros para "ordenar" al blog que se muestre de una forma u otra.
En esta parte del código HTML de la plantilla, por ejemplo, podemos hacer que el titulo de nuestras entradas se vea diferente: .post h3 {
Solo hemos de añadir o quitar algunas cosas...


Así estaba antes:

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


Asi se ve ahora:

.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;
}


Podéis ver que he corregido el "padding", es decir, la distancia que quiero darle desde el título a los bordes.
He añadido el valor "text-align", en este caso he puesto center, lo que hará que el título de la entrada se vea centrado.
He añadido el valor "text-transform", lo que hará que el texto del título se vea en mayúsculas.
He cambiado "font-weight:normal;", por "font-weight:bold;", lo que hará que el texto del título se vea en negrita.
He añadido el valor "border", lo que hará que el título aparezca dentro de un borde, además le doy al borde el valor "1px solid" para escoger su grosor.
El color del texto lo dejo según el estilo del blog, y si me interesa cambiarlo, lo hago en "fuentes y colores de la plantilla".


Y este ha sido el resultado:



Ahora os toca a vosotros hacer experimentos... ;-)

Widget que no se ve en la página principal del blog

De la forma que voy a explicaros a continuación podréis añadir un nuevo widget o elemento de página que no sea visible en la página principal del blog, se verá solamente en las páginas de etiquetas y en las que se buscan a través de archivo, es decir, en todas las demás.

Esto es útil sobretodo cuando nuestras visitas acceden a una determinada entrada desde un buscador, suele suceder que si encuentran lo que buscan en ese determinado post, no se paran a mirar más en tu blog, para que se animen podemos hacer que vean debajo nuestras ultimas entradas, una relación de todas, una imagen, etc.
Es útil también estéticamente, ya que a veces, cuando se accede a un determinado post el espacio que queda vacío desde el pie de la entrada hacia abajo es demasiado grande.

1- Vamos a plantilla y añadimos un nuevo elemento, es importante que le pongáis un título que os sea fácil de identificar, así será fácil localizarlo en el HTML de la plantilla. Lo arrastramos bajo las entradas, e incluso si queréis, al pie de página.
Podéis decidir más tarde que vais a poner en el, si ya lo tenéis decidido pues lo incluis en este momento.
Guardamos cambios.

2- Plantilla - HTML - expandir artilugios. Buscamos el nuevo widget por su título.
El mio se titula "más ayuda en El escaparate".

<b:widget id="Feed2" locked="false" title="Más ayuda en El Escaparate" type="Feed">
<b:includable id="main">

3- Añadimos lo que va en negrita a su código, fíjate que la primera línea en negrita va justo después de <b:includable id='main'> y la segunda has de ir buscando hacia abajo hasta que veas el primer </b:includable> y lo colocas justo antes.

<b:widget id="Feed2" locked="false" title="Más ayuda en El Escaparate" type="Feed">
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:if>
</b:includable>
</b:widget>

4- Guardamos y vemos los cambios.