Alojar archivos

Esta entrada ha dejado de ser útil, ya que lo que explicaba en ella ya no existe.

Pronto os explicaré otro sitio.

Scroll en los widgets

Si tienes la columna lateral tan llena de listas y de elementos que sobrepasa a las entradas, puedes hacer que se "encojan" mediante un scroll.
El código para colocarlo es muy sencillo.
Sin expandir elementos, mira como se llama el elemento que quieres encoger.
Por ejemplo, la lista de entradas se llama BlogArchive1 y la de etiquetas se llama Label1.
Si tienes listas de enlaces se llamarán LinkList1, 2, 3 etc. dependiendo de cuantas tengas.
Si son elementos HTML/Javascript, se llamarán HTML1, 2, 3 etc.
Averigua cual es la denominación exacta del que quieres mostrar así y en la parte del CSS, verás que pone

/* Sidebar Content
----------------------------------------------- */
Justo debajo de esta línea discontinua añades este código (vamos a suponer que es para la lista de entradas)

#BlogArchive1{
height:200px;
overflow:auto;
{

puedes cambiar la altura quitando o añadiendo píxels.
Esto lo puedes poner en tantos elementos como quieras, simplemente has de ir añadiendo los códigos cambiando el nombre del elemento pero ¡CUIDADO!
si tienes 2 columnas laterales o sidebars, has de asegurarte de en cual de las dos están los elementos.
Cuando busques su nombre, verás que en el código aparecen bajo esta línea

<div id=' sidebar-wrapper'>
o bajo esta otra
<div id='newsidebar-wrapper'>
Si el elemento que quieres encoger está en la nueva columna tendrás que añadir esto:

/* Newsidebar Content
----------------------------------------------- */

y debajo, el código del scroll en el elemento correspondiente.

Un ejemplo por si te ha quedado alguna duda:
En este blog hay dos columnas.
Sidebar-wrapper es la que ves a la izquierda y en ella está el archivo, las etiquetas, los comentarios y tres o cuatro listas de enlaces que tienen scroll.
Newsidebar-wrapper es la que ves a la derecha y en ella hay un Feevy con las últimas entradas de los otros blogs de trucos que también tiene un scroll.
Los de la izquierda están bajo Sidebar Content.
Para ponerle el scroll al Feevy he añadido esto de Newsidebar Content, de lo contrario no aparecía.

Consejo:

Pon siempre título a los elementos, de esta forma te será más fácil localizarlos, pero si por algún motivo no quieres hacerlo, ten en cuenta que la lista que ves en el HTML debajo de sidebar-wrapper y de newsidebar-wrapper, está en el mismo orden en que se ven los elementos en las columnas.

Enmarcar el título con estrellas (harbor)

Si no es la primera vez que te asomas a este blog, quizás te hayas percatado de que le he cambiado el "vestido" que llevaba por este de los corazoncitos, mas primaveral.
Pero también descubrí, mientras lo estaba maquillando, que podía ponerle una segunda línea de estrellitas al título, y algo mas...
¿Recuerdas como estaba antes la cabecera?. Una línea de estrellas fugaces, el título y el subtítulo (del mismo color que el título, pues cambiaban a la vez).
Ayer, cuando entré a cambiar el fondo, subí el título hacia arriba y como ya tocaba, cambié las estrellas por estas que ves.
También aproveché para echarle un vistazo al código en general y le añadí la variable para cambiar el color del subtítulo independientemente.
Y entonces se me ocurrió probar a ponerle la segunda línea de estrellas, las que están debajo del subtítulo.
Fue tan fácil que casi me da vergüenza no haberlo pensado antes.
En #header { añadí esta línea

background:url("la dirección de las estrellas") repeat-x bottom;

(La de arriba está colocada en el background de #wrap { )
Y ahí están. Brillando como si estuvieran en el mismísimo cielo.

Añadir una propiedad al link del título de una entrada

El título de las entradas que hacemos tiene la propiedad de servir como enlace a la misma. Por eso, cuando pinchamos en él, la entrada se abre individualmente en la página. (Que lo haga en la misma ventana o no, es cuestión aparte).
Habitualmente, cuando pones el ratón en la zona que ocupa dicho título, éste cambia de color, demostrando, así, que es un enlace.
Pero en algunas plantillas he visto que no sucede. El título conserva el color que hayas elegido, pese a ser un enlace a la entrada.
Me sucedió ayer en la denim y lo solucioné añadiendo al CSS la propiedad necesaria para remediarlo, así que añadí este pedacito de código hacia el final de la zona de los post, encima de #post-footer {

.post-title a:hover {
color: $hoverlinkColor;
text-decoration: underline;
}

Y funcionó.
Lo de text decoration es opcional, si no te gusta que se vea el texto subrayado, con no añadir esta línea es suficiente.

Crear variables para la menubar

Ya habrás visto que tengo colocada una menubar en casi todos los blogs que tuneo y que le doy aspecto de botón a cada enlace.
Ayer estuve tuneando una nueva plantilla, la denim y se me ocurrió crearle variables para estos botones a fin de poder cambiarles el color desde la pestaña Fuentes y colores, en lugar de ir entrando a tocar el código cada vez que quisiera cambiarlos.
Así que me inventé una para el botón que se ve normalmente y otra para el botón cuando le pones el ratón encima.
La única pega que tiene este último, es que no ves el cambio en Fuentes y colores cuando le pones el ratón encima, cosa que si que ves en Vista previa cuando estás en Edición de HTML de la plantilla, pero con guardar cambios, probar y volver a cambiar si no nos satisface está resuelto el problema.
También se me ocurrió, ya que estaba liada, añadirle una variable más para el fondo del blocquote.
Si te apetece hacerlo, el sistema es muy simple. Entras en Diseño/Edición de HTML y, en la sección de Variables, añades este código en alguno de los grupos de colores

<Variable name="botonmenubarColor" description="Boton Menubar
Color" type="color" default="#cccccc" value="#cccccc">

Cambiando lo de botonmenubarColor y Boton Menubar Color por las definiciones que quieras puedes añadir tantas variables como se te ocurra.
En color "default" pongo habitualmente ese #cccccc que es un gris clarito, así en vista previa veo como queda al añadirlo a algún sitio. Como luego lo podré cambiar desde Fuentes y colores no me preocupa.
Por ponerte un par de ejemplos de definiciones, al botón cuando le pones el ratón encima lo denominé botonmenubarBgColor / Boton Menubar Background Color y al fondo del blocquote blocquoteBgColor / Blocquote Background Color.
Fíjate que se escriben de dos formas en cada definición. La primera es el nombre que le das a la variable y se escribe todo junto, la segunda es la descripción de su función y se escribe cada palabra por separado y en mayúscula.
El nombre de cada variable es lo que luego colocaremos en el código CSS así:
color (o background-color) : $botonmenubarColor;
Y tras hacer vista previa y guardar plantilla si todo funciona correctamente, veremos el nuevo color en Fuentes y colores.

Imágenes o texto en movimiento

Acaban de preguntarme como se hace para que algo se mueva en un elemento, como por ejemplo los botones de Más blogs de trucos, pero aplicado a un elemento de texto.
El sistema es el mismo en ambos casos.
Añadir elemento de página, ya sea HTML/Javascript, ya sea Texto.
En el primer caso, pegar los códigos de los botones o de las imágenes que se van a mostrar y poner este código al principio de todo.

---

<marquee scrolldelay="100" direction="up" onmouseover="stop()"
onmouseout="start()" scrollamount="2">

En el segundo caso, escribir el texto que quieras, pinchar en Edición de HTML y pegarlo antes del texto.
En ambos casos pegar esto </marquee> al final.
---

El 100 que está entre comillas define la rapidez de lo que se va a ver. A mayor cantidad menor rapidez, así que si quieres que vaya más lento, con aumentarlo es suficiente.
El up entrecomillado define la dirección. Si lo cambias por down irá hacia abajo, por left irá hacia la izquierda y por right hacia la derecha. Aunque hacia abajo y hacia la derecha no resultan cómodos para leer.
Si son imágenes y las haces ir hacia un lado, puede que salgan en varias filas. Cuando averigüe como hacerlo para que no suceda ya actualizaré la entrada.

Tres columnas en el pie de página

No se si has bajado hasta el final de esta página. Si lo has hecho habrás visto que hay allí 3 columnas más encima del pie de página "normal".
Hace días que lo tengo colocado, casi desde que Rosa (como no) publicó el truco y voy a contártelo por si te apetece ponerlo en práctica en tu blog.
Resulta muy útil si tienes una o dos sidebars muy llenas, para descongestionarlas un poco. Como ves yo las utilizo para colocar los "chivatos", algunos logotipos y otras tonterías, de este modo las sidebars no se alargan más que las entradas.

---

¡Vamos a ello!
Para empezar, si tienes algo colocado en el pie de página original, alguna imagen o algo así, debes apartarlo. para ello es suficiente con que lo coloques momentáneamente en la sidebar, ya volverás a ponerlo donde estaba.
Ahora entra en Diseño/Edición de HTML y sin expandir artilugios busca, casi al final, este código

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Aunque no todas las plantillas son exactas, la línea que nos interesa, la que está resaltada en negrita, si debería estar en todas.
Una vez localizada, sustituye dicha línea por este código:

<div id='footer-columna-contenedor'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width:30%; float: right; margin:0; text-align:left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#6633FF' width='90%'/>
</p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2'locked='false'title=''type='Text'/> </b:section>
</div>
<div style='clear:both;'/>
</div>

Fíjate que hay un 2 que he remarcado en rojo entre el código azul. Si tienes más de dos elementos Texto, esos en los que escribir algo, cambia este número por uno más alto.

Ahora vamos a la parte del CSS y encima de ]]></b:skin> pegaremos estas líneas:

