¿Como ves los elementos de la página?-Colocar Snap Shots

Cuando pinchas en la pestaña Plantilla se abre siempre en el apartado Elementos de la página, donde ves la disposición de todas las cosas que tienes en tu blog, tal como luego se ven en realidad.
Si tienes una plantilla original verás: arriba la navbar y la cabecera, a un lado la sidebar, en el otro las entradas y abajo el pie de página, (al que también puedes añadirle cosas), con todo lo que hayas ido añadiendo en el blog.
Si colocas una nueva sidebar, la verás a la derecha o izquierda de las entradas, dependiendo del sitio donde la hayas tenido que colocar, que va en función del lugar que ocupa la original.
Hasta aquí todo normal.
Pero hace tiempo me sucedió una cosa muy rara.
Añadí el Snap Shots a este blog, (es este botón verde que puedes ver en la columna de la izquierda).
Snap shots es lo que hace que aparezca una imagen de lo enlazado al pasar por encima de los links.
Cuando entras en su página, a la derecha hay un apartado que se titula Publishers/Bloggers. Pinchas en Get Started, eliges el color de los cuadritos que se van a ver, el idioma en el que va a mostrarlos, en mi caso elegí Spanish (Spain) y pinchas en Continue.
Apareces en una página donde efectuas el registro, email, url, etc, marcas el recuadro de aceptación de condiciones y continuas.
En la página siguiente encontrarás un botón para instalarlo automáticamente si eres usuari@ de blogger.
Pinchas en el botón Install Now y al momento aparecerá en tu blog el botón verde y los cuadritos junto a los enlaces.
Hasta aquí ni un problema. Lo he instalado en todos mis blogs correctamente.
Pero...
Pero, al instalarlo aquí, como ya he dicho, sucedió una cosa muy rara.
Las columnas de Elementos de la página se recolocaron y ahora aparecen todos en fila.
Arriba la navbar y la cabecera, le sigue un recuadro de Añadir elementos, a continuación todo lo que hay en la sidebar de la derecha, las entradas y los tres módulos fantasma que tengo, otro recuadro para añadir elementos, la columna lateral de la izquierda, otro recuadro más de añadir elementos y finalmente el pie de página.
No parece que sea ningún problema, al menos no me impide el buen funcionamiento del blog y casi prefiero verlo así, pues no he de ir moviendo la página en sentido horizontal, aunque a veces me resulta complicado saber en cual de los tres "Añadir elemento" he de pinchar para agregar algo en una de las columnas.

¡En fin!

Lo comento por si te encuentras con el mismo caso, que sepas que no pasa nada.

Comentarios visibles

Si quieres que se vean los últimos comentarios en tu blog, tan solo has de añadir un elemento HTML/Java script y colocar en él este código (todo lo que está en azul incluidas las letras subrayadas, que has de cambiar por la dirección de tu archivo y de tu blog)

Descargar archivo

<script style="text/javascript" src="dirección del archivo"></script>
<script style="text/javascript">

var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 50;
var standardstyling = true;

</script>

<script src="URL_DEl_BLOG/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>

cambiar URL_DEL_BLOG por la dirección de tu blog, y personalizarlo así:
en var numcomments puedes cambiar el 10 por la cifra de comentarios que quieras que se vean;
y en var numchars el 50 por la cantidad de letras que quieras que aparezcan.
Ten en cuenta que si en este último apartado pones pocas letras no se verá quien o donde te han dejado el comentario.

Nota: Aunque sale en castellano, no interpreta las eñes, que las cambia por enes, ni los acentos en las palabras que sirven de enlace, que las elimina.
Sin embargo sí coloca los acentos en las palabras que hayan dejado escritas.
(Puedes ver el ejemplo de ello en los comentarios de este blog).

Truco encontrado, como la mayoría de los que hay aquí, en El escaparate de Rosa.






El elemento invisible

Este truco lo encontré hace tiempo en El escaparate de Rosa y es muy útil para llenar el espacio vacío que queda al final de las entradas, sobre todo si tienes una sidebar muy llena.

