Grazr

Descripción:

Grazr, es un instrumento online gratuito que nos permite de reunir una serie de Feed y publicarlo en un solo lugar mediante un widget (completamente personalizable para adaptarlo perfectamente al layout del propio blog) teniendo la posibilidad de agregarlo cómodamente en nuestras páginas.

Es un interesante servicio gratuito que nos permite de transformar nuestro blog en un fuente de distribución de contenidos siempre actualizados, para comprender la efectividad del servicio en el sitio web ésta presente una mini guía llamada Guided Tour, éste tour tiene vídeotutoriales esenciales para guiarnos y poder crear un account.

Cligs. Contador de Clics

Descripción:

Cligs es otro servicio de generación de URLs cortos y amigables, pero su originalidad reside en que implementa un servicio de estadísticas (requiere registro). Las direcciones pueden ser creadas mediante un formulario en la web o por medio de una bookmartlet (dirección conteniendo un script que ejecuta el navegador), y admiten el pertenecer a una sola ubicación (es decir, una misma ubicación puede redirigir a más de un enlace de Cligs).

Los datos estadísticos ofrecen datos muy útiles, como el número de clics por día, los motores de búsqueda desde los que vino el visitante, menciones en redes sociales como Twitter y referrers (el URL inmediatemente anterior en el historial del internauta antes de llegar a nuestra página).

PicMarkr - Marca de agua para tus imagenes

L a que les dejo, es una herramienta para aquellos que publican fotos y no las quieren compartir tan campantemente, o para aquellos que se matan en crear algo definitivamente trabajoso, y ven que por la red, les roban sus imágenes, sin dar ningún tipo de crédito al creador. Por eso agregar una marca de agua, puede ser una opción a tener en cuenta.
PicMarkr es una sencilla aplicación que nos permite en 3 simples pasos, agregar marcas de agua a nuestras imágenes y todo de forma online, de esta manera nos salva de usar algún editor para realizar este efectos.
Lo mejor de todo es que es tan sencillo como subir una imagen desde nuestro ordenador, o desde Flickr.
Luego elegimos la posición en donde irá la marca de agua, y/o el texto a mostrar.
Y pronto, solo queda descargarlo.
Fácil y rápido ^_^

Baby Escape

V olvemos a los juegos de viernes.
Les dejo este de escape, como a mi me gustan ^_^
Hay que tratar de ayudar a sacar al bebito que quedó encerrado.
Pero es tan fácil que no les dejo solución ;)

Favicon o imagen en la Url - Otra manera

E n esta oportunidad Jorge del blog Jorge Key, me hace llegar esta interesante información.
Al parecer a implementado un código para que el Favicon pueda ser visto desde varios exploradores. (Hasta ahora solo se veía en Firefox)

Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^


1- Creamos nuestro Favicon, con la imagen que queremos.
2- Importante es guardar el Favicon en formato ICO y PNG
3- Alojamos la imágen y conseguimos su URL
4- Nos dirigimos a Draft Blogger ingresamos a nuestra plantilla, Diseño/Edición HTML y buscamos el siguiente código:
<title><data:blog.pageTitle/></title>
inmediatamente después pegamos lo siguiente

<!-- Favicón-->
<link href='URL DE TU FAVICON ICO' type='image/x-icon'/>
<link href='URL DE TU FAVICON PNG' type='image/x-icon'/>

<link href='URL DE TU FAVICON ICO' rel='icon' type='image/png'/>
<link href='URL DE TU FAVICON PNG' rel='icon' type='image/png'/>

<link href='URL DE TU FAVICON ICO' rel='shortcut icon' type='image/x-icon'/>
<link href='URL DE TU FAVICON PNG' rel='shortcut icon' type='image/x-icon'/>
<!-- Termina Favicón -->

Nota: Como se darán cuenta está repetido, y es correcto, así debe ser para que funcione.

Pegamos las URL's que habíamos creado, y pronto.
Como siempre antes de guardar, nos fijamos en vista previa, para ver que todo funcione bien. ;)

Este es un excelente aporte de
Gracias !!! :D

IMPORTANTE:
En estos días a sucedido que los Favicon que teníamos, desaparecieron, esto se debe a un cambio que ha hecho blogger; podría explicarlo, pero Jmiur lo está explicando mucho mejor.
Lo importante a saber es que, el código que aplicamos para agregar el Favicon, <link href='URLIMAGEN' rel='shortcut icon'/"> lo debemos poner antes de </head> y listo, se soluciona el tema. ;)

Seguir Leyendo...[+/-]

Desplegar y recoger - Otro modo

Y a anteriormente les había hablado de una genial forma de crear este truco.
Esta vez mi nuevo amigo Zilfarion, me hace llegar esta otra forma. (gracias por el aporte ^_^)
Sin necesidad de hacer cambios en la plantilla.
Con un simple script que pegamos en la entrada, e incluso es modificable.
Como suelo decir, con los códigos, el límite es el cielo ;)

<div><div><div class="pre-spoiler"><span style="float: left; padding-top: 2px;"></span><input value="Ver" style="margin: 0px; padding: 0px; width: 80px; font-size: 14px; font-family: trebuchet ms;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Ver';}" type="button"> </div> <div> <div class="spoiler" style="display: none;"><span style="font-family:trebuchet ms;"><div style="text-align: center;"><div style="text-align: justify;"><u style="font-family: trebuchet ms;"></u>
TEXTO A OCULTAR
</span></div></div></span></div></div></div></div></fieldset>

Quedaría así:

PRUEBA !!!

Desde ya muchas gracias a los aportes de
:D


Seguir Leyendo...[+/-]

Badges

A cá les dejo varios links con los ya famosos Badges para decorar tu blog, son bastante útiles, y le dan una apariencia web 2.0 a tu blog de muy buena calidad.

Generador de Badges online

Click para descargar

Click en la imágen para descargar.

Click en la imágen para descargar.

Click para descargar

Click en la imagen para descarga PNG o para decarga en PSD click AQUI

Click en la imagen para descargar

Tutorial para Photoshop
Seguir Leyendo...[+/-]

Imagenes que se agrandan

E ste es un muy buen truco, que descubrí hace tiempo, y que nunca es tarde para desenterrar, es para agrandar una imagen con simplemente pasarle el puntero del mouse sobre el.
Ej:

Asi es Key

Para llegar a este resultado nos debemos situar en Plantilla/ Edición de HTML y justo después de <head> aplicamos el siguiente código:

Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^

<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}

</style>

Después de añadir el código en la plantilla, queda añadir el siguiente código justo donde deseamos que salgan las imágenes en nuestra entrada.

<a class="thumbnail" href="#thumb"><img src="aquí-la-url-de-la-imagen" /><span><img src="aquí-la-url-de-la-imagen" width="100px" height="100px" border="1" /><br />Texto si se desea poner</span></a>

Con este código podemos configurar a nuestro gusto el tamaño de la imágen que se amplía, la posición (width="100px" height="100px"), el borde (border="1"), y nos da la posibilidad de agregar un texto en la base de la imágen.
Y pronto, magia...

Lo descubrí hace tiempo en el blog de César, gran fuente de conocimiento, que lamentablemente ya no está publicando. (César, gracias totales !) ;)
Seguir Leyendo...[+/-]