#footer-columna-contenedor {
clear:both;
}
.footer-columna{
padding:10px;
}

Vista previa y si la página carga bien, pues no verás cambios a simple vista, Guardar plantilla.
Una vez guardada, entra en Elementos de la página y allí verás las tres columnas, en el pie de página, cada una con su Añadir elemento de página correspondiente.
Si visitas a Rosa en esta entrada tiene una captura de como se ve.

Acceder a editar elementos si tienes dos columnas laterales y no los ves todos

Me acaba de suceder una cosa muy rara.
Una de las primeras cosas que hice cuando empecé este blog fue ponerle dos sidebars o columnas laterales.
Lo había intentado en el otro blog y el resultado fue un verdadero desastre, pues al querer cambiar los elementos de sitio, me desaparecieron la mitad de los que tenía, así que lo dejé correr y pensé que era mejor que empezara por aprender a manejar los códigos antes de liarla de nuevo y para ello nada mejor que abrir otro blog con la misma plantilla para hacer las pruebas.

Este que estás viendo.
Así que seguí paso a paso las indicaciones de Rosa y puse en éste las dos sidebars.
Uno de los datos que da Rosa para la modificación es que ensanchemos esta zona
body#layout #wrap4, body#layout #outer-wrapper { y la pongamos en 1000px.
Lo hice, con lo que la página de añadir elementos no se veía entera, pero como abajo de todo había una barra scroll, podía ir de un lado a otro sin problemas.
Pero hoy, no se a santo de qué, este scroll ha desaparecido, con lo que no tenía acceso a editar la nueva sidebar, ni la cabecera ni la menubar, pues el Editar de todos estos elementos está más allá de lo que se ve el entrar.
He probado a estrechar el layout, a ver qué pasaba y ¡bien!, de momento lo único que ha pasado es que veo todos los elementos del blog, aunque un poco más estrechos.
He dejado esta zona que menciono en 700px y esta otra body#layout #sidebar-wrapper { en 170px ya que la sidebar original salía debajo de las entradas.
Ahora se ve perfectamente todo y sin problemas para editar.

---

Atención:

Rosa me ha dejado un comentario. Por lo visto el problema no era solo mío, sinó que blogger ha eliminado este scroll del que os hablo.

