Tutorialized.com, com más de 6500 tutoriales en 500 categorías.

En este directorio Tutorialized.com podrás encontrar tutoriales de la mayoría de los programas de diseño gráfico de 2D y 3D, tutoriales CSS, Javascripts, PHP, ,según ellos, hay más de 6500 tutoriales con alrededor de 500 categorías.
Lo mejor del directorio, aparte de ser gratuito, es que los tutoriales están hechos para todos los niveles de usuarios, es decir, no son tips oscuros para los gurús de programas como Blender 3d, 3DS MAX, Photoshop...etc "aunque sin duda los hay" , sino también va dirigido a personas que, si bien ya se han acostumbrado a la interfases de los programas, todavía les falta mucho por aprender.
Página en inglés

Stripe Generador 2.0 beta fondos diagonales

Stripe Generador es una alpicación online con la que podemos generar fácilmente esos fondos con rayas inclinadas tan típicos en algunos blog o webs. Todo a través de un interfaz muy sencillo de usar desde la misma página principal.Nos permite elegir el ancho de las líneas, el ancho del espaciado entre líneas, el color de las líneas, el color de fondo, si las líneas tendrán sombra y hasta la orientación de las líneas.
Apenas apliquemos los cambios podemos descargarnos el patrón a la PC para usarlo en nuestros blogs, o para usarlo como un patrón dentro de Photoshop

Visto en: Blogultura.com

Manual para blogger beta

Aquí os dejo este tutorial para el blogger beta realizado por Ana Ovando, un tutorial de lujo que para algunos les servirá de mucha ayuda, desde aquí felicito a la autora Ana O.

Botones Blogger

Si queréis insertar un botón del Blogger en tu blog , aquí os dejo algunos junto con su código:



<a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/blogger-powerby-blue.gif" border="0" /></a>



<a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/blogger-ipower-blue.gif" border="0" /></a>



<a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/blogger-simple-blue.gif" border="0" /></a>



<a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/bloggerbutton1.gif" border="0" /></a>



<a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/blogger-simple-kahki.gif" border="0" /></a>



<a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/blogger-simple-white.gif" border="0" /></a>

Css Buttom Designer

Css Buttom Designer es una herramienta on-line con la que podrás crear botones CSS de una forma muy fácil, su interfáz de uso es muy simple y sencillo para que diseñes tus propios botones con todo detalle, sólo vas eligiendo y personalizando cada elemento como...texto a mostrar,mensaje title,color de fondo, fuentes, bordes degradado de color o rollover, vamos más sencillo imposible.

Puedes eligir entre 19 botones de un buen diseño.

210 utilidades para webmasters

En Listible podrás encontrar multitud de recursos webs/ blogs, hay de todo lo que uno puede necesitar...pagerank, faviconos,tablas de ascii, encriptadores, , generadores de botones, menús, generadores de colores...una larga lista hasta llegar a 210 recursos... Woooooooow !!!

Un directorio para ir directo a mis favoritos

Visto en: Digg.com

Leer más en el blogger beta

A petición de Diego os explicaré de una forma sencilla como poner LEER MÁS en la plantilla del blogger beta...vamos allá.

Primero de todo guardar la plantilla HTML antes de modificar algo, el sitio mejor es en bloc de notas, cada vez que quieras modificar guarda la plantilla , así nos evitaremos disgustos.


1.) clicamos plantilla...
2.) seguido de edición de HTML...
3.) busca </head> está casi al final de la plantilla.
4.) pega el código que muestro a continuacón, arriba del </head>

<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'/>

debe quedar así: en medio del </head> y ]]></b:skin>

]]></b:skin>
<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'/>
</head>

Nota: si tenéis otro código en medio del </head> y ]]></b:skin> , no pasa nada, lo importante que esté encima del </head>

5.) guardar plantilla.
6.) ahora clicamos a expandir plantillas de artilugios .



7.) Una vez expandido la plantilla busca el siguiente código que está más o menos en el centro de la plantilla HTML...