Se trata de poner uno o más elementos de página, pero que tan solo serán visibles cuando alguien pinche en una entrada concreta, ya sea a través de Archivo, etiquetas, o de un enlace directo a una entrada.

Para que el elemento en cuestión sea visible solo en dichas ocasiones, primero has de añadirlo, darle un nombre, a fin de poder localizarlo, y colocarlo en el lugar donde quieras que aparezca.

Una vez hecho esto pincha en Edición de HTML y en Expandir elementos.

Localiza el código del elemento por su nombre, (suelen aparecer en el orden en que están colocados, así que no te será difícil localizarlo), y en su código, (que empezará más o menos así)

<b:widget id='LinkList4' locked='false' title='Más trucos para tu blog' type='LinkList'>

has de añadir esta línea

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>

y un poco más abajo esta otra

</b:if>

con lo que el codigo final resultante será más o menos éste (dependiendo de la plantilla)

<b:widget id='LinkList4'
locked='false'
title='Más trucos para tu
blog' type='LinkList'>
<b:includable id='main'>
<b:if
cond='data:blog.homepageUrl != data:blog.url'>
<b:if
cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'
target='_blank'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include
name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>

Haz Vista previa antes de Guardar y si ves que la página carga correctamente Guarda.

Verás , mejor dicho no verás, el elemento que hayas modificado. Tan solo será visible en los casos que he mencionado.

Puedes añadir, con este sistema tantos elementos como quieras, tan solo has de modificarlos uno a uno.

Si, por el contrario, quieres que el elemento solo se muestre en la página principal y no en las siguientes, añade este código:

<b:if cond='data:blog.homepageUrl == data:blog.url'>

debajo de <b:includable id='main'> y añade

</b:if>

justo encima de </b:includable>

De esta forma el elemento solo será visible cuando alguien entre a tu blog, pero no si pincha en entradas siguientes o en alguna etiqueta,

Copiar y pegar de manera sencilla.

A menudo he ayudado a otras personas a hacer algún cambio en sus blogs, en directo, a través de msn.

Y a veces me he encontrado con quienes no se aclaraban demasiado con eso de seleccionar, copiar y pegar alguna cosa.

Así que voy a intentar explicar como hacerlo.

Si quieres copiar algún código, o texto, primero has de seleccionarlo.

Si lo que quieres copiar forma parte de una entrada, como en el caso del código que he dejado en la titulada: "Como animar a la gente a dejar comentarios", para seleccionarlo has de pasar el ratón por encima de todo el texto que quieras copiar, del primer al último signo, (sobre todo en los códigos que pueden incluir símbolos), manteniendolo pinchado.

Verás que, a medida que pasa, el texto se va remarcando en azul.

Cuando esté todo azul, pinchas en algun punto del mismo con el botón derecho del ratón y en el cuadro que aparece pinchas en Copiar, con el izquierdo.

Si el código está enmarcado, sistema que suelen usar las páginas que ofrecen utilidades para los blogs, bastará con que pinches dentro del recuadro con el botón derecho, y en el cuadrito pinches en Seleccionar todo, con el izquierdo.
Esta forma de seleccionar es muy útil en textos enmarcados muy largos, pues te ahorra ir repasándolos.


Una vez seleccionado verás que todo el texto se ha vuelto azul.
Al igual que antes, lo pinchas con el derecho y con el izquierdo pinchas en Copiar.


En ambos casos, después de pinchar en Copiar, el texto estará "guardado en tu ratón".

Para pegar: Colocas, pinchando, el puntero del ratón, (esta rayita que se mueve cuando escribes), en el sitio donde quieras poner lo que has copiado y pulsas a la vez las teclas Ctrl y la de la letra v de tu teclado, (lo que verás descrito en algunos sitios como Ctrl + v).
Verás que se pega automáticamente.
Y hasta que no copies otra cosa no se irá de tu ratón, con lo, en caso de error, es más fácil volver a pegarlo sin tener que volver a copiarlo.

Publicar códigos HTML