Como ella dice, cada plantilla tiene sus propias medidas y descripciones, así que dejo aquí las correspondientes a las otras que tengo para que podais arreglarlo si os habeis encontrado con el mismo problema. Por cierto, las medidas de arriba corresponden a la Harbor

---

Tic-tac: body#layout #outer-wrapper,body#layout #content-wrapper { width: 740px;

---

Rounders: body#layout #outer-wrapper { width: 730px;

---

Denim: body#layout #header { width: 750px;

---

Thisaway, Scribe, Dots y Mínima: No tienen una medida añadida. Si les habeis colocado una segunda sidebar, buscad la zona que contenga la palabra layout y un width y rebajad la cantidad hasta los 750. Guardad plantilla y echad una ojeada a ver que tal se ve.

---

He mirado los otros modelos que no he mencionado y por lo que he visto tampoco tienen, de origen, medida añadida a la zona de los layouts.

Por supuesto ignoro qué medidas pueden tener las plantillas que no pertenecen a blogger, pero que se pueden colocar, aunque, imagino que si dejais esta medida en esos 750px más o menos, no tendreis demasiados problemas.

¡Suerte!

Blocquote en la plantilla Harbor

Llevaba días intentando conseguir algún artilugio o código que me permitiera destacar de alguna forma los códigos que teneis que copiar para realizar los trucos, pero no me convencía nada de lo que probaba.
Hoy he encontrado en uno de los sitios que he visitado una variante del código del blocquote, pero ¡sorpresa! la plantilla harbor no tiene definida esta propiedad en el código, así que se me ha ocurrido pegarla desde otra plantilla a ver qué pasaba.
Y ha funcionado, como podreis apreciar.
Así que si tu plantilla es ésta y quieres resaltar una parte del texto, puedes añadir al CSS, en la zona de /* Posts este código (yo lo he colocado encima de .post-fouter { )

.post blockquote {
margin:1em 20px;
padding:5px 0;
background-color:#ffffcc;
border-width:2px 0;
}
.post blockquote p {
margin:.5em 0;
}

Una vez pegado, y tras hacer Vista previa para asegurarte de que la página carga bien, ya puedes guardar plantilla.
A partir de este momento, cada vez que quieras resaltar o destacar una parte de una entrada tan solo tendrás que seleccionarla y pinchar en las comillas que tenemos en la barra de herramientas.
Puedes cambiar el color que saldrá de fondo, o ponerle un marco añadiendo
border: solid 2px #cccccc; (ya sabes que lo que está en verde es variable).

---

Usar imágenes para enlazar y hacer que se abran en otra ventana

Hace tiempo hice esta entrada en la que expliqué como poner una imagen que sirva de link o enlace, de manera que al pinchar en ella vayamos a parar a otra página.
Puse esta explicación al final de todo y como la entrada es muy larga, pues trata de como usar las imágenes para varias cosas, he pensado que sería interesante separar esta parte.
Si quieres poner una imagen que sirva de enlace a otro sitio has de poner un código, ya sea en un elemento HTML/Javascript, en la barra lateral, o en una entrada. (En este caso deberás escribir el código directamente pinchando en la pestaña Edición de HTML del escritorio de entradas).

---
El código a colocar es éste:

<div align="center"><a
href="la dirección de la página a la que quieres que se llegue" target="_blank"><img border="0" src="la dirección de la imagen que se
ve"/></a></div>

---

Vamos a analizarlo:
Con <div align= (puede ser right, center o left)> le dices la posición que va a tener en el elemento o en la entrada. Si no le pones esta parte del código la colocará a la izquierda por defecto.
En el caso de que no se lo pongas tampoco has de poner el </div> del final.
Con target="_blank" le dices que abra el enlace en otra ventana.
Con border="0" le dices que no le ponga margen a la imagen.

---
Notas:

Si colocas un código de esos desde otra página, (a veces ponemos imágenes que enlazan a otros sitios cuyos códigos nos proporcionan ellos), antes de guardar cambios, una vez pegado en un elemento, asegúrate que quien ha creado el código ha colocado lo del target="_blank", de lo contrario se abrirá en la misma ventana de tu blog, con lo que echarás del blog a tus lectores (y no a todo el mundo se le ocurre pinchar con el botón derecho para abrir algo en una ventana nueva, por si acaso).
Si tienes modificado el código de tu plantilla para que no ponga bordes a las imágenes, lo de border="0" aparecerá solo aunque no lo pongas. (Si aún no lo has modificado pero quieres hacerlo aquí te explico como).

No olvides poner comillas donde corresponde, ni quites o añadas espacios o no funcionará bien.

Un menú bajo la cabecera (o sobre ella).

Como podeis ver acabo de colocar unos botones, (o algo que parecen botones), con enlaces a algunas etiquetas, justo debajo de la cabecera.
Es el último truco que ha publicado Rosa y me ha gustado muchísimo por su sencillez, así que me ha faltado tiempo para colocarlo.
Hasta ahora, todos los códigos que había visto que permitían poner un menú ahí eran sumamente complicados y me daba pereza incluirlos en este blog.
Pero este ha sido como un regalo del cielo, (un cielo llamado El escaparate), que lo que hace es colocar un elemento encima o debajo de la cabecera, previamente configurado como lista de enlaces, en la que los links se muestran horizontalmente, en lugar de verticalmente.
Así que si quereis colocarla en vuestro blog, paso a explicaros como hacerlo.

---
Plantilla/Edición de HTML. (No hace falta que expandais los artilugios).
Antes de empezar repasad la lista de widgets que haya en el código y fijaros cuantos linkList teneis.
Los vereis así:
<b:widget id='linkListX'...>
Donde X es un número y los puntos suspensivos el resto de la línea.

Dependiendo de la cantidad de listas de enlaces que tengais vereis 1, 2, 3, 4, etc. (en este blog había 11 antes de poner el código nuevo).
Cuando hayais encontrado el más alto, recordad, o apuntaros, cual es para colocar el número siguiente en el código nuevo. (Si teneis dudas, simplemente poned un número alto 30 o 50, por ejemplo).
Una vez hecho esto localizad esta línea del código:

<div id='header-wrapper'>

Teniendo en cuenta que dependiendo de la plantilla puede ser que diga otra cosa.
Por ejemplo en ésta (Harbor) pone outer-wrapper.
De todas formas, para guiaros un poco, tened en cuenta que suele estar debajo de

<body>

y encima de esto

<b:section class='header'...>

Si quereis que los "botones" aparezcan encima de la cabecera pegais el código encima de esta línea de arriba, si quereis que se vean debajo, lo pegais al final de este pedacito de código de aquí abajo.

<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Titulo de tu blog (cabecera)' type='Header'/>
</b:section>
</div>

Y este es el código que teneis que pegar ahí:

<b:section class='menubar' id='menubar'
maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkListX' locked='true' title='Menubar'
type='LinkList'/>
</b:section>

(Recuerda cambiar la X por el número que sea necesario)
Una vez pegado subes hacia la zona del CSS y justo encima de

]]></b:skin>

pegas esto

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li
{
float: left;
}
#menubar a:link, #menubar a:visited, #menubar
a:hover {
padding:
5px;
display:
block;
color:
#003399;
}
#menubar a:hover {
background-color: #CC3300;
}

---
Tal como está, los enlaces tienen siempre el mismo color y al poner el ratón encima, aparece un fondo rojo.
Puedes cambiar los colores de los links y hacer otros cambios que paso a explicarte.
Si quieres que el enlace cambie de color al poner el ratón encima, borra #menubar a:hover de la fila donde está de color violeta y en el último grupo, el que empieza por

#menubar a :hover{

añade esta línea

color: #(aquí el número del color que quieras, sin paréntesis);

Si quieres eliminar este fondo rojo que te digo que aparece, borra, en este mismo grupo, la línea background-color:#CC3300; o cámbiale el número si prefieres dejarlo pero con otro color.
Si quieres enmarcar los enlaces para que tengan la apariencia de un botón, como los de aquí, añade esta línea:
border: outset 2px # (aquí el número del color); [outset 2px le da este aspecto de relieve].
en la zona
#menubar li {
justo debajo de
float: left;
(No te olvides ningún punto y coma al final de cada línea que añadas).

---

Cuando hayas pegado el código, (los cambios puedes realizarlos más tarde), Vista previa.
No verás que haya cambiado nada, pues todavía tienes que configurar la lista de enlaces, pero si el blog carga bien, Guarda plantilla.
Entonces vas a Elementos de la página y verás que se ha añadido un elemento encima o debajo de la cabecera, (depende de donde lo hayas colocado), con el nombre Menubar. Pinchas en Editar y ya puedes colocar allí los enlaces que quieras que se vean.
Guarda cambios cuando termines y al ver el blog verás los nombres alineados ahí.
Puedes cambiar el orden en que aparecen pinchando en las flechas de subir y bajar, al igual que en las listas "normales", la diferencia es que aquí cambian de posición horizontalmente.

---

La estoy colocando en las plantillas tuneadas, y como cada una tiene sus características propias, aquí te dejo los enlaces a las explicaciones que corresponden a cada una.

Para ponerla en una rounders pincha aquí.

Para ponerla en una thisaway pincha aquí.

Para ponerla en la tic-tac pincha aquí.

Para ponerla en una scribe pincha aquí.

---

Acceder al álbum de tus imágenes

Cuando añades una imagen a alguna entrada, google no solo les otorga una dirección, además crea un álbum para almacenarlas, con la ventaja de que sus medidas son las originales, no como en las entradas, donde las reduce.
Para acceder a estas imágenes, a sus direcciones y a sus medidas, escribe esta dirección en la barra del navegador:
http://picasaweb.google.com/nombre/título/
Donde pone nombre has de poner la primera parte de la dirección con la que accedes al blog, lo que va antes de la @, así, por ejemplo, si accedes a editar tu blog como fulanito@gmail.com o fulanito@hotmail.com el nombre a escribir ahí sería fulanito.
Donde pone título has de poner el de tu blog teniendo en cuenta que si tiene más de una palabra has de escribirlo seguido, empezando cada palabra con mayúscula. Por ejemplo, este blog se escribe así: TuneandoElBlog.
Esto es útil cuando quieres poner un fondo en la cabecera de tu blog, pero si lo haces a través de Editar del elemento Título, no acaba de quedar bien y la imagen que quieres poner está en tu ordenador y no usas ningún alojador de imágenes.
Recuerda: Válido solo para imágenes sin movimiento.

Editado: 6-abril-2008

Como podreis ver en los comentarios, si esto no funcionara podeis acceder así:

http://picasaweb.google.com/home si teneis el blog abierto y entrareis directamente.

Un consejo: Pinchad en el icono que tengais en el escritorio, del explorador que useis y escribid la dirección en la barra blanca de arriba del todo, allí donde pone http://www.google.es (o lo que ponga si no sois españoles), de lo contrario si lo escribis en la ventana donde tengais el blog abierto este será sustituido por el álbum.

Haciéndolo como digo, seguireis viendo el blog y al mismo tiempo tendreis el álbum a la vista.

Localizar algo en el código HTML de tu plantilla

Para hacer algún cambio en la plantilla del blog hay que encontrar una zona concreta.
Todos los que hacemos blogs de trucos solemos poner la "frase" con que empieza la zona del código en cuestión, pero no siempre resulta sencillo encontrarla, incluso para quienes estamos más o menos acostumbrados a localizarlas.
Hay un truco que funciona muy bien, tanto con iExplorer como con Firefox, para localizarla sin dejarte los ojos en el código. Pulsa a la vez las teclas Control y F de tu teclado, (Ctrl+F).
Con iExplorer te aparecerá una ventanita en la que pegar la "frase" guía.

Con Firefox te aparecerá debajo una franja en la que pegarla.

Si el código incluye mayúsculas y minúsculas, marca, en ambos casos, la casilla correspondiente.

Con explorer, le das a Siguiente y al momento verás la zona buscada, con la frase azuleada como si la hubieses seleccionado.
Con Firefox se sombrea de color verde, pero también aparece al momento sin pinchar nada.

Así que no olvides usar este truco si has de localizar algo.

(He dejado un aviso en la sidebar, en el módulo Organización, con enlace a esta entrada, para que se vea al entrar en el blog cuando ésta desaparezca de la página del incio).

Animar a dejar comentarios (2)

Acabo de descubrir una cosa.
Hace tiempo me rondaba por la cabeza una cuestión: Si para animar a dejar comentarios ponía, en el supuesto de que hubiera algún comentario, una palabra pluralizable, el resultado era incongruente. Me explico.
Supón que pones respuestas o comentarios, si solo hay uno, queda mal.
1 respuestas o 1 comentarios no es correcto.
Y si lo pones en singular pasa lo mismo. Cuando la cantidad es superior a uno, 2 respuesta o 2 comentario no queda bien.
Así que hoy he estado probando en El final del arco iris, (aprovechando que he entrado a quitar lo del No follow), a poner una tercera variante en el código, (la añadiré al código que hay en esta entrada), y ha funcionado en los dos sitios. Tanto en lo que se ve en la página principal, como pinchando en una entrada concreta.
Con lo cual el código queda así:

<b:if cond='data:post.numComments ==
0'>Agrega tu comentario
<b:else/><b:if cond='data:post.numComments ==
1'> 1 comentario, agrega el tuyo
<b:else/><data:post.numComments/>
comentarios, agrega el tuyo
</b:if></b:if></a>

Como ves tan solo has de agregar la línea que está en azul, cuidando de no olvidarte de añadir el </b:if> de cierre que también está en azul.

Vista previa, y si todo ha salido bien y la página carga, guardas plantilla.
El resultado lo verás en las distintas entradas que puedas tener con ninguno, uno y más de un comentario.

You comment I follow o como quitar el no follow

Acabo de ver esta entrada en La Bloguería y me he apuntado al carro del No follow.
¿Que qué es eso? Un comando que hay en nuestras plantillas para que cuando alguien deje un comentario en nuestros blogs, su link no sea tenido en cuenta en los buscadores. En dos palabras: ¡una putada!.
Me explico:
Cada vez que alguien pone un enlace en un blog, ya sea en una entrada, (como las dos que he puesto al principio de La bloguería), o en una lista de enlaces o links, (también llamado blogroll), este enlace hace que aparezcas en los buscadores.
Por ponerte un ejemplo sencillo:
Como sabes mi nombre es Eulalia, pero en las direcciones de mis blogs pone laeulalia, pues el nombre a secas no lo suelen admitir por estar ya pillado por alguien. Elegí este de laeulalia por una cuestión de lógica. Cuando alguien le dice a alguien que me diga algo suele decir: "Dile a la eulalia..."
Bueno, a lo que iba.
Esta cuestión de los enlaces es una guerra que en Live Spaces, (donde tengo un par de blogs más), se viene librando desde hace tiempo, sobre todo desde que los administradores de la plataforma decidieron que todos los usuarios fuéramos amigos y pudiéramos enlazarnos mutuamente a través de una solicitud de amistad, que añade la imagen del perfil a un elemento de nuestro blog. Pero ese enlace no funciona como tal fuera de spaces, no es visible, por ello algunos bloguers de spaces estamos intentando convencer a los demás de que es preferible enlazar los blogs que nos gustan en un blogroll, a añadirles al dichoso módulo.
Un día, para ilustrar el tema, me busqué a mi misma en google. Tecleé laeulalia en la barrita del inicio y le di a buscar en la red, (no el de voy a tener suerte, que solo muestra una coincidencia), el resultado de la búsqueda fue que mi nombre aparece en más de 700 sitios.
Algunos de estos enlaces son de un pueblo de no se donde, que por lo visto se llama así, pero el resto, y eran mogollón, pertenecían a sitios que de un modo u otro habían enlazado alguno de mis blogs o mi web.
Volviendo al No follow, pues, Google ha incrustado en los códigos de las plantillas una orden que evita que los links representados por los nombres de quienes comentan, aparezcan en los buscadores y por tanto éstos sean invisibles en la red.
Ignoraba este dato. (Son tantas las cosas que ignoro de este mundillo que se podría hacer un libro con ellas).
Pero hoy me he enterado. Así que me ha faltado tiempo para eliminar este pedacito de código de este blog, y en cuanto tenga dos segundos más lo elimino de todos los demás.

En la entrada que menciono al principio hay un link al Directorio de blogs do-follow, una página que habla del tema, donde, además, hacen un seguimiento de los blogs que eliminan esto y donde, además puedes conseguir un botoncito como este, en varios colores, para avisar a quien entre a tu blog de que su comentario va a significar un puntito más a su favor, pues su nombre, y por ende su blog, aparecerá en los buscadores cuando sea preciso.

Por cierto, casi se me olvida, para quitar eso del No follow, entra en Plantilla/Edición de HTML expandes artilugios y localiza este código, (está cerca de donde cambias lo de 0 comentarios)

<dl id='comments-block'>
<b:loop values='data:post.comments'var='comment'>
<dt class='comment-author'expr:id='"comment-" +
data:comment.id'>
<a expr:name='"comment-" +data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'> <data:comment.author/></a>

y eliminas lo que está en azul dejando el signo > pegado al apóstrofe.
Vista previa, y si carga bien, pues no notarás cambio alguno, guarda plantilla.

Ocultar blogs y convertir un blog en una pseudo-web

Lucieta me ha planteado una cuestión. Ella tiene un blog que usa como diario, aunque también quiere poner en él fotos y otras cosas, pero no desea mezclar conceptos. Quiere que su blog sea su diario y que con enlaces, se puedan ver las fotos en otra página.
Hace unos días otra persona me planteaba, via mail, una cuestión parecida.

Un blog con varias páginas y que las diferentes páginas tuvieran el mismo fondo.
El problema es que este tipo de funcionamiento es propio de las páginas web, no de los blogs. Los blogs son sitios de página única, aunque cada entrada funcione como una página independiente, pero hay una solución de continuidad en él cuando entras.
La solución está en tener más de un blog, uno que sería considerado la página principal y otros a los que acceder a través del principal, a los que llamaré subalternos y configurar el blog principal y los subalternos de la misma manera, con la misma plantilla y el mismo fondo en todos, a fin de crear una falsa página web. Incluso podemos ponerles nombres parecidos, aunque esto es secundario, (mi web real tiene más de 20 páginas y cada una tiene un título distinto), pero lo que si que es recomendable es que sus direcciones sean lo más parecidas posible y que incluyan alguna palabra que defina su uso.

Pero ¿como hacer que los subalternos no se vean en el perfil? Es muy fácil.

En el panel, debajo de la foto, verás este enlace: Editar Perfil.
Si lo pinchas, además de poder modificar los datos que se muestran, también puedes decidir qué blogs se van a mostrar a quien entre en nuestro Perfil.

Al pinchar en esto de Seleccionar los blogs que desea mostrar, irás a otra página donde hay un listado de todos los blogs que hayas abierto con la misma cuenta o dirección de correo.
Allí puedes marcar cuales quieres que se muestren. Los que no marques no se verán en el Perfil.
Te dejo, como ejemplo, la lista de los mios.

Como puedes ver hay marcados tan solo tres. Son los que ves si pinchas en mi Perfil. A los subrayados en rojo puedes acceder desde la barra lateral de este blog, son los que ya he tuneado. Los subrayados en azul son los que tengo pendientes. Cuando los haya arreglado pasarán a la lista de enlaces, pero seguirás sin verlos en el Perfil. El del recuadro verde es el que uso para hacer pruebas en las plantillas cuando me dejais alguna consulta.
También podeis hacer que esos blogs no aparezcan en las búsquedas, (los que aún no he arreglado, de momento no aparecen en ningún sitio), para ello basta con que en Plantilla/Configuración/Básico, marqueis NO a las dos preguntas que hay referentes a este tema: ¿Deseas añadir tu blog a nuestras listas? y ¿Deseas permitir que los motores de búsqueda encuentren tu blog? (por defecto está configurado el SI). Esto hará que tan solo se entre a ellos a través del enlace en el blog principal.

Aunque esta opción queda a vuestro criterio.

Cambiar el fondo del blog

Cuando alguien entra aquí, el "Chivato" que hay al final de todo me dice por qué vía lo ha hecho.

Si ha entrado desde otro blog, o si ha hecho una búsqueda en google y éste le ha mostrado alguna entrada de aquí que contiene alguna palabra de las que ha escrito.

A veces google acierta de lleno, la entrada responderá a la búsqueda, pero otras no muestra exactamente lo que se está buscando. Eso es porqué yo he titulado las entradas de una forma concreta y, a lo mejor, el título que respondería a la búsqueda en cuestión no contiene las palabras escritas en la solicitud.

El título de esta entrada es un claro ejemplo de esto.

No es la primera vez que alguien escribe "como cambiar el fondo del blog" y google muestra mi entrada "Cambiar la plantilla por otra de blogger".

Y, claro, esto no es exactamente lo que se ha solicitado.

Por eso se me ha ocurrido que cuando eso suceda, haré alguna entrada titulándola con la frase usada en la búsqueda y, si ya he publicado el truco, dejaré en ella el enlace, a la entrada concreta.

---

Así que, si has llegado aquí en busca del modo de cambiar el fondo de tu blog, pero no la plantilla, encontrarás como hacerlo en estas entradas:

Fondo del blog (plantilla harbor), El fondo de la página (plantilla rounders), El fondo del blog (plantilla scribe), Modificar la mínima (punto 6), Cambiar el fondo del blog (Tic-tac), Cambiar el fondo del blog (thisaway) ,

En las plantillas que no están aquí mencionadas, cambiar el fondo del blog, o de la página, o de ambas partes, (pues son independientes), suele ser muy parecido y las zonas a modificar suelen tener denominaciones comunes.

---

Truco para saber qué has de cambiar (si no lo tienes muy claro):

En Plantilla/Edición de HTML, sin expandir elementos.

Antes de tocar nada haz vista previa.

Como abre el blog en otra ventana, borras una dirección de las que hay en la zona body o main wrapper y pinchas en vista previa. Miras qué ha cambiado y, en cuanto sepas qué modifica, le das a borrar cambios. Vuelve a pinchar en vista previa para poder comparar. Y así sucesivamente con todas las que haya. Cada vez que veas que has borrado la correcta, anota cual es y cuando estés totalmente segur@ de donde y como cambiará tu blog, cambia las direcciones originales por las de tu fondo personalizado.

En algunas plantillas también tendrás que modificar la zona llamada Sidebar wrapper pues, aparte de que también puede ser independiente, algunas tienen un fondo distinto al resto del blog.

Iré modificando (tuneando) otras plantillas, sobre todo las que resultan más complicadas, pero, de momento, espero que estas indicaciones te sirvan.

---

Nota

Si no tienes claro cual es tu plantilla haz esto: Pincha en la pestaña Plantilla y en Seleccionar plantilla nueva. La que esté marcada es la que usas, siempre y cuando sea una plantilla de blogger. Si no pinchas en ninguna diferente, no variará nada.

Solucionar un aviso que a veces sale en el HTML

No se si te habrá pasado, pero yo he picado varias veces.
Cuando añado la dirección de una imagen al HTML de la plantilla, a no ser que sea a cambio de alguna ya existente, a veces al darle a Vista previa no carga la página y aparece un aviso en letras rojas en el que me avisan que el End Tag es incorrecto (o algo parecido, mi inglés es más bien del tipo "chiringuito").
Bueno, a lo que iba, cuando escribo una dirección para que se vea una imagen suelo hacerlo así:

<img src="la-dirección-de-marras">

En las entradas y elementos de la barra lateral suele funcionar, pero en el HTML de la plantilla no. Eso es por que allí hay que escribirla así:

<img src='la-dirección'/>

(Remarco en rojo las diferencias).
A veces no pasa nada si en vez del apóstrofe pongo las comillas, pero si me olvido la barra inclinada (el End Tag) es cuando la lio.
Así que, ¡oido al parche! y no olvides ponerla si añades alguna imagen a tu plantilla.

Para que puedan suscribirse a tu blog y a tus comentarios

Anoche un amigo me pidió que le ayudara a poner un agregador para los comentarios de su blog.
Le prometí que hoy averiguaría como se hace y aquí está la respuesta a su petición.
Como siempre en casos de desconocimiento acudí a la fuente que utilizo, El escaparate, ¿quien si no?, (cada día me recuerdo mas a George Clooney y su ¿what else?, aunque él está mucho más bueno), pues Rosa explica las cosas muy bien y he seguido sus pasos, los cuales voy a relatarte.
---
Antes de empezar has de entrar en tu blog. Personalizar/Configuración/Feed del sitio y poner en Completo la primera opción de todas, Permitir feeds del blog. Pincha entonces en Modo avanzado y asegúrate de que también están en Completo las casillas correspondientes al feed de los comentarios. Si no fuera asi cámbialo y Guarda configuración. Cuando salga el aviso de que se ha guardado, no cierres la página, minimízala, pues volverás a ella.
Una vez hecho esto entras en FeedBurner, que según dice Rosa es el mejor que hay.
En su página de inicio te dan la posibilidad de que veas sus páginas en castellano. Para ello pinchas en Languages, arriba del todo a la derecha, y en la página que se abre seleccionas Español.
(No te van a traducir todos sus servicios, pero si los más importantes)
Una vez que entendemos lo que nos dicen, pinchas en Registrarse, pues lógicamente va a ser tu primera vez, (ya que si ya estás registrad@ esta explicación ya no te será útil).
Tras registrarnos, (ya sabes, nick, contraseña, e-mail, etc.) ya puedes empezar, sin necesidad de esperar a ningún mail de confirmación ni nada parecido. Simplemente pinchas en el botón que hay al final de la página.
Aparecerás en otra página donde has de escribir el título de tu blog.
Entonces sale una ventana en la que has de elegir qué quieres agregar, si el blog o los comentarios. Elige el blog, que ya estará marcado. Te proporcionarán una dirección. Cópiala y no cierres todavía esta página, minimízala, que también volverás a ella.
Ahora levanta la de tu blog (aquella que te he dicho antes que no cerraras) y pega en la casilla Publicar URL redireccionada del feed lo que has copiado que será algo así, aunque con el título de tu blog, http://feeds.feedburner.com/TuneandoElBlog (ésta es la de éste). Guarda configuración y vuelve a minimizar tu blog.
Regresamos a FeedBurner y pinchamos en Mis feeds, (arriba a la izquierda, en letra pequeña, junto a una casita). En la página donde aparece el feed de tu blog, escribe nuevamente la dirección del blog en la casilla que hay debajo del título pero añadiendo algo. Ha de quedar así:

http://tu-direccion.blogspot.com/feeds/comments/default?alt=rss cambiando lo que está en verde por la dirección de tu blog.
Como no parece que se puedan colocar dos direcciones en la casilla de Configuración de nuestro blog, al menos nada indica que se pueda hacer, (ya sabes, eso de si hay más de una sepáralas con comas, etc.), tendrás que poner un elemento en la barra lateral para que la gente sepa que puede suscribirse a esas dos opciones.
Así que vamos a montar el elemento de los feeds.
En la página de feedburner pincha en Mis feeds, donde estárán los dos que has creado y pincha en el de arriba, que es el que corresponde a tu blog si has seguido el orden que te indico para darlos de alta.
Te abrirá una página donde, de entrada, un cartel te avisará de que tu feed es tan nuevo que todavía están jugando con las burbujas del plástico que lo envuelve. Jaja.
Arriba verás unas pestañas. Pincha en Publicize y en la nueva página pincha en Friendly Graphic, un link que verás en la parrafada en inglés que hay bajo el título Make it Easy to subscribe.
Eso te lleva a la página de los iconos.
Escoge el que te guste, lo lógico es que elijas el que ya viene de serie, pero si prefieres elegir un lector concreto allá tu y copia el código HTML que hay al final, en una caja.
Vuelve a tu blog, Plantilla/Elementos de la página, y agrega un elemento HTML/Javascript.
Pega este código y espera, no guardes todavía.
Aquí puedes modificar un poco el código para que, tanto la frase que sale junto al dibujito, como la que se lee cuando pones el ratón sobre el enlace, salgan en castellano, o cualquier otro idioma que no sea el inglés. Verás que en dos sitios pone "subscribe to my feed" (o algo similar). Bórralo, con cuidado de no borrar nada más que eso, y en su lugar escribe Suscribirse a mi feed. Después, casi al final del código pone Subscribe in a reader. Cámbialo por la frase que quieras que se vea en el blog. Guarda si quieres, pero si vas a añadir el de los comentarios, espera.
Vuelve a FeedBurner, pincha de nuevo en My Feeds y pincha en el segundo título de tu blog que se ve. (Ese es el de los comentarios).
Repite el proceso anterior, y cuando hayas pegado los dos códigos en el elemento de tu blog ya puedes dar por terminada la labor.
---
Verás que en este blog he añadido un icono que dice cuantos lectores tiene. (La increible cifra de 0 luce esplendorosamente en él). Lo he añadido para que veas que se puede hacer.
En la misma página donde has pinchado para obtener el dibujito del feed, en la columna de la derecha pone Feed Count.
Pinchando ahí verás los cuadritos esos. Puedes personalizarlo de color pinchando en el recuadro coloreado. Cada vez que cambias de color, un botón te enseña como se verá. Cuando estés satisfecho con el resultado le dices Activar y te darán el código para que lo pegues en el elemento de tu blog.
Cuando lo hagas, añades &label=lectores entre anim=0 o anim=1 (según el modelo que hayas elegido) y las comillas ", esto hará que en vez de readers se vea lectores en el botoncito.
¡Cuidado! Si prefieres otra palabra no ha de tener más de 8 letras o no se verá, por las medidas del botón.

¡Bueno! Espero haberme explicado bien, pero ya sabes que puedes consultarme cualquier duda que tengas mediante un comentario aquí o un mail.

---

Acabo de probarlo y tras hacer algún cambio que ya he modificado en la explicación previa, ahora funciona a la perfección.

---

Actualización:

He añadido el cuadrito ese para saber los lectores, pero el que corresponde a los comentarios.

(Hoy en el otro ya veo un 13, gracias, y el 0 está en el nuevo)

Para añadir éste has de seguir los mismos pasos que con el otro, pero desde la dirección del feed de los comentarios. Lógico ¿no?.

De todas formas, si estas explicaciones no te resultan suficientemente claras, aquí está el tutorial completo de como hacerlo paso a paso.

Cambiar el dijo de los comentarios

Otra cosa más que podemos cambiar es el dijo que aparece detrás del nombre de quien nos ha dejado un comentario, aunque solo verás el cambio al pinchar en una entrada.
Como podrás comprobar pinchando en cualquiera de las de aquí que tengan alguno, verás que tras el nombre o nick no pone dijo sinó ha dicho.
Para cambiar eso has de entrar en tu Plantilla/Edición de HTML/ y expandir plantilla de artilugios.
Una vez allí busca el sector de las entradas en la parte del HTML y localiza estas líneas

<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Borra la que está en verde y en su lugar escribe lo que quieras que aparezca en vez de dijo, sin llave alguna de esas<> , solo la frase o palabra que va a verse.

Haz vista previa. No verás el cambio, pero comprobarás si carga bien. Si es así Guarda plantilla.
Y en cuanto entres de nuevo en el blog, pincha en una entrada que tenga comentarios y ya verás el cambio.

Firma tus entradas o personaliza tu nombre al pie del post

Estaba buscando cositas por ahí y en el blog de Rosa, ¿donde si no?, he encontrado como hacer una firma personalizada para los posts. Me ha gustado la idea, así que he pinchado en la página correspondiente y ¡voila! ya puedo firmar las entradas que haga.

El sistema es super fácil.

Entras en esta página y pinchas en Create Signature. Te redirigen a otra donde hay dos opciones. La primera "Using the signature creation wizard" es la buena. (La segunda es para crear una copia exacta de tu firma mediante scaner y, aparte de que no me parece muy recomendable ir dejando nuestra firma real por estos mundos virtuales, Rosa dice que es de pago). Lo dicho, pinchas en la primera opción y te llevan a otra página donde has de escribir tu nombre o nick en el recuadro que pone Name. Le das a Next Step> (siguiente paso) y verás tu firma diez veces con diferentes letras. Hay hasta 120 fuentes distintas. Encima de las diez primeras están los botones para ir viéndolas de diez en diez. Eliges la que te guste más, marcando el botoncito que hay junto al número de fuente y le das a Next Step>.

En el paso 3 elegirás el tamaño. En el paso 4, el color. En el paso 5 eliges el ángulo o inclinación que quieras que tenga. Tras pinchar nuevamente en Next Step> te dirán que ya está, que ya la tienes lista.

Pero aquí te presentan varias opciones para guardarla.

En primer lugar verás un código que te recomiendan que copies por si te hace falta en un futuro.

Y debajo verás tres líneas pulsables.

En la primera te dicen si quieres animar la firma (no se si es gratis, pero me da que no).

La segunda sirve para descargarla en el pc. Al pinchar se abre una página similar en la que te dicen que la pinches con el botón derecho y le des a Guardar imagen como...

La tercera línea, "Want to use this signature?", que es la que he usado, es para que generen un código para la firma. Si pinchas ahi te sale otra página donde eliges que tipo de código deseas. Pulsas sobre HTML y te preguntan que tipo de código quieres. Hay dos opciones. La de arriba es para que salga solo la firma elegida. La de abajo para que salga con un saludo y una dirección, (tipo carta de negocios).

Pinchas en "Generate a code..." del cuadro de arriba y esta vez, por fin, aparecerá un recuadro con un código HTML. También te dicen que si quieres te explican como insertarla en tu blog. Ni caso.

Selecciona y copia este código, (ya sabes, pinchas dentro del recuadro con el botón derecho del ratón, en Seleccionar todo del menu que aparece con el izquierdo, en las letras azuleadas con el derecho y en Copiar del menú con el izquierdo).

Una vez copiado entra en tu blog y sigue este camino Personalizar/Configuración/Formato (por si acaso no cierres aún la otra página).

En esta página de tu blog es donde escoges el aspecto que van a tener las entradas. Abajo del todo hay un recuadro para que escribas cosas, junto al que pone Plantilla de Entrada.

Pega el código de tu firma ahí y Guarda configuración.

A partir de ese momento cada vez que hagas una entrada nueva la firma aparecerá sola.

La verás justo al principio de todo, pero el cursor estará situado antes de la firma, de manera que conforme escribas irá quedando al final de todo.

Rosa recomienda que si quieres que salga centrada o así lo escribas en el recuadro de Formato y eso he hecho, pero al empezar a escribir ha interpretado que la entrada entera iba a estar centrada y salía raro. De manera que lo he quitado y he ido escribiendo normalmente. No se si es que alguna de las actualizaciones de blogger ha desactivado algo o si he hecho algo mal, (que todo podría ser).

¡Ah! y si quieres quitarla en alguna de las entradas, solo tienes que pinchar en la pestaña del HTML antes de empezar a escribir, o en el momento que quieras, y borrar el código.

Pues ya sabes, ¡a firmar! Un beso.

P.S. Lo siguiente va a ser mirar si puedo colocarla en el pie del post en sustitución del Eulalia que sale con letras normales.

---

Pues como puedes comprobar si que se puede.

Has de localizar esta línea del código, (tras expandir plantillas de artilugios):

<data:top.authorLabel/><data:post.author/>

Está repetida dos veces. La que nos ocupa es la segunda, la que queda justo encima (o casi) del código que trata de los comentarios.

Una vez localizada, borras el segundo trocito

<data:post.author/>

y en su lugar pegas la dirección de tu firma del código que te dan.

CUIDADO! no el código entero. Solo la dirección de la firma.

El código entero está compuesto de dos partes. La primera a href es el enlace a su web, la segunda, img src es la dirección de la firma, que es la que has de pegar, llaves incluidas y sin el </a> final que sirve para cerrar todo el código que ellos te darán.