<b:includable id='post' var='post'>

8.) Una vez lo hayas localizado quitáis el siguiente código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

.... y lo reemplazáis por el siguiente código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>LEER MÁS</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR NOTA</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

lo que está en azul ( LEER MÁS )podéis poner lo que queráis, si queréis insertar imagen debéis poner <img src=" aquí la url de la imagen "> y quedaría así....

expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'><img src=" aquí la url de la imagen ">
</a></p>

...ahora le damos a vista previa y observaremos si falla algo, si todo t ha salido bien le dáis guardar cambios, cierras expandir plantillas de artilugios.... y guardas cambios otra vez, con esto ya tienes LEER MÁS en tu blog.

9.) Ahora nos vamos a opciones + formato...



...abajo de formato en ( plantilla de entrada ) ingresamos lo siguiente:

aquí el texto

<span id="fullpost">

aquí el texto

</span>

por último guardáis valores. ..con esto lo que hacemos es que cada vez que editamos en crear entradas no saldrá el código, así nos olvidamos en insertarlo cada vez que editamos, si queréis que no salga el LEER MÁS lo borráis en crear entradas y listo.. podréis editar un post sin ningún probrema...


Lo que esta encima de <span id="fullpost"> estará el texto que se verá al publicar el post y abajo estará el texto escondido que se abrirá al clicar LEER MÁS... me explico..no !!!

Ahora queda provar, hacéis un post de prueva si todo ha salido bien...esperemos que sí...sí tenéis alguna duda aquí estaré para solucionarlo...
Saludos y buen fin de semana a todos..que os divertáis

Snipshot, editor de imágenes online

Snipshot es un editor de imágenes online donde podrás cambiarle el tamaño, recortarla,rotarla o ajustar características como el brillo, el contraste o la saturación. Con la imagen ya editada a tu gusto podrás guardarla en el mismo servicio de Webshot o en el directorio de Flickr o si lo prefieres en tu disco duro en cualquiera de los formatos más populares, y eso no es todo con Snipshot podrás guardar imágenes haciendo clik con el botón derecho en cualquier blog o directorio y la imagen será cargada en los servicios de Snipshot.

Firefox Add-ons

Blom, Messenger en Ajax para tu blog.

Blom es un mensajero que te permite comunicarte con los visitantes de tu blog de una forma muy sencilla, solo tienes que copiar el código que Blom te genera y insertarlo en tu plantilla de tu blog y ya podrás disponer de esta aplicación interesante que te permitirá ingresar a una comunidad de bloggers,comunicarte con las personas que visiten tu blog, y promocionar tu blog vía Rss
Blon está en versión Beta.

Scroll para imágenes

Para crear tu Scroll de una forma sencilla, simplemente debes ajustar los valores del código con tus preferencias como la velocidad, dirección, ancho, alto, color de fondo y las url de las imágenes y enlaces.
Deseo que os sea de gran utilidad.
Nota: este scroll no funciona muy bien con Firefox
Un ejemplo del scroll:

Código scroll:

<marquee direction="up" scrollAmount="2" style="background-color: #FFFFFF; text-align: center; width:120px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">
<a href="URL del enlace" title="texto"><img src=" aquí url imagen"</a> <br>
<a href="URL del enlace" title="texto"><img src="aquí url imagen"</a>
</marquee>

Para cambiar los parámetros del scroll:

background-color: #FFFFFF----> ( color de fondo >
scrollAmount="2" ------> ( velocidad de las imagenes )
text-align: center; -----> ( centrar imágenes )
width:120px -------> ( ancho del scroll )
height:150px ------> ( alto del scroll )
border:1px --------> grossor del borde, si no queréis borde poner 0px )

Código para cada imagen:
<a href="URL del enlace" title="texto"><img src="aquí url imagen"</a>

Nota: puedes poner imágenes tantas como quieras, recuerda poner al final </marquee>