Como podrás ver he conseguido ¡al fin! publicar el código HTML completo para que puedas copiar y pegar si quieres utilizarlo.
Hasta ahora no encontraba la manera de hacerlo, pues si lo escribía tal cual el sistema lo interpretaba y no aparecía.
Pero ayer dando vueltas por los blogs de trucos encontré un enlace a Simple Code.
Esta es una página en la que "traducen" los códigos para que puedas publicarlos.
En ella hay unos recuadros. En el primero escribes o pegas el código tal cual, le das a un botón que dice Process y en el recuadro de abajo aparece el código tal y como has de escribirlo para que después, al publicar la entrada aparezca el código real y más abajo aparece un vista previa del código.
Y como una imagen vale más que mil palabras, aquí te incluyo una captura de pantalla para que veas a que me refiero.
El código que he escrito en el primer recuadro es el que se utiliza para centrar las imágenes.

Como puedes ver no es demasiado fácil recordar qué has de poner en cada sitio para que aparezca, sobre todo si el código es muy largo.

Quitar el marco a las imágenes.

Cuando añadimos una imagen en una entrada suele aparecer una línea que la enmarca.
Si quieres quitársela has de entrar en Plantilla/Edición de HTML y localizar esta parte del código

.post img {
padding:4px;
border:1px solid #cde;
}

cambiar el 1 por 0 y los bordes desaparecerán.

Truco encontrado en efecinco.

Como animar a la gente a dejar comentarios

A todos nos gusta ver que las personas que entran a leernos dejan sus opiniones.
Pero si solo ven un escueto "x comentarios", quizás eso no anime demasiado a dejarlas.
Puedes hacer que eso cambie.
Para ello, localiza en el código HTML de tu plantilla esta sección: (has de expandir las plantillas de artilugios para encontrarlo)

---

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

---
Y cámbiala por ésta que ves aquí.

---

<span
class='post-comment-link'>
<b:if cond='data:blog.pageType !=
"item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<b:if
cond='data:post.numComments == 0'>Agrega tu
comentario<b:else/><data:post.numComments/> comentarios, agrega el
tuyo</b:if></a>

</b:if>


</b:if>


</span>



---
He remarcado en verde las frases de ánimo, para que sepas donde puedes poner tus propias palabras. Por ejemplo, en lugar de Agrega tu comentario puedes poner: Se el primero en opinar, o algo parecido y en comentarios, agrega el tuyo, puedes poner: opiniones, ¡agrega la tuya! o cualquier otra frase que ligue con lo que hayas puesto antes.

Recuerda hacer Vista previa antes de Guardar plantilla.

Truco encontrado aquí.

---

Editado Domingo 27 de enero de 2008

Hace un par de dias quise cambiar esto en uno de mis blogs.

Pero en lugar de borrar el trocito de código y pegar el nuevo en su lugar, me limité a variar los datos que los diferencian, que en principio son estos:

Quitar lo de

1 <data:top.commentLabel/>

cambiar el primer 1, el que aparece antes de > por un 0 y en el lugar de este código escribir lo que quieres que aparezca y quitar lo de

<data:top.commentLabelPlural/>

y escribir en su lugar la frase que quieras.

Lo hice, hice vista previa, la página cargaba bien, pero no había cambiado nada.

Me extrañó, pues este código funciona bien y no había hecho nada mal, pero como era muy tarde y se que a veces los códigos de una plantilla puede que no funcionen en otra, lo dejé correr. Borré cambios y me acosté.

Pero hoy he vuelto a hacerlo y me he dado cuenta de dos cosas.

Que lo había hecho bien, pero en el lugar erróneo y que puedes cambiar eso, no tan solo en lo que se ve en la página principal, sinó también en lo que se ve cuando pinchas directamente en una entrada.

Porqué mi primer intento en el otro blog lo había realizado en esta segunda parte del código, que está un poco más abajo en la misma zona del HTML.

Así que ya sabes. Si vas a poner en práctica este truco, puedes hacerlo en los dos sitios donde veas esto de numComments ==

CUIDADO

En la segunda parte no has de cambiar el código. Limítate a variar lo que explico en esta acualización, borrando este pedacito de código e incluso los dos puntos del final, pues de lo contrario los verás escritos.

Vista previa, para asegurarte que funciona y guardar. Una vez guardado pincha en una entrada y verás el cambio (no se puede pinchar en vista previa)

