Hace tiempo se inició una campaña para pedir a Blogger alojamiento de archivos, no puedo decir que fuera un fracaso porque pienso que para fracasar primero tenemos que marcar una meta, tomar decisiones y trabajar con empeño manteniendo esa actitud hasta conseguir nuestro objetivo que en algunos casos puede que no lleguemos a conseguir. Nuestro objetivo era "recordar" a Blogger que necesitábamos alojamiento de archivos, todos conforme pero Blogger no escuchó. Pasó el tiempo hasta que días atrás de nuevo un suceso nos recuerda que las malas maneras siguen existiendo y que los buenos modales brillan por su ausencia. Está claro que hablo de la falta de información por parte de Sky Drive. No era necesario marearnos tanto, con una breve explicación habría sido suficiente. De nuevo Blogger está en boca de todos y no precisamente para darle las gracias por algo.Esta vez quien se anima y toma la decisión de hacer algo son TwittBoy y BanakaBanaka!! Nos parece inadmisible que cientos de blogs dejaran de funcionar por problemas de alojamiento cuando cualquier otro servicio de blogs lo primero que ofrece es alojamiento gratuito de archivos.  Nos parece inadmisible que la única solución que se les ocurre contestarme al preguntar sea que insertemos los script en la plantilla (verídico) y nos convirtamos todos en maestros del kaos cuando se nos junten tres o cuatro trucos. Nos parece inadmisible que se mofen de nosotros mientran sugieren "monetizar" nuestro blog con "estupendas" publicidades. Nos parece inadmisible que obvien la solución más sencilla, que sería la de alojar TODOS (.js,.Css,...) los archivos directamente en GoogleSites de la misma manera que se hace ahora con las imágenes en Picassa. Y sobre todo, nos parece inadmisible que aún sigan haciendo oídos sordos a las peticiones de sus usuarios. ¡Les parece inadmisible porque en realidad lo es! han tenido la genial idea de crear un widget, que al hacer click sobre la imagen le podemos envíar un Tweet a @Blogger pidiéndole alojamiento para archivos. ¿Qué es un Tweet? Un mensaje breve en Twitter que llega a aquellas personas a las que nombres y que también tengan su cuenta en Twitter (Blogger la tiene) Añadiendo el widget a nuestra sidebar no sólo estamos diciendo que apoyamos esta iniciativa sino que podemos mandar un Tweet a Blogger (o varios) con un simple click. El mensaje que enviamos es el siguiente:@Blogger I am a Blogger,but I do not have filehosting.I want a place for ALL my files.I want upload ALL files to my blog!!can you hear me?" O lo que es lo mismo:@Blogger Yo soy un Blogger, pero no tengo alojamiento. Quiero un sitio para TODOS mis archivos.Quiero subir TODOS mis archivos a mi blog!!Me oyes? TwittBoy y BanakaBanaka!! nos aclaran que lo de "me oyes" es para comprobar si son capaces de seguir haciéndose los sordos.... Queda a decisión de cada uno enviar ese Tweet o cualquier otro, el caso es hacerse oír, al menos hay que intentarlo.Pero ojo, hay que ser prudentes porque si enviáis varios Tweets seguidos Twitter os puede cancelar la cuenta. Ver más información en el blog de TwittBoy y BanakaBanaka!! |
0
Grítalo en Twitter !!
0
Como podéis ver, le hemos dado una clase (class) a la imagen (en el ejemplo "firma") aunque podéis poner cualquier nombre.
[3] Colocamos ahora en el CSS de la plantilla (antes de ]]></b:skin>) el código necesario para controlar la posición de la firma dentro del cuerpo del comentario:
.firma {
display:block;
width: 45px;
height: 28px;
}
En width: pondremos el ancho que tiene nuestra imagen y en height: el alto.
El resultado será entonces algo así:
Para controlar la posición de la firma, añadimos una nueva instrucción en el mismo código anterior:
.firma {
display:block;
width: 45px;
height: 28px;
padding-left: 90%;
}
Tendremos que variar el porcentaje (90% en el ejemplo) según la posición que queramos conseguir para la imagen.
En el blog de BanakaBanaka podéis ver otra forma muy interesante de incluir la firma del autor del blog en los comentarios.
Firma en los comentarios del autor
En una entrada anterior vimos como destacar los comentarios del autor del blog, dándoles un diseño distinto a los demás comentarios.
Usando este mismo sistema, voy a explicar como añadir una imagen como firma en los comentarios del autor del blog, tal como lo he hecho yo.
[1] En primer lugar incluimos las modificaciones en la plantilla que se explican en esa entrada si no lo hemos hecho anteriormente.
[2] Una vez tengamos incluidos todos los cambios para distinguir nuestros comentarios del resto, añadimos la llamada a la imagen en el mismo código que habíamos colocado:
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/><img class='firma' src='url_de_la_imagen_firma'/></p>
</dd>
<b:else/>
Como podéis ver, le hemos dado una clase (class) a la imagen (en el ejemplo "firma") aunque podéis poner cualquier nombre.
[3] Colocamos ahora en el CSS de la plantilla (antes de ]]></b:skin>) el código necesario para controlar la posición de la firma dentro del cuerpo del comentario:
.firma {
display:block;
width: 45px;
height: 28px;
}
En width: pondremos el ancho que tiene nuestra imagen y en height: el alto.
El resultado será entonces algo así:
Para controlar la posición de la firma, añadimos una nueva instrucción en el mismo código anterior:
.firma {
display:block;
width: 45px;
height: 28px;
padding-left: 90%;
}
Tendremos que variar el porcentaje (90% en el ejemplo) según la posición que queramos conseguir para la imagen.
En el blog de BanakaBanaka podéis ver otra forma muy interesante de incluir la firma del autor del blog en los comentarios.
0
Solucionando cosas: Script de Posts Expandibles
k_nelita preguntaba si era posible colocar el script para crear Posts Expandibles directamente en la plantilla y como es uno de los más extendidos, aquí va la explicación.
Solemos verlo en nuestra plantilla mediante un código como este:
Solemos verlo en nuestra plantilla mediante un código como este:
<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Si bien es cierto que el script sigue funcionando, lo mejor, SIEMPRE, es tenerlo alojado nosotros. Lo podemos agregar a la plantilla usando el mismo criterio que usamos con las demás, colocando su contenido dentro de etiquetas SCRIPT:
<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo ...
//]]>
</script>
Como se trata de una serie de funciones, también podemos emplear un elemento HTML si creamos una sección especial en la plantilla para guardar scripts:
<!-- CONTENEDOR SCRIPTS -->
<b:section class='contenedorScripts' id='contenedorScripts' />
Allí agregamos el elemento y simplemente copiamos y pegamos el contenido de este archivo de texto 
0
Son diferentes y quien diga lo contrario miente, pero yo también soy diferente ¿Acaso tú no?.
Cada persona es única y ellos no son menos, cada persona es un mundo y ellos... son el MUNDO.
Día Mundial del Autismo
No pensaba añadir texto a esta entrada porque una imagen vale más que mil palabras, en este caso son varias imágenes de esas que inundan el alma y nos hacen pensar.
Esa alegría que ves es auténtica, tienen algo muy difícil de conseguir. Ese algo que se llama ¡FELICIDAD!Son diferentes y quien diga lo contrario miente, pero yo también soy diferente ¿Acaso tú no?.
Cada persona es única y ellos no son menos, cada persona es un mundo y ellos... son el MUNDO.
0
Para añadir una imagen tipo avatar retiramos antes el icono de Open ID, en Edición de HTML expandimos la plantilla de artilugios y buscaremos:
Para sustituirlo por:
Ahora que ya no tenemos el icono añadimos las imágenes. Normalmente una plantilla de Blogger sin modificar nos ofrece un código para los estilos de los comentarios así:
En esos estilos podemos añadir las imágenes, guardamos los cambios y marcamos para expandir la plantilla porque vamos a diferenciar los comentarios de autor de las visitas. Buscamos el siguiente código y añadimos lo 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>
Imagen - Avatar en comentarios
A raíz de dejar de funcionar el script de las imágenes del perfil en los comentarios muchas fueron las preguntas buscando una solución, solución que por otra parte a día de hoy ya no me preocupa seguir buscando y el motivo no es otro que la decisión de utilizar la menor cantidad de scripts y por el contrario utilizar las hojas de estilos con más frecuencia.
Hice unos cambios en mis comentarios, añadí un avatar para las visitas y otro distinto para el autor. No es lo mismo a mi me gustaba ver el avatar de cada uno, es como una firma personal, un sello que nos identifica y el mío lo conozco de memoria pero con CSS es la única forma de hacerlo, al menos hasta donde yo sé.
Me preguntaron la forma de hacerlo así que El diario de Crab ahí van las explicaciones.
Para añadir una imagen tipo avatar retiramos antes el icono de Open ID, en Edición de HTML expandimos la plantilla de artilugios y buscaremos:
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
Para sustituirlo por:
<dt class='comment-author' expr:id='data:comment.anchorName'>
Ahora que ya no tenemos el icono añadimos las imágenes. Normalmente una plantilla de Blogger sin modificar nos ofrece un código para los estilos de los comentarios así:
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
Respetamos lo marcado en color azul y sustituimos la parte en color rojo por lo siguiente:.comment-author { /*Nombre - Alias*/
margin:.5em 0 0;
color:#940f04;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body { /*Texto visitas.*/
margin:0;
font-size: 12px;
color:#ccc;
background: url(url-imagen-de-fondo) ;
margin: 0px 0px 5px 0px;
}
.comment-body p { /*Icono visitas 32x32*/
padding-top: 0px;
padding-left:50px;
padding-right: 10px;
padding-bottom: 35px;
background: url(url-imagen) no-repeat ;
}
.blog-author-comment { /*Texto autor*/
margin:0;
font-size: 12px;
color:#000;
background: url(url-imagen-de-fondo) ;
margin: 0px 0px 5px 0px;
}
.blog-author-comment p { /*Icono autor 32x32*/
padding-top: 0;
padding-bottom: 35px;
padding-left:50px;
padding-right: 10px;
padding-bottom: 35px;
background: url(url-imagen) no-repeat ;
}
.comment-footer {
font-size: 12px;
margin: 0;
padding-top:0px;
text-align: right;
}
.comment-footer a:link {
color:#000;
}
En esos estilos podemos añadir las imágenes, guardamos los cambios y marcamos para expandir la plantilla porque vamos a diferenciar los comentarios de autor de las visitas. Buscamos el siguiente código y añadimos lo 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>
Naturalmente todos no tenemos las mismas medidas ni espacio en los comentarios, incluso se utilizan distintas clases dependiendo de la plantilla. Por eso recomiendo si alguien quiere probar hacerlo en otro blog.
No es complicado, simplemente se trata de probar con las medias hasta quedar de nuestro agrado.Al igual que otras veces podemos añadir color o imagen de fondo al espacio destinado al texto del comentario, modificar color del texto y tamaño, añadir bordes y todo lo que la imaginación nos permita hacer.
0
Alojando imágenes en Blogger
Ahora que todos estamos un poco concientes de la necesidad de tener un blog que dependa lo menos posible de sevicios externos, vale la pena reciclar cosas escritas alguna vez. Una de ellas es las imágenes.
Alba, comentaba hace unos días, que las imágenes las tenía alojadas en ImageShack. Le sugerí colocarlas en Blogger mismo porque me estoy volviendo un poco paranoico con este asunto y su pregunta fue ¿cómo se alojan en Blogger?
Obviamente, no estamos hablando de las imágenes de las entradas sino de las que usa la plantilla. Tampoco estoy diciendo que no debe usarse un servicio externo, sólo creo que es mejor tenerlas en Blogger porque a la larga, será más rápido y nos evitaremos colapsos indeseados.
Lo que debemos hacer para alojar imágenes que luego usaremos en la plantilla es aprovechar el editor de entradas, ya sea en un post existente o, mejor aún, en uno nuevo al que usaremos de borrador. Vamos a un ejemplo práctico.
Creo una entrada nueva y me ubico en Edición HTML ya que allí tendré que mirar para saber la dirección URL de la imagen. Click en el ícono y me aparecerán una serie de opciones.
Alba, comentaba hace unos días, que las imágenes las tenía alojadas en ImageShack. Le sugerí colocarlas en Blogger mismo porque me estoy volviendo un poco paranoico con este asunto y su pregunta fue ¿cómo se alojan en Blogger?
Obviamente, no estamos hablando de las imágenes de las entradas sino de las que usa la plantilla. Tampoco estoy diciendo que no debe usarse un servicio externo, sólo creo que es mejor tenerlas en Blogger porque a la larga, será más rápido y nos evitaremos colapsos indeseados.
Lo que debemos hacer para alojar imágenes que luego usaremos en la plantilla es aprovechar el editor de entradas, ya sea en un post existente o, mejor aún, en uno nuevo al que usaremos de borrador. Vamos a un ejemplo práctico.
Creo una entrada nueva y me ubico en Edición HTML ya que allí tendré que mirar para saber la dirección URL de la imagen. Click en el ícono y me aparecerán una serie de opciones.Elige un diseño nos da cuatro posibilidades: poner la imagen centrada, flotando a la derecha, flotando a la izquierda o no darle formato. Vamos a elegir esta última aunque, en realidad, no importa.
Tamaño de la imagen tiene tres posibilidades: Pequeñas, Medio y Grandes ¿Qué significa esto? Lo mejor es verlo. Voy a subir la misma imagen cuyo tamaño original es de 600x200:
Tamaño de la imagen tiene tres posibilidades: Pequeñas, Medio y Grandes ¿Qué significa esto? Lo mejor es verlo. Voy a subir la misma imagen cuyo tamaño original es de 600x200:
Tamaño Pequeñas:
Tamaño Medio:
Tamaño Grandes:
Me dará tres codigos similares pero diferentes donde elimino todo y me centro exclusivamente en lo único importante, la de la etiqueta IMG que contiene la URL:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://......./s1600-h/demoIMG.jpg"><img style="cursor: pointer; width: 200px; height: 60px;" src="http://......./sXXX/demoIMG.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXXXXXXXXXXX" border="0" /></a>Si sólo me concentro en esa parte, tendré tres etiquetas "normales. Algo así:
<img src="http://......./s200/demoIMG.jpg" />
<img src="http://......./s320/demoIMG.jpg" />
<img src="http://......./s400/demoIMG.jpg" />
Ninguna de las tres se muestra tal como es la imagen original, la primera tiene 200 pixeles de ancho, la segunda 320 y la tercera 400. Aparentemente, han sido redimensionadas por Blogger pero, en realidad, eso no es del todo cierto, lo que está ocurriendo es que nos está mostrando tres miniaturas que se crean automáticamente al subirlas. No habrá diferencias si el ancho de la imagen no supera cierto valor pero si se trata de imágenes más grandes, no se mostrarán a menos que hagamos algo.
Si se fijan en esas etiquetas IMG, verán que son iguales con una excepción, hay un directorio que se muestra en el parámetro src que difiere:
Si se fijan en esas etiquetas IMG, verán que son iguales con una excepción, hay un directorio que se muestra en el parámetro src que difiere:
src="http://......./s200/demoIMG.jpg"
src="http://......./s320/demoIMG.jpg"
src="http://......./s400/demoIMG.jpg"
Ese dato, es el que indica cuál es la miniatura a mostrar.
¿Y dónde está la imagen original? Por suerte, Google siempre usa el mismo criterio en todas esas cosas y las coloca en el mismo directorio pero con un nombre distinto, el s000 así que si la cambiáramos por:
¿Y dónde está la imagen original? Por suerte, Google siempre usa el mismo criterio en todas esas cosas y las coloca en el mismo directorio pero con un nombre distinto, el s000 así que si la cambiáramos por:
src="http://......./s000/demoIMG.jpg"veríamos esto:
Tamaño Original:
Da lo mismo usar s000 que s00 o bien s0:
src="http://......./s00/demoIMG.jpg"
src="http://......./s0/demoIMG.jpg"
Funcionará siempre que estemos en blogspot porque hay una restricción para quienes tienen dominios propios ya que nuestras imágenes son alojadas en Picasa y este, impide el hotlinking.
No son las únicas miniaturas disponibles, hay más:
s48, s64, s144, s150, s512, s640 e incluso, hay una que algunos utilizan para mostrar las imágenes en su tamaño real:
No son las únicas miniaturas disponibles, hay más:
s48, s64, s144, s150, s512, s640 e incluso, hay una que algunos utilizan para mostrar las imágenes en su tamaño real:
src="http://......./s1600/demoIMG.jpg"pero esta en particular suele no funcionar en la plantilla.
En resumen, una vez que subimos la imagen y copiamos la URL que se encuentra el el atributo src, le cambiamos ese directorio, sea cual sea por s000 y ya tenemos la imagen disponible. Ahora, podemos hacer dos cosas, borramos el post y al hacerlo, le decimos que no borre la imagen, o lo guardamos como borrador para utilizarlo en cualquier otro momento.
En resumen, una vez que subimos la imagen y copiamos la URL que se encuentra el el atributo src, le cambiamos ese directorio, sea cual sea por s000 y ya tenemos la imagen disponible. Ahora, podemos hacer dos cosas, borramos el post y al hacerlo, le decimos que no borre la imagen, o lo guardamos como borrador para utilizarlo en cualquier otro momento.
Suscribirse a:
Entradas (Atom)