Gracias a la última entrada de Francisco en Blog and Web, acabo de enterarme de un paso más de Blogger en la mejora de su servicio, en este caso en los comentarios de nuestros blogs.
Podemos usar ya el sistema de identificación libre (Open ID) en nuestros comentarios, así si quién nos deja un comentario en el blog tiene su blog publicado en otra plataforma, por ejemplo, Wordpress, podremos ver su blog a través del comentario.
Como bien dice Francisco, hasta ahora eso no era posible, así que es una considerable mejora que nos permitirá una mayor y mejor relación con el resto de la blogosfera.
[1]Entramos al blog desde Blogger Draft
[2]Vamos a "Configuración" - "Comentarios".
[3]En "Persona que puede realizar los comentarios" escogeremos la opción "Usuarios registrados - incluido OpenID".
[4]Guarda los cambios.
Nota
Tendremos en cuenta que usando esta opción no estarán permitidos en el blog los comentarios anónimos.
Actualización
En algunos blogs, incluido el mio, ya está operativa esta opción y además se puede comentar también como "alias" o "anónimo". Además ha sido automático, yo no he marcado ninguna opción, así que supongo que irá integrándose en los blogs de forma automática.
[+/-] |
Sistema de identificación libre en Blogger |
[+/-] |
Traductor del Escaparate (II) |
He estado recibiendo solicitudes para adaptar el traductor que estoy usando en El Escaparate y que ya había explicado antes como colocar en el blog, para usarlo en blogs con fondo negro.
[1] Colocaremos el mismo código que en el anterior post, con la diferencia de que la dirección (url) de la imagen con las banderas será otra, ya que esta tendrá el fondo de color negro.
<center><img src="http://img527.imageshack.us/img527/632/84056383at1qx3.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://elescaparatederosa.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>
</form>
[2] Añadiremos ahora unas líneas de código en la parte del CSS de nuestra plantilla, para conseguir que el traductor se vea como más nos guste.
/* Código del traductor -------- */
form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;
}
Ejemplo
Si dejamos este código tal como está, el resultado sería este:
Modificaciones
El código CSS está dividido en dos partes:
a) La que pertenece a la casilla donde se muestran las opciones para escoger idioma:
form#translateForm select {
background-color:#000;
color:#ddd;
border:1px solid #999;
}
background-color:#000;
Es el color de fondo de la "cajita" de selección, en este caso está en color negro (#000) pero podemos escoger el que queramos.
color:#ddd; Es el color del texto, está en un color gris clarito, pero al igual que antes, podemos cambiarlo.
border:1px solid #999; Es borde que rodea a la caja de opciones, aquí podemos escoger el ancho (1px), el color (#999) y el tipo de borde (solid, dashed, dotted)
b) Y la que pertenece a la del botón "Traduce":
form#translateForm input {
background-color:transparent;
color:#ddd;
border:1px solid #999;
Aquí los cambios que pueden hacerse son los mismos que en la parte anterior, con la única diferencia de que lo que modificamos afecta al botón de "Traduce".
Nota
Si añadimos el código con el CSS para el traductor explicado anteriormente (con el fondo blanco) también servirá para adaptarlo a nuestro gusto.
Actualización:
Botella al mar ha tenido la gentileza de compartir con nosotros la imagen de las banderitas con fondo transparente, de está manera se adaptará a cualquier color de fondo:
http://img126.imageshack.us/img126/1228/84056383at1qx3ry5.png
Publicado por Anónimo a las 14:11 h. Etiquetas: Gadget, Traductores
[+/-] |
Como subir un script a nuestro propio servidor |
A menudo usamos en nuestro blog "trucos" que dependen de un script externo, es decir, que no está colocado directamente en nuestra plantilla, sino que mediante un link, le "llamamos" cuando accedemos a nuestro blog para que se cargue y realice su función.
Esto es mucho mejor que aplicarlo directamente en la plantilla, ya que aligera considerablemente el "peso" del blog, pero tiene un inconveniente y es que si el servidor donde está alojado falla, el script no se carga y por tanto, no realiza su función.
Cuando somos muchos los que usamos un determinado script en nuestros blogs al mismo tiempo, alojado en el mismo servidor, esto suele dar lugar a que el servidor exceda su ancho de banda y no responda como debiera. Para evitar este tipo de fallos lo más recomendable es subir el script a nuestro propio servidor.
[1]- Descargar el script a nuestro PC.
Cuando en alguna página nos proporcionan un truco con el script externo, o queremos copiar un script del código fuente de una plantilla, el script se verá así, más o menos:
<script style="text/javascript" src="http://lejaniaimposible.googlepages.com/comentarios.recientes.js"></script>
Para conseguir el script copiamos su dirección, (que en el ejemplo sería http://lejaniaimposible.googlepages.com/comentarios.recientes.js), la pegamos en nuestro navegador y lo descargamos al PC.
Una vez allí podemos abrirlo y editarlo si es necesario.
[2]- Elegir un servidor propio para subirlo.
Hay bastantes servidores donde podemos alojar nuestros archivos, aunque en esta ocasión voy a recomendar Google Sites. Es gratuito y solo necesitamos colocar los datos de nuestra cuenta de Google para acceder. Pueden subirse cualquier tipo de archivos, incluidos por supuesto los scripts.
[3]- Sustituir nuestro script en el código, por el script original.
Es el último paso y será tan fácil como eliminar la dirección original del script y colocar la del nuestro en Google Sites.
Ya no tendremos problema con que el truco deje de funcionar, pues solo nosotros estaremos usando esa dirección, aunque siempre puede darse el caso de algún fallo en Google Sites, pero eso ya no está en nuestra mano el poder evitarlo...
¡Suerte!
Publicado por Anónimo a las 0:31 h. Etiquetas: Tutoriales
[+/-] |
Ensanchar la plantilla Mínima |
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Tendremos en cuenta que partiremos de una Mínima tal cual la proporciona Blogger, sin ninguna modificación anterior.
Voy a tomar las medidas para ello que considero más adecuadas para su perfecta visualización en distintas resoluciones aunque, por supuesto, cada uno puede aumentar o disminuir las mismas según considere oportuno.
[1] Vamos a la parte de Edición de HTML en nuestra plantilla. No hace falta que expandamos los artilugios.
En primer lugar localizaremos el #outer-wrapper { esto es, por así llamarlo, el "cuerpo" del blog, tendremos que ensancharlo para más tarde cuando hagamos lo mismo con el cuerpo de las entradas y la sidebar, estan tengan suficiente espacio.
Nos fijamos en la primera línea:
#outer-wrapper {
width: 660px;
Cambiaremos esa línea por width: 850px;
[2] Vamos ahora a ensanchar el cuerpo de entradas (main), buscamos un poco más abajo de lo anterior esto: #main-wrapper { y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;
31] Un poco más abajo vemos #sidebar-wrapper {, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;
[4] Esta parte no es imprescindible, pero según mi opinión, el blog gana bastante estéticamente si la cabecera (header) y el pie del blog (footer) tienen el mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper { y cambiamos la línea del width porwidth:850px; (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas.
Bajamos ahora por el código de la plantilla, hasta encontrar el #footer { y le ponemos también el mismo ancho que el blog: width:850px;
[5] Usamos la vista previa, y si todo ha ido según lo previsto, guardamos los cambios.
[Nota]
Si cambiamos las medidas usadas para ensanchar el width (ancho) de las entradas y la sidebar, tendremos en cuenta que la suma de los dos valores no deben nunca sobrepasar la anchura total del blog y, que tendremos que dejar, como en este caso, unos pixeles sobrantes lo que nos asegurará una distancia optima entre los elementos y, por tanto, una correcta visualización del blog.
Podéis consultar también como añadirle una nueva sidebar a la plantilla Mínima.
Publicado por Anónimo a las 1:49 h. Etiquetas: Plantillas, Trucos Blog
[+/-] |
Lista con viñetas personalizada |
Cuando redactamos una de nuestras entradas y usamos la lista de viñetas , si en nuestra plantilla no hay ningún código especifico para ellas, Blogger las mostrará así por defecto:
Para personalizar las viñetas en las listas de nuestros post y que se muestre un icono escogido por nosotros, delante de cada una, usaremos el CSS.
Iremos a la parte del HTML de nuestra plantilla y buscaremos la parte del CSS que se ocupa de las entradas:
/* Posts
----------------------------------- */
Y en esa zona, o debajo de esto mismo colocamos el código necesario para personalizar nuestras listas de viñetas:
.post ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}
.post ul li {
background:url("http://www.mena.com.mx/gonzalo/iconos/14x14x4/img/cubierto.gif") no-repeat 2px .25em;
margin:0;
padding:3px 3px 3px 20px;
margin-bottom:3px;
line-height:1.4em;
}
Guardamos los cambios.
A partir de ahora cada vez que pinchemos en el icono de la entrada para añadir una viñeta a nuestras listas, mientras redactamos la entrada, seguiremos viendo la viñeta que proporciona Blogger. Una vez publicada la entrada, será visible el icono elegido por nosotros.
Así quedarían nuestras listas si usamos el código anterior tal cual lo he puesto:
Dependiendo del tamaño del icono que queramos colocar, hemos de modificar el padding, es decir, la distancia del icono al texto. En esta parte del código:
padding:3px 3px 3px 20px;
Normalmente con aumentar o disminuir el último valor (20px) servirá.
Y no hemos de olvidar el cambiar la url en el código, por la url del icono escogido.
Una página con iconos muy apropiados para este fin es Stylegala
Publicado por Anónimo a las 0:24 h. Etiquetas: Plantillas, Trucos Blog
[+/-] |
Destacar los comentarios del autor del blog |
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
De la misma manera cuando un visitante ha dejado un comentario y vuelve a comprobar si le hemos respondido le será más fácil y rápido comprobarlo. :-)
Podéis ver el resultado en este mismo blog, mis comentarios tienen un color de fondo distinto al de mis visitas.
Empezamos!
Paso [1] Vamos a la parte de edición - HTML de la plantilla y expandimos los artilugios. Buscamos la parte del código que corresponde al bloque de comentarios y añadimos la parte que está en negrita:
<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>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Paso [2] Hecho esto subimos hacia arriba de la plantilla, a la parte del CSS y buscamos la zona de comentarios, en las plantillas Mínima, por ejemplo, veremos algo así:
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
Paso [3] Si la plantilla es la Rounders, por ejemplo, será algo como esto lo que hemos de encontrar:
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
En las demás plantillas será algo más o menos parecido, en realidad no tiene demasiada importancia el lugar, pero mejor que este más o menos por esa zona para evitar problemas de localización del código cuando lo necesitemos.
Paso [4] Una vez situados en la zona del CSS de comentarios, añadimos debajo del código de los ejemplos anteriores este otro:
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
background:#C3FDB8;
}
Esto hará que cuando dejemos el comentario en nuestro blog, este se distinga de los demás:
En estas líneas del código podemos hacer los cambios de color del fondo, grosor y color del borde:
border:1px dotted #254117;
background:#C3FDB8;
Publicado por Anónimo a las 3:21 h. Etiquetas: Comentarios, Trucos Blog
[+/-] |
Sand Dollar (añadir sidebar) |
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Aunque suelo decirlo constantemente, no está de más recordar, que las modificaciones en las plantillas que expongo en El Escaparate, están hechas "a mi manera", por lo tanto no siempre será la manera ideal de llevarlas a cabo, simplemente el resultado suele ser óptimo del modo que lo hago y por eso me atrevo a publicarlo, con el único fin de ayudar.
Tendremos en cuenta que vamos a partir de una San Dollar original, sin modificaciones anteriores.
Voy a ir paso a paso, siempre hacia abajo en la plantilla, para que sea más fácil de encontrar las partes donde haremos las modificaciones:
[1] Vamos a nuestra plantilla, y en la parte del CSS (recordad que es esa donde hay muchas llaves de estas {}, localizamos esta línea de código para situarnos:
#content-wrapper {
[2] Debajo del content-wrapper, encontraremos esto:
@media all {
dentro de esto vamos a necesitar cambiar algunos valores, nos tendrá que quedar así:
@media all {
div#main {
float:right;
width:52%;
margin-right: 30px;
margin-left: 20px;
padding:20px 0 10px 1em;
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Las líneas:
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
son las que hacen que se vean las barras horizontales punteadas de separación entre las entradas y las sidebar,(lo veréis abajo, en la "captura de la plantilla") si no queréis incluirlas las borráis y listo.
[3] Debajo justo de esa parte encontramos esto: div#sidebar {, donde también hemos de cambiar algunos valores, de forma que nos quedará así:
div#sidebar {
margin:0px 0px 0px 0;
padding:20px 0 10px 1em;
text-align:left;
float: left;
width: 20%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
[4] Llegados a este punto, hemos de añadir el CSS necesario para la nueva sidebar y lo pegaremos justo debajo del código anterior, quedará así:
}
div#newsidebar {
margin:0px 0px 0px 0;
padding:20px 0 10px 1em;
text-align:left;
float: right;
width: 20%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Como habréis observado es prácticamente una copia de la sidebar existente, simplemente hemos modificado algunos valores, tened mucho cuidado con no omitir ninguna llave {, pues no obtendríamos un resultado óptimo.
[5] Por último seguimos bajando en nuestra plantilla, dejamos atrás el CSS y llegamos al HTML, buscamos esto:
<div id='main-wrapper'>
y justo encima, añadiremos el nuevo código para que nuestra sidebar aparezca en "añadir elementos" de nuestra plantilla.
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
[6] Guardamos cambios y vamos a la plantilla para añadir un elemento dentro de la nueva sidebar, ya que ahora la tendremos ahí, pero estará vacía y no se verá en el blog hasta que no pongamos algo dentro.
Publicado por Anónimo a las 2:59 h. Etiquetas: Plantillas, Tutoriales
[+/-] |
ImgRed.com (evitando hacer Hotlinking) |
Muchas veces buscando una imagen adecuada para colocar en el blog, algunas personas suelen enlazar directamente la imagen elegida desde la página en la que está colgada. Este sistema es conocido como Hotlinking y es una práctica inadecuada ya que produce un consumo de banda extra en la web que aloja la imagen y, por tanto, estamos perjudicando a dicha web.
Para hacerlo de forma correcta y no perjudicar a terceros, deberíamos descargar la imagen a nuestro PC, subirla a un servidor gratuito (si no tenemos uno propio) y tomar su dirección (url) desde allí. Por supuesto esto nos llevará algo más de tiempo y trabajo, que podemos ahorrarnos usando ImgRed
Esta web nos ofrece la posibilidad de enlazar a la imagen sin robar ancho de banda en el servidor que la contiene. Para ello sólo hay que referenciarla añadiendo antes de la dirección, que se conserva tal como está, "http://imgred.com/".
La primera vez que se carga la imagen se copia en el servidor de ImgRed.com.
A partir de ahí se cargará siempre desde dicho servidor.
Ejemplo
Supongamos que vemos una imagen que nos gusta, por ejemplo, en Google, pinchamos sobre ella con el botón derecho y en propiedades vemos su url:
http://tbn0.google.com/images.jpg
Para mostrarla en nuestro blog sin caer en la nada recomendable práctica del Hotlinking, la colocamos así:
http://imgred.com/http://tbn0.google.com/images.jpg
Para usar este sistema en Blogger con mayor comodidad, podemos pegar el código en nuestra "plantilla de entrada" y cada vez que incluyamos una imagen en un post tendremos el enlace disponible, si no vamos a usarlo, lo borramos y listo.
Nuestra "plantilla de entrada" está en Configuración - Formato.
Fuente: Disquisiciones
Publicado por Anónimo a las 3:47 h. Etiquetas: Datos utiles, Utilidades Online
[+/-] |
Construir un menú con CSS Menú Maker |
En el blog Cabalas Virtuales me encontré con esta entrada donde Yolanda nos presenta un magnifico tutorial que seguro nos ayudará a crear un menú para nuestro blog sin complicarnos mucho la vida. Yo misma hice uno sin problemas en un blog de pruebas siguiendo las instrucciones de Yoli.
[1] Accedemos a la web de CSS Menú Maker y escogemos el menú que vamos a colocar en el blog.
Por ejemplo este y pinchamos en "Customize":
[2] Se abrirá una nueva pantalla donde veremos un ejemplo del menú elegido y justo debajo, ponemos el número de enlaces que tendrá nuestro menú y pinchamos en "Submit"
[3] Ahora tendremos que ingresar el Título para cada enlace y du dirección (url).
[4] Para comprobar como quedará nuestro menú, pinchamos en "Update your Menu" y podremos ver el menú con nuestros enlaces allí mismo y además en funcionamiento real:
[5] Una vez visto el menú en funcionamiento, si decidimos usarlo, pinchamos en "Generate Menu Code". Nos darán entonces dos opciones:
a)Usando la primera opción tendremos la posibilidad de descargarnos todo lo necesario para construir nuestro menú (html, css, imagenes e instrucciones de instalación) en un archivo zip.
b) Usando la segunda opción tenemos que copiar los códigos generados y pegarlos en nuestra plantilla:
CSS Code Es el código CSS de nuestro menú y hemos de pegarlo en nuestra plantilla justo encima de ]]></b:skin>
HTML Code Este es el código que tenemos que colocar en un elemento html de la plantilla y que luego moveremos debajo de la cabecera en el caso de que hayamos escogido un menú horizontal como el de mi ejemplo.
<ul id='menu'>
<li ><a href='http://http://elescaparatederosa.blogspot.com'>El Escaparate</a></li >
<li ><a href='http://http://cabalasvirtuales.blogspot.com'>Cabalas Virtuales</a></li >
<li ><a href='http://http://eternamentecabreada.blogspot.com'>Eternamente Cabreada</a></li >
</ul>
[6] Completados estos pasos descargamos el archivo con las imagenes del menú pinchando en "Click here to download Image files" Es una archivo en formato zip. que hemos de descomprimir para obtener las imagenes.
Subiremos las imágenes a un alojamiento gratuito o al mismo Blogger y pondremos la dirección de las imagenes en el código CSS del menú, es decir, el primer código que colocamos antes de ]]></b:skin> donde dice
background:transparent url("URL_DE_LA_IMAGEN") repeat-x top left;
En el caso del menú de este ejemplo, serán tres imágenes que no serán difíciles de colocar guiándonos por su nombre.
Enlace: CSS Menú Maker
Publicado por Anónimo a las 2:19 h. Etiquetas: Menus, Tutoriales, Utilidades Online
[+/-] |
Volver arriba en cada post y en pie de página |
Facilitará a nuestras vistas el poder "volver arriba", es decir, ir al inicio de la página desde cada post con un simple click, sin tener que andar usando la barra de scroll cuando terminan de leer un post.
Buscamos en el html de la plantilla esta parte, que es donde yo creo quedará mejor:
<p class='post-footer-line post-footer-line-1'/>
Y justo encima, agregamos esta línea:
<a href='#' title='Volver Arriba'>Ir arriba</a>
Justo antes de: <p class='post-footer-line post-footer-line-3'/> también quedaría bien, la colocación va en función de los gustos de cada uno.
También podemos usar una imagen, un icono pequeño sería lo adecuado, solo hemos de sustituir el texto "Ir arriba" por la url de nuestro icono: <img src="url del icono"/>
Este es el código que yo
Código
<!--Casita ir arriba -->
<a href='#' title='VOLVER ARRIBA'><img align='right' src='http://img66.imageshack.us/img66/1698/houserq1.png'/></a>
Nota
Lo que pongais en "title" es lo que se leerá al poner el cursor sobre el icono, en un pequeño cartel emergente.
La primera línea del código <!--Casita ir arriba --> la he añadido para una vez colocado en la plantilla poder localizarlo fácilmente si es necesario.
Volver Arriba al pie de página
Si queréis usar el icono al pie de la página además de en cada entrada o solo al pie del blog, colocamos este código en nuestra plantilla, casi al final de todo su código, antes de </body>:
<a href="#" style="bottom: 0px; position: fixed; right: 0px;" title="Volver Arriba"><img src="Url_de_la_imagen"/></a>
Publicado por Anónimo a las 2:14 h. Etiquetas: Plantillas, Trucos Blog
[+/-] |
Mostrar y Ocultar +/- |
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
En mi blog de pruebas lo he puesto en la sidebar con una lista de links, incluso pueden añadirse imágenes de enlace, o una imagen pequeñita como una flechita o algo así antes de cada link.
Lo he probado en una entrada completa ocultándola y funcionó, y también lo he probado ocultando parte de una entrada y resulta muy bien.
He usado el sistema para ocultar un trozo de texto acompañado de una imagen y tampoco me ha dado problemas.
[1-] Colocaremos este sencillo código en la parte del CSS de nuestra plantilla, por ejemplo antes de ]]></b:skin>:
.commenthidden {display:none}
.commentshown {display:inline}
[2-] Colocamos ahora este pequeño script justo antes del </head> de nuestra plantilla.
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
[3-] Donde queramos mostrar el efecto (un nuevo elemento, una entrada,etc.) hemos de colocar este código:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Título</a><br />
<div class="commenthidden" id="UniqueName"></div>
Lo que vas a mostrar/ocultar lo colocas justo antes del último </div> del código.
Si vas a mostrarlo en la sidebar con una lista de links, por ejemplo, el código a poner sería más o menos así:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Links amigos </a><br />
<div class="commenthidden" id="UniqueName"><a href="http://elescaparatederosa.blogspot.com"target="_blank">El Escaparate</a></div>
El resultado se verá así:
+/- Links amigos
Cuando pinchemos sobre +/- se abrirá la lista de links o lo que sea que hayamos puesto, cuando se vuelva a pinchar se recogerá.
¡Importante!
Donde dice "UniqueName" dentro del último código (fijaros que hay dos) lo sustituimos por una palabra cualquiera (no se mostrará en la plantilla) que no se esté usando en otro código de nuestra plantilla.
Si vas a colocar más de un elemento con este efecto, recuerda que no puedes usar la misma palabra.
Yo en mis pruebas para usar el efecto más de una vez, decidí dejar el "UniqueName" y al segundo elemento le añadí un 1 detrás "UniqueName1", al tercero un 2 "UniqueName2"... y sin problemas.
Visto en : BlogU
Publicado por Anónimo a las 1:06 h. Etiquetas: Links, Trucos Blog, Trucos Texto
[+/-] |
Libro de visitas para el blog |
Me pide Daniel en un email que de un vistazo a una página que se ha encontrado de casualidad para hacer un libro de visitas y que le de mi opinión al respecto.
En la mencionada página encontramos la posibilidad de crear un libro de visitas personalizado, tienen varios modelos para elegir, aunque todos destacan por su sencillez de formas y colores.
Lo que me ha parecido interesante es la facilidad para integrarlo en nuestro blog.
Vamos a la página de Samart Guestbook y después de pinchar en Sign up completamos los habituales pasos para el registro y una vez concluido pinchamos en Create Guestbook:
Nos saldrá entonces una pantalla en la que se nos avisa de que un email ha de llegar a nuestro correo con los datos del libro de visitas que acabamos de crear y, que mientras tanto, podremos acceder con un código temporal que nos facilitan:
Cuando introducimos el código, hemos de hacerlo manualmente, no sirve copiar el de arriba y pegarlo abajo, ya que nos dará error.
Nos darán entonces la posibilidad de escoger cuatro formas de mostrar en el blog el enlace que llevará a nuestro libro:
.Logo and text link
.Double text link
.Image link
.Text link
Me he quedado con las dos últimas porque creo que son las más adecuadas, con "Image link" mostraremos una imagen que al pinchar sobre ella lleve al libro y con "Text link" un texto que hace la misma función:
Una vez seleccionada esta opción, nos darán un código como este, que mostrará el enlace al libro de visitas con la imagen que veis abajo, para poner una imagen propia cambiamos la url del código en src= por la url de nuestra imagen:
<a href="http://users4.smartgb.com/g/g.php?a=s&i=g43-15330-19"><img alt="Guestbook" border=0 src="http://extras4.smartgb.com/b/gb_80x40.gif" width="80" height="40"></a>
El código que nos muestra está opción es un sencillo link,donde cambiamos el texto que dice"Guestbook", por nuestro texto, por ejemplo, "Libro de visitas":
<a href="http://users4.smartgb.com/g/g.php?a=s&i=g43-15330-19">Guestbook</a>
Libro de Visitas del Escaparate
Publicado por Anónimo a las 2:55 h. Etiquetas: Datos utiles, Gadget, Utilidades Online
[+/-] |
Menu Drop-down online |
Gracias a Hackosphere tendremos en minutos un sencillo menú drop-down.
Lo mejor de este sencillo menú, es que tiene la función de abrir los links en página externa.
[1] Ingresamos a la página y en la primera casilla "Default text (such as "Select a blog")" colocamos lo que queremos mostrar cuando el menú está cerrado, por ejemplo, "favoritos" "blogs amigos" o algo así.
[2] En Option Name colocamos el nombre que se verá como link. En Option Link colocamos la dirección a donde llevará el link.
[3] Pinchamos en Add opción (añadir opción)
Hemos de repetir estos pasos para conseguir tantos link como queremos colocar en el menú.
Cuando terminamos de construir nuestro menú, pinchamos en Add this menu to my blog" escogemos el blog en el que vamos a colocar nuestro menú y este se añadirá de forma automática, ya solo hemos de arrastrarlo a donde nos convenga.
Publicado por Anónimo a las 16:17 h. Etiquetas: Datos utiles, Links, Menus, Utilidades Online
[+/-] |
Imagenes sin link en Blogger |
Cuando subimos una imagen desde nuestro PC a una de nuestras entradas, Blogger por defecto le añade un link que hace que al pinchar sobre la imagen, esta se muestre en una página nueva a su tamaño real.
Para evitar esto podemos eliminar este link, de tal forma que si pinchamos sobre la imagen no pase nada, simplemente mostraremos la imagen como se ve en la entrada.
Ejemplo: (Pinchar en las imagenes para verlo)
Imagen con link
Imagen sin link
Una vez hemos subido la imagen a nuestro editor de entradas, en la parte del html, el código de la imagen que vemos es este:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/Rzg8hpE9uJI/AAAAAAAACjc/snhMorCEbtI/s1600-h/
Dibujo.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/Rzg8hpE9uJI/AAAAAAAACjc/snhMorCEbtI/s200/
Dibujo.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5131918324048705682" /></a>
Si nos fijamos en este código podremos observar que está dividido (por así decirlo) en tres partes marcadas por las < > de apertura y cierre:
[1] La parte que hace posible el link a la imagen.
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/Rzg8hpE9uJI/AAAAAAAACjc/snhMorCEbtI/s1600-h/
Dibujo.bmp">
[2] La parte que muestra la imagen.
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/Rzg8hpE9uJI/AAAAAAAACjc/snhMorCEbtI/s200/
Dibujo.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5131918324048705682" />
[3] El cierre del código: </a>
Una vez controladas las partes, para eliminar el link de la imagen, nada más simple que borrar el código de la parte [1] y el cierre de la parte tres [3].
Eliminado esto, nos quedará solamente el código que muestra la imagen [2]
Nota
Si lo que queréis conseguir es que el link que añade Blogger cuando pinchemos en una determinada imagen nos dirija a una página en concreto (usar la imagen como link, podéis consultar esta entrada anterior: "Redirigir una imagen en Blogger"
Publicado por Anónimo a las 15:31 h. Etiquetas: Blogger, Links, Trucos imagenes
[+/-] |
ShareThis para Blogger |
El conocido botón para marcadores sociales de Wordpress, ahora está disponible para Blogger.
Han sacado una nueva versión 2.0 que permite incluso enviar las entradas por email.
Podemos optar por registrarnos lo que nos dará la posibilidad de seguir nuestras estadísticas. En el pie de las entradas se mostrará un único botón que al pinchar sobre el abrirá el widget con los marcadores sociales, podremos escoger el tipo de botón, normal o animado.
Tenemos también la posibilidad de escoger los iconos de los marcadores que vamos a mostrar, los colores del widget y el orden de los iconos para los marcadores.
La única "pega" que le encuentro es que el widget está en inglés...
Para conseguir nuestro widget, hemos de ir a ShareThis y seguir unos sencillos pasos. La web está en inglés pero es lo suficientemente intuitiva para no tener problemas.
El código (script) que obtendremos una vez completados todos los pasos, podemos pegarlo en nuestra plantilla justo después de:
<p class='post-footer-line post-footer-line-3'>
Nota
Tendremos en cuenta, que una vez obtenido el código, a la hora de pegarlo nos dará error, esto es porque Blogger no lo interpreta tal como está, para solucionarlo tenemos que colocar después de todos los símbolos como este & que veamos en el código, esto: amp;
Para aquell@s a los que no les importe usar el widget con los colores originales, este es el código preparado para funcionar:
<script type="text/javascript" src="http://w.sharethis.com/widget/?
tabs=web%2Cemail&charset=utf-8&
services=%2Cgoogle_bmarks%2Cdigg%2Cdelicious%2Cblinklist%2Cfurl%2Cmagnolia%2
Ctechnorati%2Cblogmarks%2Cyahoo_myweb%2Ctailrank%2Cnewsvine%2Creddit%2Cstumbleupon%2
Cfacebook%2Cwindows_live&style=default&
publisher=ebd79025-ab68-4a54-8e68-6f9b6030c5f8"></script>
Publicado por Anónimo a las 3:22 h. Etiquetas: Marcadores sociales, Utilidades Online
[+/-] |
Añadir smileys a Cbox |
He visto en algunos blogs que están usando el chat o tagboard de Cbox que en el panel para escoger smiles o emoticonos, tienen añadidos algunos más de los que vienen incluidos en Cbox por defecto.
Hacer esto es bastante sencillo:
[1]- Escogemos el smile que nos gusta y lo guardamos en nuestro PC.
[2]- Lo subimos a un hosting o alojamiento de imágenes ( ImageShack, por ejemplo)
[3]- Copiamos la url que nos proporciona el hosting que en el caso de ImageShack sería la que vemos en último lugar.
[4]- Ingresamos en nuestra cuenta de Cbox y en el panel de la derecha pinchamos en smilies
[5]- Se abrirá una tabla con los smileys que están incluidos en nuestro chat por defecto, abajo del todo vemos un botón que pone "New Row", cada vez que pinchemos en este botón, tendremos un nuevo espacio disponible para añadir la url de nuestro nuevo smile (la que hemos conseguido en ImageShack).
[6]- Guardamos cambios en "Save"
Publicado por Anónimo a las 2:03 h. Etiquetas: Datos utiles, Emoticonos
[+/-] |
Iconos para marcadores sociales |
En Fasticon encontramos unos preciosos iconos para usar en nuestros marcadores sociales en formato PNG y en distintos tamaños (desde 512px X 512px a 16px X 16px).
Social Bookmarking icons "Cuadrados" (12 iconos)
Circle Social Bookmark Icons "Redondos" (10 iconos)
Publicado por Anónimo a las 0:11 h. Etiquetas: Iconos, Marcadores sociales
[+/-] |
Que son y para que sirven los marcadores sociales |
Habréis visto en muchos blog, incluido este mismo, esos botones tipo icono al pie de las entradas (a veces en la sidebar) precedidos de un "enviar a", "boomarking", "compártelo" o algo parecido.
Son los botones para enviar nuestras entradas a los distintos marcadores sociales.
Una vez colocados en nuestro blog, cualquier visitante que considere interesante o relevante una de nuestras entradas, podrá enviarla al marcador social deseado pinchando sobre el icono de dicho marcador.
Es como cuando agregamos una web a nuestro marcadores (Firefox) o a favoritos (Internet Explorer) con la diferencia de que damos la posibilidad a otros usuarios de verla, es decir, compartimos nuestros favoritos.
En algunos de estos sitios como Digg (en inglés), o Menéame, los usuarios envian los contenidos que les resultan más interesantes y luego la comunidad de usuarios del sitio votan los contenidos y los más votados salen publicados en la página principal, dándole relevancia en la blogosfera a los autores de esas noticias (entradas).
Para colocar los botones de los marcadores sociales en tu blog, no necesitas estar registrado en ninguno de estos servicios, pero si deben estar registrados tus visitantes para poder enviar tus entradas.
Del mismo modo, para poder enviar una entrada que te guste a uno de estos sitios (o a varios) en cualquier otro blog que proporcione el servicio de envío (tenga los iconos para marcadores), deberás registrarte antes.
Publicado por Anónimo a las 23:37 h. Etiquetas: Marcadores sociales, Posicionamiento
[+/-] |
Cargando página... |
Lo vi hace algún tiempo en el blog de Gem@ y me pareció una forma ideal de pedirle paciencia a nuestras visitas cuando nuestro blog, por el motivo que sea, se demoré un tiempo en cargar.
Se trata de una imagen en movimiento que indica que la página se está cargando y una vez que el blog ha cargado por completo, la imagen desaparece. Podéis ver un ejemplo a la derecha de mi blog, casi arriba del todo de la página.
Para empezar necesitaremos tener una imagen "de carga", que podemos obtener fácilmente en alguna página de Internet.
En NapyFab, por ejemplo, las hay muy bonitas.
En Load Info podemos personalizar su color y escoger tamaño.
En Ajax Load generamos la imagen que más nos guste a partir de varios modelos base.
En Mentalized hay algunas muy originales.
En San Baldo son pocas pero muy lindas.
Una vez decidida la imagen que vamos a usar, la subimos a una página de alojamiento de imágenes, podría ser ImageShack, por ejemplo, y copiamos la dirección (url) que nos proporciona el alojamiento. En el caso de ImageShack, la url a copiar sería la última que aparece una vez subida la imagen.
Nos situamos en la parte de Editar - HTML de nuestra plantilla y justo antes de </head> añadimos este código:
<!-- imagen de carga -->
<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>
<!-- fin imagen de carga-->
He añadido <!-- imagen de carga --> y <!-- fin imagen de carga--> para que si en algún momento necesitáramos localizar el código nos resulte más fácil, los navegadores no lo interpretan, así que no va a darnos ningún error.
¡Guardamos cambios!
Ahora hemos de añadir un nuevo elemento HTML-Javascrip y pegar dentro este código donde incluiremos la url de nuestra imagen, después lo arrastramos a donde mejor nos parezca:
<div id="imgLOAD" style="text-align:center;">Cargando...
<img src="URL_DE_LA_IMAGEN"/></div>
He añadido "Cargando..." para que se lea delante de la imagen, cuando la carga termine y la imagen se oculte, el texto también se ocultará. Si solo queremos mostrar la imagen, borramos el "Cargando..." y listo. De la misma manera, podemos cambiar ese texto por cualquier otra cosa..."Espere por favor", "Paciencia, estoy en carga", "Me estoy poniendo las pilas", en fin, lo que sea. :-)
Podemos también colocar la imagen de carga fuera del cuerpo del blog, es decir en una de las esquinas superiores de la página, para ello seguimos los mismos pasos anteriores, con la diferencia de que el código para mostrar la imagen será distinto y tendremos que colocarlo antes del <head> de la plantilla y no en un elemento:
<div align='left' id='imgLOAD' style='position:absolute;top:30px;left:30px'>Cargando...
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/></div>
<div align='right' id='imgLOAD' style='position:absolute;top:30px;right:30px'>Cargando...
<img src='http://img165.imageshack.us/img165/1922/loadinganimationliferaysd8.gif'/></div>
Nota
He incluido en el código la url de mi imagen de carga, por si queréis usarla.
En "top" podemos cambiar la distancia de la imagen a la parte superior de la página, yo he puesto 30px para que los que tengan visible la Navbar de Blogger no tengan el problema de que la imagen se vea sobre ella.
En "left" y en "right" cambiaremos la distancia de la imagen al borde de la página, según hayamos escogido derecha o izquierda para mostrar la imagen.
Publicado por Anónimo a las 4:09 h. Etiquetas: Gadget, Trucos Blog, Trucos imagenes, Utilidades Online
[+/-] |
Icone Blog pack |
Algunos visitantes del Escaparate se han interesado por conseguir un botón para sus feed igual al que tengo en mi sidebar.
Puede descargarse un pack (Icone Blog Pack) de 30 iconos en formato png, en la web de webfruits.
El que estoy usando yo por ejemplo, en el pack está disponible en varios colores.
[+/-] |
Botones diferentes de Blogger |
He encontrado de forma casual unos cuantos botones de Blogger diferentes a los que acostumbramos a ver en nuestros blogs. Si hemos decidido ocultar la Navbar de Blogger, no estaría de más el usar uno de estos botones, sustituyendo a los que incluye Blogger por defecto.
Pongo aquí unos cuantos, pero podéis ver más en el blog de PAM "Armada y peligrosa"