---

Reeditado: Sábado 9 de febrero de 2008

Como digo en esta entrada que acabo de hacer, puedes añadir una línea a este código para diferenciar la cantidad de comentarios. Si solo hay uno, o si la cantidad es superior a uno.

Para ello has de añadir esta línea, entre la que indica que no hay ninguno y la que indica que hay más de uno.

<b:else><b:if
cond='data:post.numComments == 1'> 1 comentario, agrega el
tuyo

y añadir un </b:if> al final, antes de </a>

Puedes hacerlo en los dos sitios. Lo acabo de hacer en este blog y funciona. Y ahora voy a apañar los otros.

Vista previa y Guardar plantilla.

Los variables (fuentes y colores)

Todas las plantillas tienen unas variables, en el código, para poder personalizar los colores de serie.

Son los Variable name, que podemos ver al principio al pinchar en Edición de HTML en la pestaña Plantilla.

Algunas tienen más variables que otras, por ejemplo: la mínima tiene 11 variables, la denim 14, o la dots, que tiene 13.
Habitualmente cada variable corresponde a una parte del blog, pero hay secciones que las comparten.
Así, por ejemplo, en la dots, el variable del color del título del post se aplica también a algunos enlaces.
---
Un pequeño inciso acerca de los enlaces:
Los links, o enlaces, suelen tener 3 definiciones, a:link, a:visited y a:hover.
El primero, a:link, define el enlace al ser insertado, a:visited, define el enlace en el que ya se ha pinchado y a:hover define al enlace cuando ponemos el ratón encima, pero sin pincharlo.
También hay que tener en cuenta que blogger distingue entre enlaces a otros blogs o sitios suyos, incluido nuestro propio blog, (que interpreta como enlaces visitados), y a otros sitios que no sean blogger, así en una lista de links puedes ver enlaces a dos colores.

---
En la mayoría de plantillas alguno de estos tres colores se derivan de otras variables.
Esto se puede modificar, añadiendo variables a nuestra plantilla.
Siguiendo con el ejemplo de la dots, si quisiéramos que el color de los enlaces fuera particular en cada caso, deberíamos añadir alguna variable al código HTML.
Para ello miramos en el código cuantas de estas variables hay, que contengan la palabra link y vemos que hay dos: linkcolor y vlinkcolor.
Nos faltaría, pues, la variable de hovercolor.
Si quisiéramos que ésta formara parte de la lista de Fuentes y colores, bastaría con añadir al código la variable correspondiente.

Para ello copiamos una de las anteriores, (por ejemplo vlinkcolor) y la pegamos justo debajo de si misma.

Cambiamos vlinkcolor por hoverlinkcolor y Visited por hover
Sería así: (esta es la variable original)

<Variable name="vlinkcolor" description="Visited Link Color" type="color" default="#885" value="#888855">