Saludos a todos.....

Menús horizontales / verticales CSS descargables

En este directorio ExplodingBoy podrás descargarte 14 menús verticales y 11 menús horizontales de diferentes estilos y colores usando css muy fáciles de entender y de insertarlos en tu blog.

Menu modificable " CSS "

Gema no se si querias este menú, o la "textarea en css o scroll" el de categorias que esta a la izquierda, te pongo los dos: si es algo más ya me lo dirás...

Textarea o scroll:


MENU:

enlace1 enlace2 enlace3 enlace4

Código CSS: pegar debajo del <head>

<style type='text/css'>
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 9pt;
color: white;
}
#menu div.barraMenu {
text-align: left;
}
#menu div.barraMenu a.botonMenu {
background-color: #CCCCCC;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.barraMenu a.botonMenu:hover {
text-decoration: underline overline; color: red;
}
#menu div.barraMenu a.botonMenu:active {
background-color: #CCCCCC;
color: white;
}
</style>

Código HTML:

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href=" url ">enlace1</a>
<a class="botonMenu" href=" url ">enlace2</a>
<a class="botonMenu" href=" url ">enlace3</a>
<a class="botonMenu" href=" url ">enlace4</a>
<p></p></div></div>

Para modificar el menu (código css)

font-family: sans-serif, Verdana, Arial;---> ( para modificar la fuente )

font-size: 9pt; ---> ( tamaño de la fuente menú )

color: white;----> ( color de la fuente "texto" )

text-align: left; ----> ( aliniar menu )

background-color: #CCCCCC; --->( color de fondo "menu" )

color: white;-----> ( color de la fuente "texto menu" )

cursor: pointer; ----> ( cursor al seleccionar menu )

padding: 4px 6px 2px 5px; ----> ( modificar ancho-largo menu )

text-decoration: underline overline; color: red; --->( efecto dos rayas al seleccionar vínculo + color )

background-color: #CCCCCC;----> ( color de fondo menú al activar vínculo)

color: white; --->( color de la fuente al activar menu )

Nota: Este menú es el que uso yo, el código HTML lo coloque en
Plantilla + elementos de la página + Añadir y organizar elementos de la página + añadir elementos en página.

Feliz día Gema y demás blogueros, saludos

Contador de Visitas gratis / Google Pagerank™

Sitio para generar un contador de visitas para tu blog, agregamos los datos que nos pide y elegimos el contador, le damos a generar el código... lo copiamos y nos vamos a plantilla - añadir un elemento en página, elegimos HTML/ javascript y pegas el código y le damos a aceptar...arrastramos el elemento donde quieras que se vea en la página del blog.

En este mismo sitio Google Pagerank™ Tracking puedes poner un Pagerank para mostrar el estado actual o determinar la importancia o relevancia de tu página , eliges el tipo de marcador , te das de alta y te envian el código necesiario para incluirlo en tu blog , para incluir el código el mismo procedimiento anterior.

tooltip o mensaje adicional

Ya hace algunos posts que explique como poner un efecto Title opacity o Tooltip en el blog, os voy a poner otro sin transparencia (opacity) es muy fácil y un resultado increíble...



Código CSS : pegar debajo del <head>

<style>
a.info {
position:relative;
color:#000;
text-decoration:none;
}
a.info span {
display: none;
}
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:270px;
border:1px solid #FF0000;
background-color:#FFDAB9;
color:#000000;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 5px;
}
</style>

Código HTML: pegar en crear entradas del blog

<a href="aquí la url del enlace" class="info"> aquí texto enlace <span><img src=" aquí una imagen gif, png o jpg">Aquí el texto dentro de la ventana</span></a>

Para cambiar los parámetros ( css ):

width:270px; ( ancho de la ventana )
border:1px solid #FF0000; ( grossor del borde + color del borde )
background-color:#FFDAB9; ( color de fondo )
color:#000000; ( color del texto )
text-align: left; (aliniar texto izquierda, center = derecho, right = derecho)
font-family: Arial, Helvetica, sans-serif; ( fuente del texto )
font-size: 12px; ( tamaño de la fuente )
padding: 5px; (establece el control del texto al borde )

