ElHackerZ

Menú arcoiris

Hace unos días en uno de los correos me pedían un menú para un blog muy especial, una página personal donde su autora escribe pensamientos y reflexiones durante su embarazo y sobre su bebé que está a punto de nacer.
Me pedía un menú para ese blog, yo le hablé de un menú que días atrás me había encantado pero ella quería algo de colores llamativos y alegres.
Estuve buscando porque algo había visto pero son tantos donde escoger que asaltan las dudas.
Me decidí por este que yo he llamado "Arcoiris" es un menú de Stu Nicholls que a ella le ha encantado. Y a decir verdad con el fondo de nubes da la sensación de estar en el país de las maravillas.

No es un problema si los colores no son de nuestro agrado, podemos sustituirlos por otros. Para añadir este menú nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos lo siguiente:

Ver código

Guardamos los cambios y nos disponemos a añadir un gadget escogemos para ello HTML/Javascript y en su interior añadimos lo siguiente:

Ver código

Sustituimos el texto y añadiremos el nuestro.

El lugar para añadir la url de la página a enlazar es sustituyendo el asterisco # de la misma línea.

Halloween en Google

Me encanta el logo que han puesto en Google para celebrar Halloween.

¿No es precioso?...

Recuperar la papelera de comentarios

Me han llegado estos últimos días varios email donde me comentaban la "desaparición" del icono de edición de comentarios, es decir, la papelera gris que aparece al lado de la fecha de cada comentario y que permite al administrador del blog eliminar aquellos comentarios que considere oportuno.

En todos los casos que me han llegado, la papelera había desaparecido sin motivo aparente, es decir, sin hacer ningún cambio en la plantilla que pudiera afectar esa parte.

Revisando el tema, me he dado cuenta que en mis plantillas "antiguas" (la del Escaparate, por ejemplo) el código que hace posible que se muestre la papelera, es distinto al código en mis blogs de pruebas, por lo que pienso que Blogger ha cambiado el mismo para las nuevas plantillas.

En las plantillas "antiguas" el código que corresponde a dicho icono se ve así:

<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>

Fijaos en esta línea del código:

<span class='delete-comment-icon'> </span>

Esta línea es la que ahora ha cambiado y ha sido sustituida por el enlace directo a la imagen del icono:

<img src='http://www.blogger.com/img/icon_delete13.gif'/>

En todos los casos que me han llegado con este problema, se ha solucionado de esta manera, o sea, cambiando dentro de este código la línea "antigua" por la nueva.

No es seguro que funcione en todos los casos, pero por probar...

Actualización:

He estado mirando otra forma de intentar la recuperación de la papelera, dado que parece ser que el "truco" anterior no funciona en todos los casos.

Nos situamos en el panel -edición html y justo antes de </head> añadimos estas líneas de css:

<style type='text/css'>
.delete-comment-icon{ /* makes an 18x18 box */
background: transparent url(http://www.blogger.com/img/icon_delete13.gif) no-repeat right center;
padding: 12px;
margin: 0;
}
</style>

Con esto debería ser suficiente para volver a tener nuestro "bote de basura" en el blog, esperemos que de resultado en todos los casos...

Entradas expandibles con footer incluido

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

Después de explicar como aplicar en el blog la forma de mostrar las entradas en expandible, tanto en las páginas de etiquetas como en la página principal del blog, algunas os habéis interesado por la forma de mostrar al expandir los títulos, además de la entrada completa, también el post-footer.

Antes de nada os recomiendo encarecidamente que guardeis una copia de vuestra plantilla en el PC, pues podrían complicarse las cosas si por error colocamos el código en mal lugar.

[1] Suponemos que habéis seguido los pasos de las entradas que antes he mencionado y ya tenéis instaladas las entradas en expandible.

Iremos entonces a nuestro panel y en "Edición HTML" localizaremos esta parte del código con la plantilla de artilugios expandida:

<div class='post-footer'>

[2] Tendremos que copiar desde esa línea (incluida la misma) todo el código que está a continuación y hasta el próximo </div> de cierre que localizemos:

<div class='post-footer'>

--------------código---------------------

----------------código--------------------

---------------código----------------------

</div>

Dependiendo de lo que mostremos en nuestro post-footer (etiquetas, comentarios, etc.) el código a copiar será más o menos extenso.

[3] Una vez copiado el código perteneciente al post-footer, localizamos estas líneas de código en la plantilla:

<div style='clear: both;'/>

Justo debajo de esa línea es donde pegaremos el código del post-footer que acabamos de copiar.

[4] Guardamos los cambios.

El resultado podéis verlo en este mismo blog si pinchais sobre el [+/-] del título de cualquier entrada en las páginas de las etiquetas, donde se expandirá la entrada completa con el post-footer incluido.

Ampliar imágenes

Hay cosas que cuando las veo me gustan tanto que no puedo resistirme a probar, como en este caso el script sobre el que J.Miur comenta en su blog.

El resultado es conseguir que las imágenes sean mostradas en mayor tamaño con un click sin salir de la página. Me adelanté a decir de qué va el tema pero es igual veamos como añadirlo al blog y los resultados.

Nos situamos en plantilla Edicción de HTML y añadimos el script antes de </head>

Una vez añadido ya podemos hacer uso de él en cualquier imagen, para ello bastará con añadir lo siguiente:

<img src="url_de_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">

Sustituimos ancho1px y alto1px por el tamaño de la imagen a mostrar inicialmente, donde ancho2px y alto2px es el tamaño de la imagen al hacer clic sobre ella.

Según J.Miur es recomendable que los atributos (width="ancho1" height="alto1") tengan el mismo valor que los de la función (ancho1px','alto1px) pero no interfiere en nada si no es así.

Ver entrada original en Vagabundia

Conociendo la propiedad text-transform

En ocasiones nos encontramos que cualquier texto que añadimos a nuestro blog no aparece como en realidad lo escribimos.

Normalmente comenzamos a escribir con mayúsculas sin embargo nos encontramos que nuestro texto se convierte de forma que añade mayúsculas al principio de cada palabra, otras el texto aparece todo en mayúsculas o por el contrario todo en minúsculas.

Eso ocurre por la propiedad text-transform añadida en la CSS de nuestra plantilla.

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

Con capitalize cada palabra comenzará en mayúsculas.
Esto Es Un Texto Con La Propiedad Capitalize

uppercase mostrará todo el texto en mayúsculas.
ESTO ES UN TEXTO CON LA PROPIEDAD UPPERCASE

lowercase mostrará todo el texto en minúsculas.
esto es un texto con la propiedad lowercase

El valor none respetará el texto tal cual lo hayamos escrito.
Esto es un texto con la propiedad none

Para solucionarlo debemos ubicarnos en plantilla Edicción de HTML y localizar la parte que deseamos modificar.

Si es en el blog en general lo haremos en body {

El título del blog en #header h1 {

Para descripción debajo del título ubicaremos #header .description {

En las entradas buscaremos .post {

En los títulos de la sidebar en .sidebar h2 {

Si fuera la sidebar en .sidebar {

Al final de las entradas en .post-footer {

En comentarios nos llevaría a #comments {

Los enlaces también pueden contener la propiedad text-transform, los podemos modificar ubicando body { y a continuación:

* a:link "tal y como lo vemos"

* a:visited "enlace visitado"
* a:active "cuando se está pulsando"
* a:hover "con el cursor encima"

Puede que deje algún otro sitio más, si fuera así me lo comentáis y lo añadimos pero con eso creo podemos localizar nuestro problema, también es posible que según plantilla venga reflejado de otra forma pero en todas es posible solucionarlo.

Wallpapers Halloween

Visto en S Mashing Magazine

Buscador original

Un lector del Escaparate me ha mandado al email el código necesario para colocar un buscador en el blog, que además de eficiente es muy original en su diseño.

[1] Este es el código que colocaremos en un nuevo elemento HTML (Gadget) en nuestra sidebar:

<form action="/search" style="display:inline;" method="get">
<input id="s" onfocus="this.value=''" value="Texto a buscar" class="formsuch" name="q" size="17" type="text"/>
<input alt="Buscar" src="http://img142.imageshack.us/img142/7/searchiconry7.png" class="searchicon" value="Search" name="submit" type="image"/>
</form>

[2] Y este será el código CSS que colocaremos en la parte de "Edición HTML" de nuestra plantilla, siempre antes de ]]></b:skin>:

.searchicon:focus {
    background-color: white;
    color : black;
   outline : none; }

input:focus {
    background-color: #FFFFCC;
    color : black;
   outline : none; }

legend {
   padding: 0.5em 0.5em 0 0.5em;
   font: 30px Georgia,Verdana,sans-serif;}

input {
   border : 1px solid black;
    padding: 4px;
   outline : none; }

.searchicon {
   margin-left : -26px;
   margin-bottom : -29px;
   border : 0;}

[3] Aquí tenéis el resultado (aunque el ejemplo es simplemente una imagen).
La "cajita" del buscador cambiará de color cuando introduzcamos los terminos de búsqueda y, por supuesto, el texto que se ve dentro de ella "Texto a buscar" desaparece al escribir nuestro texto.

No hay problema en colocarlo en un fondo de color, ya que la imagen de los binoculares con ojitos tiene fondo transparente.

Rsizr retoque fotográfico online con reescalado líquido

Yo pensaba que con Photoshop ya estaba todo descubierto y estaba muy confundida, porque visitando a ERVDESIGN he descubierto Rsizr más tarde buscando información en Google he visto que numerosas páginas conocidas ya habían hablado sobre él pero aún así me ha gustado tanto que quise tenerlo en mis archivos y de paso compartirlo con aquellos amantes del retoque fotográfico.
Rsizr es una aplicación en Flash y para nuestra suerte online, permite cambiar el tamaño de fotografías en archivo JPG, PNG, GIF trabaja con un algoritmo que para ser sincera no entiendo y por lo tanto no sé explicar lo que es.
Lo que si sé es que este algoritmo altera las dimensiones de una imagen no ampliándola o reduciéndola sino por la eliminación o el aumento de píxeles en la imagen.
Con este sistema es posible definir automáticamente zonas de gran importancia como rostros o detalles de gran interés así como detecta y elimina los detalles de menor importancia.
Normalmente con cualquier editor esto no se puede hacer sin perder calidad en las imágenes o dando la sensación de ensanchar o estrechar toda la panorámica de la fotografía con todos los detalles incluidos.
Con Gimp también es posible obtener los mismos resultados pero es necesario un plugin de reescalado líquido
Mejor que veáis este vídeo:

Para orientarse encontraremos una guía con imágenes y las indicaciones para comenzar.

Una vez probado este jueguito nuevo puedo decir que además de poder reducir imágenes sin perder un ápice de nitidez también es posible eliminar objetos de la imagen.

Para el ejemplo escogí una fotografía de 1600x1200 (tremenda) sacada con una cámara digital, no la hizo un fotógrafo profesional pero aún siéndolo creo que hay cosas que no se pueden remediar, por ejemplo la inoportuna aparición justo en el momento de sacar la fotografía.
Tampoco estaba previsto esa puerta que aunque preciosa rompía un poco la visión de las columnas.

Si os fijáis bien la puerta y la espontánea han sido eliminadas sin necesidad de utilizar el recorte en la fotografía, la columna que sirve de escondite queda intacta se ha reducido el tamaño y la nitidez de la imagen sigue siendo la misma.

No sé si debido a mi conexión se hizo algo largo el proceso, pero en definitiva me ha gustado bastante.

Peludo se ha perdido

Se llama Peludo y es un West Highland Terrier. Es el perro de Juan Blázquez, un madrileño de 33 años que trabaja de administrativo. Cuando hace cinco años decidió independizarse, sus padres le regalaron un cachorro para que le hiciese compañía. Con él comparte piso desde entonces. Ahora, Peludo se ha perdido y Juan pide ayuda en un blog para encontrarle.

"Lo perdí por un descuido mío, fue culpa mía", explica Juan. "Salí a pasear por el barrio [vive en la calle Amaniel, en el centro de Madrid], me paré a hablar con un amigo y cuando miré ya no lo encontré", cuenta el joven, añadiendo que lo suele llevar "con correa" pero que lo soltó en la Plaza de las Comendadoras, muy cercana a su casa.
El perro desapareció hace dos semanas.

Nada más perderlo, Juan puso "papelitos por las farolas, pero la gente no hace mucho caso". Fue entonces cuando dos amigas le propusieron hacer "algo más original", ante la falta de éxito. "¿Por qué no haces un blog?", le dijeron. Su idea era que Juan publicase en la web una lista de favores para recompensar a la persona que encuentre a su perro. "Como pasta no tengo", explica.

En todopormiperro.blogspot.com, Juan se ofrece, entre otras cosas, a "placharte la ropa durante un año", "pintar tu casa", "llevarte el pan cada mañana" o "pasar toda la noche haciendo cola para conseguirte las entradas para un conciertazo". Admite que "lo de pintar la casa preferiría que no lo eligieran", aunque "en cuanto viera a Peludo me va a dar igual".

Todo por mi perro

Títulos de entradas por etiqueta + Feeds

Hace algún tiempo veíamos la forma de colocar en nuestro blog un widget para las etiquetas que ofrecía la posibilidad de suscribirse a una etiqueta determinada.

Por otro lado, hace unos días os explicaba la forma de añadir un widget para las etiquetas que mostraba los títulos de las entradas contenidos en cada etiqueta.

Gracias a la consulta que me hacía un lector del Escaparate, he probado la manera de incluir los dos "trucos" en uno, es decir, tendremos un widget para las etiquetas que mostrará los títulos de cada una de forma desplegable y, al mismo tiempo, mostrará el icono con la posibilidad de suscribirse a cada etiqueta de forma individual.

Ya sabéis que Blogger permite el uso de más de un widget para las etiquetas, pero aún así, lo más lógico si vamos a usar este widget, sería eliminar el que estemos usando de los dos anteriores y dejar solo este último.

Antes de empezar, nos descargamos el script que hace funcionar el gadget (botón derecho, guardar como) a nuestro PC y lo subimos a un alojamiento de archivos.

[1] Nos situamos en nuestro panel de Blogger en "Edición HTML" para localizar esta línea sin expandir l plantilla de artilugios:

<b:section class='sidebar' id='sidebar' preferred='yes'>

[2]Pegamos este código:

<b:widget id='Label12' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
home_page = "http://TU_BLOG.blogspot.com/";
max_rc_posts = 10;
</script>
<script src='URL_DEL_SCRIPT' type='text/javascript'/>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

[3] Cambiamos en el código donde dice "TU_BLOG" (resaltado en color naranja) por el nombre del blog donde hemos colocado el widget.
Si queremos usar un icono distinto al del ejemplo,sustituimos la url de la imagen (resaltada en azul) por la del nuestro.

Photo Notes - Efecto Polaroid

PhotoNotes es un sitio donde podemos subir cualquier imagen desde nuestro PC y darle un bonito efecto Polaroid, la particularidad que tiene es los diferentes modelos a escoger, así como el tipo de letra y color para el pie de nuestras fotografías.
Para obtener la fotografía debemos añadir nuestra cuenta de correo, es ahí donde la recibiremos en breves momentos. También podemos obtenerla por el sencillo procedimiento de guardar como...

WallpapersGratis

TusWallpapersGratis

Boton de "Vista previa" en el formulario de comentarios

Ayer mismo nos sorprendíamos con la aparición en nuestro formulario de comentarios del tan esperado botón de "vista previa" y, aunque el botón estaba allí en todos los blogs, para nuestro disgusto no servía para nada, o sea, no funcionaba.

Esta tarde he podido comprobar que ya está funcionando en algunos blogs, digo en algunos, porque en el mío parece ser que aún se resiste...

Oloman ha tenido más suerte y su botoncito ha sido más espabilado que el mío:

Personalizando gadget de Seguidores

El gadget de Seguidores es la novedad, lo añadimos pero algo no termina de gustarnos así que vamos a personalizarlo, comenzaremos por situarnos en plantilla Edición de HTML y marcamos la casilla de expandir plantilla de artilugios ¿ya está? pues empezamos.

* Eliminar el número de seguidores que aparece en el título que añadimos al gadget.
Buscamos:

<b:widget id='Followers1' locked='false' title='(aquí saldría el título de la sidebar' type='Followers'>

Unas líneas después encontraremos:

<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>

eliminamos (<data:totalFollowerCount/>) y con esto nos deshacemos del numero de seguidores que aparece junto al título.

* Para añadir un icono junto al texto de X Seguidores.

Esta vez localizamos:

<div class='followers-canvas profile-link'>

en la siguiente línea veremos:<data:followersFooterMessage/> justo antes de esa línea podemos añadir la imagen del icono.
<img src='url-imagen-icono'/><data:followersFooterMessage/>
Si deseamos añadirlo a la derecha lo añadiremos justo después.
<data:followersFooterMessage/> <img src='url-imagen-icono'/>

*Sustituir texto de SEGUIDORES.
Si deseamos sustituir el texto de Seguidores bastará con suprimir la etiqueta <data:followersFooterMessage/> y en su lugar añadimos cualquier otro texto.

* Modificar el texto de "Parar siguiente"

Cuando ya somos seguidores de un blog en lugar de mostrar el texto de "Seguir este blog" nos muestra "Parar siguiente" que no es otra cosa que eliminarle de nuestra lista.
Buscamos:

<div class='follow-this profile-link item-control following-stop-following-this'>

En las siguientes líneas veremos <data:stopFollowingMessage/> lo eliminamos y en su lugar añadimos otro texto de nuestro agrado.

*Abrir en ventana cuando accedemos a un avatar.
(Esta solución a encontré leyendo los comentarios de J.Miur)
Cuando hacemos click en una imagen de los seguidores accedemos a su blog. Lo ideal sería hacerlo sin salir de nuestra página y para ello es necesario modificar el enlace del avatar. Añadimos el atributo target='_blank' de esta forma:
Buscamos:

<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

y lo sustituimos por:

<a target='_blank' expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

También podemos hacer la misma operación en el enlace "Ver todos"

Buscamos:

<a expr:href='data:followersUri'>

lo sustituimos por:

<a target='_blank' expr:href='data:followersUri'>

* Borde,color y fondo de avatar...
Nos queda esa parte que más nos gusta, la de añadir estilos a nuestro gadget. Nos aseguramos de haber guardado los cambios en la plantilla y esta vez sin necesidad de expandir la plantilla nos vamos justo antes del famoso ]]></b:skin>

Borde y color de fondo en las imágenes con:

.follower-img {

border:1px solid #901d14; 

background-color:#000000;

padding:1px;

margin:0;  

}

Texto de "Seguir este blog" y "Parar siguiente" añadimos efecto hover de negrita al texto, color de fuente, tamaño y justificamos.

.follow-this {

text-align:right; 

}

.follow-this a { 

color:#7E92A6;

font-weight:normal;

font-size:8px;

}

.follow-this a:hover {

font-weight:bold;
color:#000;

}

(right para la derecha, center para centro y left izquierda)

Justificar texto de X seguidores:

.followers-canvas{

text-align:right;}

}

(right para la derecha, center para centro y left izquierda)

Ajustamos las imágenes de nuestros seguidores a la medida de nuestra sidebar:

.followers-grid {

width:170px;

margin:0 auto;

padding:0;

}

Seguidores en Blogger ya disponible

Hace un tiempo que habíamos visto la posibilidad de añadir un nuevo widget o gadget en nuestro blog llamado "Seguidores" y aunque aún no estaba operativo se hablaba mucho de el, sobre todo en algunos blogs de habla no-hispana, donde al parecer si estaba funcionando.

Hace un rato me he dado cuenta de que el widget ya no aparece en forma "experimental" sino que ya puede ser añadido a nuestro blog desde Diseño -> Añadir un gadget sin problemas aparentes.

He comprobado también que, al menos en mi caso, el widget está operativo tanto desde el panel de Blogger como desde Blogger in Draft.

La sorpresa ha sido comprobar que El Escaparate tiene ya cinco seguidores de los que, hasta hace media hora, no tenía ni idea que estaban ahí...

Como podéis comprobar, el dato aparece en nuestro panel de Blogger, al lado del nombre de cada blog.

El uso de esta nueva característica de Blogger nos permite algunas cosas interesantes por lo que he podido comprobar:

Conocer quienes son "fans" de tu blog.
Seguir también nosotros a los blogs que más nos interesan con la opción además, de hacerlo de forma anónima.
Ver el número de seguidores de nuestro blog, al lado del nombre del blog en nuestro panel.
Leer las últimas entradas de los blogs a los que seguimos, directamente desde nuestro panel de Blogger.
Y alguna función más en Google Reader, como importar nuestra "lista de blogs seguidos" que aún no he mirado demasiado a fondo.

Para empezar a usar esta nueva función, no tenemos más que añadir nuestros blogs favoritos directamente desde nuestro panel, donde ahora veremos un botón de "Añadir" y otro de "Administrar"

Añadir los blogs a nuestra lista de seguidos, es tan fácil como pinchar en "Añadir", se abrirá entonces una pequeña pantalla donde tendremos que introducir la url (dirección) del blog a seguir.

Se nos dará entonces la opción de seguir a ese blog de forma pública o anónima, si escogemos la opción pública y ese blog añade el widget de "Seguidores" apareceremos en el, y otros lectores de ese blog tendrán entonces acceso a nuestro perfil y, por tanto a nuestro blog, desde el widget.

Si escogemos la opción anónima, será algo parecido al "suscribirse" al blog de la manera habitual, estaremos en la lista de seguidores, pero nuestros datos permanecerán ocultos.

Si por lo que sea decidimos dejar de seguir a un determinado blog, podemos anular el seguimiento desde nuestro panel en "Administrar", así mismo desde ahí podremos cambiar el tipo de seguimiento de anónimo a público o viceversa.

De momento yo he añadido el widget a mi sidebar y ya tengo una pequeña lista de "seguidos" en mi panel...

ElHackerZ

Menú arcoiris

Halloween en Google

Recuperar la papelera de comentarios

Entradas expandibles con footer incluido

Ampliar imágenes

Conociendo la propiedad text-transform

Wallpapers Halloween

Buscador original

Rsizr retoque fotográfico online con reescalado líquido

Peludo se ha perdido

Títulos de entradas por etiqueta + Feeds

Photo Notes - Efecto Polaroid

WallpapersGratis

Boton de "Vista previa" en el formulario de comentarios

Personalizando gadget de Seguidores

Seguidores en Blogger ya disponible

Ayudamos a Ayudar... Hazte Fan!

Buscador

HEY VISITANTE! LEE ESTO!

Buscador #2

Frase: "Proximamente..."

Género

CineTux tiene nueva Administración

sdgsdfgdg

Archivo del blog

Estadísticas