(y así quedará al modificarla)
<Variable name="hoverlinkcolor" description="Hover Link Color" type="color" default="#885" value="#33ff00">
El número de seis cifras corresponde al código hexagesimal de colores, que puedes encontrar aquí.
Después buscamos en el código, algo más abajo, la orden para que esta variable se aplique y en la zona de Links encontramos ésto:
a:hover { color:$vlinkcolor;
que cambiamos por ésta
a:hover { color:$hoverlinkcolor;
---
De igual manera podemos añadir variables a otros sectores que compartan color.

Lo único a tener en cuenta es que cada variable tenga su propia definición, por ejemplo, si quisieras que el texto de la barra lateral tuviera un color propio, tendrías que crear la variable sidebartextcolor, así:

<Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#663" value="#33ff00">

y añadir en el primer bloque de Sidebar content la orden

color:$sidebartextcolor;

debajo de la ya existente que indica el color del título de los elementos.

---

Finalmente, tras hacer vista previa y ver que todo funciona a la perfección y el blog carga correctamente, puedes guardar plantilla y en Fuentes y Colores encontrarás las nuevas funciones para que puedas cambiar esos colores desde ahí.

---

Editado: 9-Abril-2008

Como veo que os interesa el tema, pero quizás le falten explicaciones a la entrada, este fin de semana haré un lista de zonas a las que es posible añadir una variable, como definirla y como y donde poner el código de la orden, concretando, además, las diferencias entre plantillas a la hora de colocarlas.

Abrir los enlaces de las listas en otra ventana

Hace días vi este "truco" en El escaparate de Rosa.

Este fin de semana iba a probarlo y a dejar la explicación, mencionando su origen, pero esta noche me ha llegado un comentario preguntándomelo, así que he ido al blog de Rosa y he probado sus instrucciones en uno de mis blogs.

Una vez comprobado que funciona, aquí están.

---

Has de ir al código HTML de tu plantilla, expandir plantilla de artilugios y buscar la descripción del elemento de enlaces, por su título, (si no tiene ponle uno antes de empezar).
El código empezará así:

<b:widget id='LinkList1' locked='false' title='el titulo de tu lista' type='LinkList';>

ves bajando despacio hasta que encuentres esta línea para añadir, en esta línea, lo del target="_blank"
<a expr:href='data:link.target' target='_blank'>

Fíjate que entre target' y target= hay un espacio, si lo olvidas no cargará bien el código.
Haz vista previa antes de darle a guardar plantilla y si ves que el blog carga bien Guarda.

---

Elementos del blog

Cuando pinchas en Plantilla apareces en esta página. Es la que sirve para organizar el blog.
Fíjate que he remarcado todos los sitios en los que puedes pinchar de los elementos que componen tu blog.
Porqué en principio, todos ellos son modificables.
Algunos, más, otros menos, pero si hay un Editar, algo podrás cambiar.
De origen el blog sale con los elementos que ves aquí.
La navbar, o barra de navegación, la cabecera, las entradas, el archivo y los datos personales o Perfil.

También hay unos recuadros punteados en los que pone Añadir un elemento.
Puedes añadirlos en la sidebar, o barra lateral, en la cabecera, con lo que ocuparán toda la página, al pie de página, e incluso encima y/o debajo de las entradas.

Para moverlos de sitio solo tienes que pincharlos y arrastrarlos.
Cuando encuentran un lugar donde poder quedarse, dicho lugar cambia de aspecto y verás un recuadro punteado con el fondo blanco.
Como puedes ver es ésta imagen, los dos módulos han variado su posición.

Cada vez que cambias un elemento de sitio has de darle a Guardar, un botón naranja en la parte de arriba de la página. (En la imagen superior puedes verlo desactivado).

Después te saldrá un aviso de que tus cambios se han guardado y al lado un Ver blog.

Ver blog lo tienes también arriba del todo.

La diferencia entre las dos opciones es que, en la de arriba, la que está junto a las pestañas, el blog se abre en la misma ventana.

En la que aparece al cambiar alguna cosa, se abre en una ventana nueva, (aunque a veces esta opción no funciona demasiado bien, sobre todo en la scribe, si has cambiado muchas cosas del código).

En otras entradas iremos viendo como hacer otros cambios.

Cosas que pueden serte útiles

Estoy colocando en los blogs que he tuneado enlaces a sitios que te pueden ayudar a tunear el tuyo.

Encontrarás fondos, en un álbum que subí a google con todos los que he ido coleccionando, dibujos, en otro álbum que tengo en el blog de msn y enlaces a sitios útiles.

Tanto en el álbum de fondos, como en el de dibujos, para saber la dirección, o url, de la imagen has de pincharla con el botón derecho de tu ratón, seleccionar Propiedades, que está al final del menú que se abre y en la ventana que se abrirá verás la dirección.

Ten en cuenta que en el blog de imágenes, el de msn, las direcciones son muy largas, así que no sueltes el ratón hasta que veas que ha terminado, (suelen tener 3 o 4 líneas), de lo contrario no se copiará bien y al pegarla no verías nada.

Te dejo un ejemplo. Es la dirección de la mariposa que sirve de enlace.

http://byfiles.storage.live.com/y1pVKail77lerOEXvdm0xepsqMQcTEssYbD4Q7SB36-VDLCdSzf4lngmmzalWo3BNhpYABMTasoCVg

Espero que te sean útiles.