Visto en: w3.org

Esto es todo ...feliz día para todos

Iconarchive gran directorio de iconos

Iconarchive es un gran directorio de iconos clasificados por categorías,sí buscas alguno en concreto seguro que en este directorio lo encontrarás, cantidad y calidad, las medidas van desde 16x16px, 32x32px, 48x48px, 128x128px, y los formatos son en png, gif, ico ( no en todas las categorias) puedes bajar un pack completo o solo una imagen, Para Windows,Windows XP,Windows Vista, Mac, Mac OSX y linux

Optimizador de imágenes online

Herramienta que optimiza las imágenes para que pesen menos y las páginas cargen antes.

Dynamic Drive.

Como véis la imagen ha sido optimizada reduciendo el peso , el original pesa 288 bytes y la hemos reducido a 121 bytes, la verdad que para imagenes con poco peso no vale la pena, pero con las de mucho peso sí se nota mucho, solo he puesto esta imagen como un ejemplo.

espero que os sirva, saludos a todos

UrbanFonts ( fuentes tipografías )

Buena recopilación de fuentes (tipografías) para descargar gratis. Para Windows y Mac

UrbanFonts

Font: Cheap Fire Author: Cheap Type

Información adicional " atributo Title o Tooltip "

A veces, por motivos de espacio, el texto explicativo de los enlaces, es muy corto por lo que damos poca información, el atributo title, nos sirve para ampliar información adicional,eso nos permite amplicar la información y aparece al pasar el ratón por encima, ya lo explique en anterior post con el atributo ALT para imágenes, hoy os enseñare como poner un cartel más bonito.
Este es un ejemplo del atributo Title con enlace...
josscat

Este es el efecto Title opacity o Tooltip con color de fondo que voy a enseñar a continuación:
Josscat

Ahora os enseñare como poner un title más bonito...o sea un cartelito que te da información más detallada al selecionar enlace.
1 debes poner este scrpit ( boxover.js ) en tu plantilla HTML, o te lo puedes bajar en boxover.swazz ( carpeta comprimida ) o puedes usar la misma dirección que uso yo ( el código script completo ), si decides bajartelo debes subir el archivo ( boxover.js ) en un hospedaje ( Hosting ) como véis yo tengo en geocities.yahoo una vez subido el archivo copia la dirección y lo pones tal como lo dejo aquí en rojo:

Código: Debes pegarlo encima del </body> de tu plantilla HTML...

<script src=' http://es.geocities.com/josep_m2003/boxover.js '/>

Ahora vamos a ver el segundo código: Pegar en crear entradas de tu blog

<span title="header=[información adicional]body=[ Aquí el texto que quieras]">
<a href="aquí la url"> aquí el texto que quieras enlazar</a></span>

Nota: donde pone Información adicional puedes poner lo que quieras...!!!
Si tenéis alguna duda dejar un comentario, saludos

Generador de cajas con borde redondeado en CSS (Beta)

Herramienta de Neurotic que te permite de manera totalmente automática generar cajas con bordes redondeados con el color y el fondo que tu quieras. Genera automáticamente el código CSS, y el HTML con los divs para que pegues en la plantilla de tu blog.

Está en tres idiomas: English, Español, Català.
La única pega es que el css no es muy compatible con Firefox.... de momento solo para Internet explorer , esperemos que dentro de muy poco lo tendremos para el resto de los buenos navegadores como el Firefox Opera, etc
Nota: Este generador está en versión Beta

Iconos by MouseRunner ColorCons Free

Bonitos packs ColorCons con aspecto de cristal , que consta de 49 iconos en formato PNG y estan disponibles en 4 colores, azul, verde, gris y rojo, Los tamaños disponibles van desde 48×48 a 128×128.