CONECTABLOG - Recursos interesantes de la Red: agosto 2010

30 agosto 2010

Efecto hover texto en imagen (Gem@ Blog)

30.8.10 por Malina

Gema nos explica de forma muy sencilla como aplicar el efecto hover (al pasar el ratón) sobre las imágenes.

Ver demo y código: Gem@ Blog

27 agosto 2010

Web Icons Vector - Iconos web vectoriales monocromo para tus diseños

27.8.10 por Malina

11.7 MB | 5 .EPS + JPEG Preview

TFox 0.3.9 (antes TuentiFox) tu cuenta de Tuenti en la barra lateral de Firefox

27.8.10 por Malina

TFox (antes TuentiFox) es una extensión para Firefox que brinda acceso constante a tu cuenta Tuenti mientras navegas en otras páginas.

En la esquina inferior derecha de la barra de estado verás el icono azul de TFox, desde el cual puedes abrir las preferencias y añadir tus cuentas, así como configurar el comportamiento de algunas opciones.

Cuando te hayas identificado, la barra lateral de TFox da acceso a las funciones más habituales de Tuenti. Además de un recuadro para actualizar tu estado rápidamente, hay solapas para buscar y organizar a tus amigos, gestionar mensajes, ver fotos o dejar notas en el tablón.

Con notificaciones, un cargador de fotos y la posibilidad de ver una vista previa de fotos y etiquetas, poco más puede pedirse a TFox. Es la extensión ideal si usas Tuenti.

Para utilizar TFox necesitas: Sistema operativo: WinXP/Vista/7

Requisitos mínimos:

Firefox 3.0 - 3.5
Cuenta Tuenti

24 agosto 2010

Blog Grader - Revisa y analiza datos de tu blog o de la competencia

24.8.10 por Malina

Blog Grader revisa y analiza muchos datos de tu blog.

Frecuencia de los post
Mejor hora para editar las entradas
Número de Feeds.
Ratio/número según la clasificación propia del blog.
Dominio del Blog si esta disponible
Seo Authority
Contenido del Blog.

El servicio está en inglés y nuestro blog ser compatible con RSS 3.0 o Atom 2.0 para poder ser analizado. No necesita registro e incluso puede ser interesante para conocer estas mismas estadísticas con respecto a blogs de la competencia.

Enlace | Blog Grader

Vía | Mis recursos en Blogger

23 agosto 2010

Generar imágenes de vista previa al pasar por los links

23.8.10 por Malina

Este es uno de los códigos más interesantes y útiles que he conseguido sacar. Personalmente me resulta muy útil y vistoso.

Para ver en acción el efecto, poner el puntero del ratón en los links de mi sidebar (los que están en la parte más azul).

Para implantarlo en vuestro blog debéis hacer lo siguiente.

Colocar los scripts necesarios en vuestra plantilla
Colocar el código CSS en vuestra plantilla
Colocar el código a los links que vayan a generar vista previa (una clase y la url del servicio websnap)

Paso 1. Colocar los scripts en la plantilla:

Copiar el código y poner justo por encima de </body>
Conviene que descarguéis los scripts y los subáis a vuestro propio servidor, ya que no puedo asegurar que permanezcan online los que yo misma he subido. Si no tenéis servidor para este tipo de archivos podéis usar http://www.opendrive.com que ofrecen 5GB gratis.

Código Javascript

<script language='JavaScript' src='http://www.opendrive.com/files/6972074_SfG13/jquery.js' type='Text/JavaScript'></script>
<script language='JavaScript' src='http://www.opendrive.com/files/6972120_X0FwO/main-thumb.js' type='Text/JavaScript'></script>

Paso 2. Colocar el código CSS en vuestra plantilla:

Copiar el código y poner justo encima de ]]></b:skin>

#previa{
position:absolute;
border:1px solid #000;
background:#111;
padding:5px;
display:none;
color:#fff;
}

Paso 3. Colocar el código en los links:

<a class="previa" href="la_url_del_enlace"  rel=http://images.websnapr.com/?url=la_url_del_enlace">Texto del link</a>

En resumen, una vez hechas las modificaciones correspondientes en la plantilla, se trata de incluir en los links que van a generar imagen previa la parte marcada en rojo.

Consejo: conviene que tengáis el código que se usa para los links en un .txt y a mano, eso os facilitará la tarea de recordar lo que hay que poner o simplemente podéis copiar/pegar y cambiar las url.

Nota: Cómo podéis comprobar uno de los scripts en la librería jQuery, si ya tenéis esta libreria en vuestra plantilla, no es necesario colocarla de nuevo. En este caso sólo sería necesario poner en la plantilla el script main-thum.js

Cómo descargar y guardar los scripts:

Click en los links y en el menú del navegador click en "Archivo" > "Guardar como..."

Seis nuevos estilos de paginación para Blogger

23.8.10 por Malina

Estilos disponibles:

Estilo 1: Demo - Código CSS
Estilo 2: Demo - Código CSS
Estilo 3: Demo - Código CSS
Estilo 4: Demo - Código CSS
Estilo 5: Demo - Código CSS
Estilo 6: Demo - Código CSS

Para implantarlo por primera vez debemos incluir en un nuevo elemento html/javascript el script y el CSS (estilo).

CSS: (estilo 1)

<style type="text/css">

.showpageArea { font-family:verdana,arial,helvetica; color: #000; font-size:11px; margin:10px; } .showpageArea a { color: #000; text-shadow:0 1px 2px #fff; font-weight: 700; } .showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #999; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x; } .showpageNum a:hover { border:1px solid #888; background: #ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x; } .showpageOf{ margin:0 8px 0 0; } .showpagePoint { color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #999; background: #666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x; text-decoration: none; }

</style>

Script:

<script style="text/javascript">var pageCount=15;var displayPageNum=15;var upPageWord="Previous";var downPageWord="Next";</script><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js"></script>

Colocaremos ambos códigos dentro del mismo elemento html/javascript (uno detrás del otro).

Para finalizar, puedes cambiar el CSS por cualquiera de los estilos disponibles, o personalizarlo a tu gusto.

Los que ya tengan con anterioridad implantado en su blog la paginación, sólo tienen que preocuparse de modificar en widget la parte del CSS.

Fuente | Six Styles Page Navigation

Incluir los plugins sociales de Facebook en tu blog

23.8.10 por Malina

A veces uno se vuelve un poco loco para buscar como incluir algunos de widgets de facebook, ya que no lo ponen nada fácil.

Hoy mismo he tenido que estar buscando y me ha costado un rato largo encontrarlos. Por ejemplo los "plugins sociales" que tanto vemos implantados en los blogs. El botón me gusta (Like Button), Like Box, etc... por si alguna vez os pasa, aquí mismo os dejo el enlace para acceder a dichos plugins y donde nos facilitan los códigos para porder implantar los widgets en nuestro blog.

Enlace | Plugins Sociales de Facebook

18 agosto 2010

Convertir links en botones con CSS

18.8.10 por Malina

Ver ejemplo de botón en acción

Para crear un botón como el ejemplo, necesitamos añadir unas líneas de código CSS en nuestra plantilla e incluir una clase (class) a nuestros links.

Colocar antes de </b:skin>

.btn1 a {
width: 250px;
padding: 10px 25px 10px 25px;
font-family: Arial;
font-size: 16px;
text-decoration: none; color: #ffffff;
text-shadow: -1px -1px 2px #618926;
background: -moz-linear-gradient(#98ba40, #a6c250 35%, #618926);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #98ba40),color-stop(.35, #a6c250),color-stop(1, #618926));
border: 1px solid #618926;
border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.btn1 a:hover {
text-shadow: -1px -1px 2px #465f97;
background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d));
border: 1px solid #0f2557;
}