Poner Navbar fija en la parte de abajo

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin> poner el siguiente código:

#navbar-iframe {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index:999
}

Guardar Plantilla.

Ver ejemplo:

5 excelentes opciones para agregar un Slideshow a tu blog

Agregar un slideshow a tu blog es muy sencillo, echando mano de los diferentes sitios que ofrecen widgets para crearlo.



Les tengo aquí una recopilación de los mejores sitios para lograrlo, muchos de ellos cuentan con efectos muy atractivos que harán de tu slideshow todo un espectáculo visual, ó si buscas algo bonito pero más formal, también lo podrás encontrar..., :) ahí te van:

 Slide, este es un sitio, de los mas populares en la red, con el que puedes crear tu slideshow y esta disponible en español, y solo te toma tres pasos para crearlo, el mismo programa te lleva de la mano para lograrlo, puedes personalizar el estilo, el fondo, el tema, agregar música, agregar efectos, personalizar el tamaño etc, etc, como puedes ver es muy accesible, además puedes ver la vista previa (de el ejemplo)  de todos las características que agregues, así que no habrá sorpresas con el resultado.

 Imageloop este sitio es parecido al anterior, aunque tiene algunos estilos diferentes para mostrar tus fotografías ó imágenes, también tiene muchas características que puedes personalizar a tu antojo y para hacerlo solo te tomará 3 pasos.

 Photobucket  Este es un sitio muy popular para almacenar imágenes ó foto.



También  ahí puedes crear tu slideshow, si ya tienes una cuenta con ellos será muy fácil, estando en My Home vás a All albums y luego das click en la opción de Slideshows, luego seleccionas las imágenes que quieres agregar, cuentan con una gama de estilos atractivos y muy bonitos, (hay uno de una televisión vieja que me gusta mucho), también puedes elegir el tamaño que más te convenga, ¿genial no?

 Flickr Este sitio también muy popular para el almacenamiento de imágenes sobre todo para los que quieren compartirlas con otros, puedes acceder a flickr por medio de tu cuenta de yahoo.



El slideshow que flickr ofrece es muy elegante y lo que más me gusta, sin publicidad (enlaces, botones y demás) alrededor de este, lo cual lo hace ver mas limpio y ordenado, puedes acceder a flickr por medio de tu cuenta de yahoo.



Será muy fácil crear tu slideshow, ya que solo necesitarás el código HTML para pegarlo en tu blog, el cual vas a tener con este Generador de Slideshow, que ellos mismos ofrecen, ahí mismo puedes elegir el tamaño, para que se adapte al espacio de tu columna o de el lugar donde quieras colocarlo dentro de tu plantilla.

Nota: ¿No recuerdas cuál es tu username?… no te preocupes, es el nombre que aparece al final de el enlace en la barra de navegación, al estar en de tu galeria.



Ejemplo: http://www.flickr.com/photos/beatrizlopez/, en este cao beatrizlopez es el username.

 Ah! pero Blogger tampoco se podía quedar atrás, también puedes agregar un slideshow agregando el gadget o widget  que dice presentación, y mostrar un slideshow de imágenes que tengas almacenadas en  picassa, flickr ó photobucket.



Para ello solo tendrás que escribir el nombre de usuario del servicio "fuente" de las imágenes, seleccionar el álbum si aplica, guardar el contenido y listo.

Tip: Algo muy importante independientemente del servicio que decidas usar, es que las fotos ó imágenes que uses sean del mismo tamaño para que el slideshow luzca mejor.



 Opinión personal: A mi en particular me gusta mucho el slideshow que ofrece flickr, ya que luce limpio, elegante, sin embargo tu eres el que elige cual es la mejor opción que se adapte a tus gustos y necesidades.

Espero que te sea de utilidad, hasta la próxima.

1 de Mayo Día Internacional de los Trabajadores

DÍA DE LOS TRABAJADORES (1 de MAYO)

ORIGEN

En 1889 se fija el 1º de mayo como el Dìa internacional de los Trabajadores
En la ciudad de Chicago en los Estados Unidos ocurrieron varios sucesos trágicos; la huelga obrera del 1º de Mayo en reclamo de 8 horas de trabajo, la protesta sindicalista y la condena a la horca de los dirigentes y militantes anarquistas. Estos acontecimientos fueron tenidos en cuenta más tarde por el Congreso Internacional de Trabajadores, reunido en París (Francia) en Julio de 1889, donde se decidió homenajear a estos mártires de Chicago - ajusticiados por sus ideales políticos - fijando como fecha el 1º de Mayo de cada año.
Dicha conversión inició en aquella histórica junta la revisión de las leyes y los derechos de los asalariados.
En 1948, la Asamblea General de las Naciones Unidas proclamó un documento en favor del trabajador.

EL TRABAJO ES UN DERECHO DE TODOS

El trabajo le permite a los hombres y mujeres alcanzar el bienestar material, desarrollarse como individuos y en condiciones de libertad y dignidad, de seguridad económica y en igualdad de oportunidades. Los derechos de los trabajadores son tambièn derechos humanos.
Para el Instituto Interamericano de Derechos Humanos los derechos del trabajador son garantías que le permiten a la persona desarrollarse de manera integral y plena en la vida social

La Organización Internacional del Trabajo (en sus siglas OIT), integrada por más de 150 países que aceptan su autoridad y responsabilidad para hacer que los derechos de los trabajadores se hagan efectivos, establece que:
todos los seres humanos, sin distinción de raza, credo o sexo, tienen derecho a perseguir su bienestar material y su desarrollo espiritual en condiciones de libertad y dignidad, de seguridad económica y de igualdad de oportunidades.
Los derechos de los trabajadores son inherentes, irrenunciables, integrales, exigibles e indispensables.

El trabajo, sin embargo, sigue siendo un problema. Antes por las malas condiciones en que se realizaba, y hoy por su escasez; se agrega además el trabajo infantil de manera ilegal y menos oportunidades para las mujeres aunque en este aspecto se hayan realizado muchos avances ,ya que la participación femenina en el mercado laboral se ha incrementado más que en cualquier otra época y ha representado una de las grandes transformaciones sociales de este siglo.

Algunas de lasproblemáticas actuales en torno al trabajo son:
en primer lugar las largas jornadas de trabajo que tienen enormes efectos negativos sobre la salud y la vida familiar de los trabajadores;
las jornadas de trabajo mas extensas se concentran en las empresas mas pequeñas y en las mas grandes.
A su vez se ha consolidado la tendencia a una baja remuneración estable, a un salario real vinculado a la producción y a la aparición de intermediarios entre contratante y trabajador.
Por otra parte los actuales tendencias de consumo crean una dependencia a una mayor carga horaria laboral.
Los métodos de trabajo más flexibles, la subcontratación y el trabajo a tiempo parcial dificultan la organización de los trabajadores para defender sus propios intereses, asegura un nuevo informe de la Oficina Internacional del Trabajo denominado "Su voz en el trabajo". El mundo del trabajo está influenciado de manera creciente por la mundialización de la economía y en especial por la apertura de los mercados mundiales, la competencia y la aceleración de los cambios tecnológicos y la revolución en la información. Pero los efectos no son los mismos en todas partes, y la inclusión y exclusión simultáneas de personas, regiones y sectores económicos plantea varios y urgentes problemas.

Etiquetas fieldset y legend

La etiqueta fieldset se empieza con <fieldset> y se cierra </fieldset>.

Ejemplo:

Lo que conseguimos con la etiquetas fieldset es un rectángulo enmarcando el texto que esté incluido dentro de él.

Por defecto el ancho será del 100%. Si queremos darle una anchura predeterminada, lo que deberemos hacer es agregarle un código CSS.

Ejemplos:

<fieldset style="width:50%">Esta caja tiene un 50% de ancho.</fieldset>

<fieldset style="width:200px">Esta caja tiene un 200px de ancho.</fieldset>

La etiqueta legend se empieza con <legend> y se cierra </legend>.
Se pone dentro de la etiqueta fieldset, nos permite titular o etiquetar.

Ejemplos al 80%:

Titulo

<fieldset style="width:80%"><legend>Titulo</legend>Acá el contenido o texto.</fieldset>

Por defecto el titulo se mostrara del lado izquierdo. Si queremos mostrarlo al centro o a la derecha se debe utilizar el parámetro “align”.

Titulo

<fieldset style="width:80%"><legend align= "center">Titulo</legend>
Acá el contenido o texto.</fieldset>

Titulo

<fieldset style="width:80%"><legend align= "right">Titulo</legend>
Acá el contenido o texto.</fieldset>

Se puede personalizar agregandole códigos CSS como:

Titulo

<fieldset style="border: 3px dashed #000099;width:80%;background:#FF8000;color:#ffffff"><legend style="background:#C0C0C0;border: 1px solid #000099;color:#ff0000">Titulo</legend>
Acá el contenido o texto.
</fieldset>
Acá el contenido o texto.

FonTs2U Fuentes gratuitas

Cuando vamos a realizar algún trabajo llegamos al punto de escoger un tipo de fuente para el título, no siempre es sencillo encontrar una fuente acorde con el diseño así que damos vueltas y más vueltas hasta encontrar alguna, lo malo es que no todas las fuentes son gratuitas. 

Ese problema no lo tendremos en FonTs2u allí podemos descargar multitud de fuentes gratuitas que encontraremos clasificadas por categorías y un menú lateral para informarnos de las nuevas fuentes que se van añadiendo o las más descargadas.

Wallpapers WIDE

REFERENCIA:Utilidades para Webmasters

Cambiar "comentarios" por otro texto personalizado

Esta entrada esta dedicada a Cocofansclub

Ir a Diseño, Edición de HTML, expandir artilugios.
Y buscar las siguientes lineas:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

Cambiarlas por las siguientes:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments ==0'>Deja tú comentario, Anímate ¡Sé el primero!<b:else/><data:post.numComments/>: Ya han dejado su comentario, otro puedes ser tú.</b:if></a>
</b:if>

Cambiar el texto en rojo por el que más les guste.
Guardar cambios.

Fuente: La genia de mi amiga Rosa.

Hoy todo va a salirme bien (El arrebato)

Hoy todo va a salirme bien, una canción que nos da fuerza cuando creemos que todo nos va de malas.

Es mi deseo para todos ustedes, que en este día todo les salga bien.

Estupendo generador de esquinas redondeadas en imágenes

No sé si recordarán una entrada sobre un efecto que a mi me gusta mucho es el efecto Glossy creado con un script que además redondea las esquinas de cualquier imagen.

Pues el tema de hoy siguen siendo los generadores online y esta vez vamos a conocer un sitio que seguramente vaya a nuestros favoritos se trata de Round My Pic una página proporcionada por Jose, a secas autor de Cogito ergo scribere  espacio que recomiendo visitar por su temática amena y variada.

En Round My Pic simplemente tenemos que subir la imagen desde nuestro PC y marcar el botón Round it Now ¿fácil verdad? el resultado son esquinas redondeadas con un sutil efecto de relieve en el borde que recuerda mucho el efecto Glossy.

Me ha gustado mucho esta aplicación, otra más a la nube de generadores online.

Mostrar códigos con Syntax Highlighter

Syntax Highlighter.

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner los siguientes códigos:

El core de Syntax Highlighter:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js'></script>

Para cada lenguaje (Brushes):
Debes de incluir tantos "brushes" como vayas a necesitar.
En este caso Javascript,Css,Xml:

<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js'></script>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js'></script>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'></script>

Lista completa de Brushes:


Por último hay que activarlo:

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Guardar plantilla.


En tus entradas hay que colocar tu código dentro de la etiqueta pre junto con la clase que resaltará tu código:

Ejemplo para resaltar Css:

<pre class="brush: css">
Acá el código
Acá el código
Acá el código
Acá el código
Acá el código
Acá el código
</pre>

El atributo class define el lenguaje a resaltar.

Tiene varias opciones en la web del autor entre ellas el color del tema.

SyntaxHighlighter 2,0 introdujo temas CSS personalizada. Esto significa que al cambiar a un solo archivo CSS que puede cambiar completamente la apariencia de la sintaxis resaltada. Un pequeño número de temas de colores conocidos se incluyen con SyntaxHighlighter y usted puede hacer fácilmente su propio tema.

• shThemeDefault.css
  
• shThemeDjango.css
  
• shThemeEmacs.css
  
• shThemeFadeToGrey.css
  
• shThemeMidnight.css
  
• shThemeRDark.css
  

Puede ver y elegir de la lista su tema y cambiar el siguiente código de mas arriba:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

Como descomprimir Javascript para leerlo facilmente

Si te dedicas al desarrollo de sitios web seguramente el Javascript no es nada nuevo para ti, o si no tal vez lo hayas usado en algún Bookmarklet o script de Greasemonkey, y si eres como yo de los que les gusta mirar el código de los sitios web que visitas, seguramente te habrán encontrado con código que son difíciles de leer debido que están comprimidos “minified” como algunos plugins de jQuery o Mootools, pero existe una solución para descomprimir este código y hacer de fácil lectura con tus tabulaciones (indentaciones) espacios y saltos de línea como debe de ser, la herramienta que lo hace se llama Javascript beautifier.


Javascript beautifier además te permite personalizar la forma de descomprimir el código, dejando los corchetes en la misma línea o no, preservando los saltos de línea, manteniendo la indexación de las matrices o y más.

Fuente:

Generador de mapeado en imágenes

Ayer hablábamos de generadores, en concreto de Isdntek.

Allí tenemos "Image Mapper" es un generador que añade enlaces sobre una imagen o dicho de otra forma es un mapeado de imágenes.

Oloman nos ofrecía una estupenda explicación que recomiendo porque nos explica con detalle la forma de crear las coordenadas mediante HTML,  me parece la forma más correcta de hacerlo sin embargo la facilidad de uso de este generador tienta bastante porque el resultado es el mismo y nos ahorramos muchos cálculos y tiempo. Aún así vuelvo a decir que es mucho más útil aprender a hacer las cosas que hacerlas por la vía fácil sin saber lo que estamos haciendo.

Para crear la imagen con mapeado con  "Image Mapper" lo primero que necesitamos claro está es una imagen a la que añadiremos distintos enlaces, sabemos qué partes de la imagen son un enlace porque le vamos a añadir un texto en el lugar que irá cada uno. El texto lo podemos añadir con cualquier editor por ejemplo el Paint que todos tenemos en el PC.

Para el ejemplo he añadido tres textos es decir uno para cada enlace a modo de menú aunque también es posible y original simplemente utilizando algunos motivos de la imagen.

Una vez tenemos la imagen la subimos a nuestro sitio de alojamiento puede ser una entrada del blog que guardaremos más tarde en borrador o directamente a nuestro álbum de Piacasa de esa forma conseguimos la url de la imagen.

1- Añadimos la url de la imagen en "Image URL" la imagen se mostrará en la parte inferior cuando marquemos el botón "Load Image".
2-  Añadimos la url del sitio que vamos a enlazar en "Link".
3- En "Caption" es el espacio para añadir el texto que se mostrará al pasar el puntero sobre el enlace.

4- Marcamos sobre "New Link" y se mostrará un cuadradito que arrastraremos sobre el lugar exacto que será el texto que va a hacer de enlace o link. En las esquinas de ese cuadradito con el botón izquierdo del ratón podemos estirar y encoger hasta dar con el tamaño indicado.

Para cada enlace repetimos los pasos 2 - 3 y 4 una vez terminamos marcamos sobre el botón "Make Code" y nos proporciona el código listo para copiar y pegar en cualquier sitio del blog que permita html.

Mostrar ultimas entradas del blog con desplazamiento horizontal

Ver ejemplo:

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código:

.feedmarquee a{
font-size: 11px; /* tamaño del texto */
text-decoration: none;
color:#000; /* Cambiar color del texto */
}
.feedmarquee {
font-size: 12px;
color:#FEE405;
position:absolute;
background: transparent; /* Cambiar color del fondo */
padding:10px;
width: 600px; /* Cambiar ancho */
}

Ir a Diseño, Elementos de la página y añadir un gadget HTML/Javascript.

Poner el siguiente código:

<script src="http://img42.xooimage.com/files/7/b/5/recentpostsscrollervku-1b6927d.js" type="text/javascript"> </script>
<div class="feedmarquee">
<script type="text/javascript"> var nMaxPosts = 15; var sBulletChar="-" ; var nWidth; var nScrollDelay = 155; var sDirection="left"; var sOpenLinkLocation="p"; </script> <script src="http://loseasi.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollervku" type="text/javascript"> </script></div>

Modificar:
15 por el total de entradas a mostrar.
http://loseasi.blogspot.com por la URL de su blog.

Mover el gadget a la posición que se quiera mostrar.

Proximamente la plantilla "Bella y Femenina"

Hola, hola, ¿cómo están?, me da gusto saludarlos, y anunciarles que actualmente estoy trabajando en dos plantillas, una de cocina y esta, de la cual les doy un adelanto.



Aún necesito terminar algunos detalles, así como terminar la columna lateral, columna del menú y el footer,  pero el concepto ya esta hecho así que pronto estará disponible para usarse, ¡estén atentos!.



También aprovecho para decirles que las plantillas:



-Cuentos de Noche, Blog Rockero, Entre Niños TV's (Español), ya están actualizadas (con las imágenes alojadas en blogger).



Así que si usan una de estas plantillas, vuélvela a instalar, te cuesta solo unos segundos y además ya no perderás tus gadgets (el contenido de elementos añadidos en tu sidebar. En este post  expliqué por que lo hacía.



Bueno me despido deseándoles un muy buen fin de semana, ...pásensela muy bien, ok chicos(as).



:D Hasta luego...

Generador de marcos y algunos más

Estuve leyendo el otro día que hasta los mejores diseñadores dan buena cuenta de las herramientas online en concreto de los generadores porque hay algunos que vale la pena conocer, para tener a mano los que utilizo hice una nube de enlaces que está en el footer, a lo cómodo y rápido no hay quien se le resista.

Este generador de marcos pertenece a la página de Isdntek un sitio donde también podemos crear botones, menús, efecto shadow de cualquier color en las imágenes, galerías y entre otras muchas curiosidades algo muy interesante, un generador para crear un mapa de enlaces sobre una imagen. Pero de esto último hablaremos mañana.

Crear un marco es tan sencillo como jugar, vamos escogiendo el borde, grosor, color o textura y nos proporciona en la parte inferior el código para añadir en nuestro blog.

El texto ....contents go here.... es el que debemos sustituir por el nuestro, quien dice texto dice una imagen o cualquier contenido.

Contenido...

Contenido...

El vista previa

Pues no es que esta entrada nos vaya a ser de utilidad porque es obvio que todos sabemos de qué trata y el que no lo haya percibido en su blog con la imagen todo queda dicho, es el último cambio de Blogger o al menos el último que he visto.

Con todas las mejoras que nos están sorprendiendo no queda más remedio que ser positivos y optimistas.

Si alguien se pierde ya sabe que está en vista previa, regrese a la otra pestaña que ahí sólo puede mirar.

Pink Glove Dance

Canción: Down - Jay Sean Feat. Lil Wayne

Este vídeo ha llegado a mi bandeja de correo, el texto que lo acompaña dice que todo el personal del hospital baila en beneficio de la lucha contra el cáncer de mama. Si se consigue hacer funcionar y mandar esta vídeo 1 millón de veces, el fabricante de los guantes rosa, les entregará una donación considerable para el tratamiento del cáncer de mama.

No sé si se cumplirán las expectativas sobre esta idea ni la forma de controlar la cantidad de veces que ha sido enviado, si sé que a enviar correos de forma masiva se le llama spam pero tampoco es necesario hacerlo de llegar de esa forma.

Pienso que, aunque la idea no llegara a dar sus frutos el mensaje de solidaridad y esperanza es lo que cuenta.

- Me comentan que se contabiliza cada click en el enlace de YouTube (ya no hay excusa)

Introduciendo la plantilla Fanstasía Nocturna

Hola, ya les tengo lista la plantilla grunge que les había dicho, la pueden usar para su blog personal, un blog de escritura o cualquier otro propósito.



Sientete libre de usarla, y sobre todo de decirme que te pareció esta plantilla, estoy abierta a cualquier crítica y/o sugerencia.

 

Demo         Bajar la Plantilla         Download English version

                  

Características:

•  Plantilla de dos columnas.


•  Menú de Navegación en el top que puedes personalizar.


•  Icono de twitter en la cabecera.

Créditos: He utilizado papel de la columna lateral de MDesings, capa de ladrillos e ícono de twitter de: Webtreats etc.  y segunda capa grunge de: Backgrounds etc.

Instrucciones para personalizar el menú de navegación:

Paso 1. Ve a Diseño > Edición de HTML y encuentra el siguiente código:

<div id='top'>

        <ul id="topnav">

         <li><a expr:href='data:blog.homepageUrl'>Inicio</a>|</li>

                       <li><a href='#'>Contacto</a>|</li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>RSS</a>|</li>

                   ...

 

Paso 2.  Sustituye # el gatito por la url de el enlace que quieras que se dirija cuando hacen click en Contacto, cuidando de no eliminar las comillas que estan antes y despuées de este.



Los textos que aparecen resaltados de rojo, son los de los enlaces respectivamente.





No dudes en comentar cualquier duda y/o sugerencia.

No olvides Suscribirte a mi blog para recibir las actualizaciones e información sobre plantillas nuevas.

Hasta la próxima y que tengas un mmm... excelente día.

Rsizr » redimensionar imágenes online

Rsizr es una herramienta muy útil que nos permitirá redimsensionar nuestras imágenes , de forma gratuita y online.
Para usarla, bastará con subir la imagen que deseemos redimensionar. Cuando la imagen esté al tamaño adecuado, damos click en "Save Picture"
Soporta los formatos jpg, png y gif.

Click en la imagen para ampliar

Rsizr

Emoticones - copiar y pegar en el formulario

A petición de varias personas vamos a añadir los emoticones en los comentarios y al mismo tiempo añadiremos una tabla sobre el formulario con la idea de poder copiar y pegar los emoticones.

Los emoticones, o mejor dicho el script los añadiremos directamente a la plantilla, nos evitamos con ello buscar alojamiento externo para el script. Hay otra forma de añadirlos, es una excelente idea que J.Miur explicó en su día, se trata de añadir el script en el interior de un gadget de HTML evitamos con ello buscar alojamiento externo y manipular la plantilla, en ambos casos recomiendo antes de empezar guardar copia de la plantilla por si comentemos algún error poder enmendarlo.

1- Añadimos los emoticones en la plantilla.

En plantilla, edición de HTML justo después de ]]></b:skin> añadimos los estilos para que los emoticones queden en la misma línea del texto:

<style type='text/css'>

.comment-body p img {vertical-align: top; padding-right: .3em;}

</style>

Copiamos el contenido de este archivo y lo pegamos a continuación del anterior.
Guardamos los cambios y marcamos para expandir la plantilla buscaremos el siguiente código de comentarios:

<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>

La línea en negrita la vamos a sustituir por lo siguiente:

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>

<script type='text/javascript'>

cual = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;

emoticonComentario(cual);

</script>

Si probamos veremos que nuestros comentarios ya tienen la opción para añadir emoticones.

2- Añadimos la tabla.

En plantilla edición de HTML tenemos que buscar lo siguiente:

<b:includable id='comment-form' var='post'>

<div class='comment-form'>

<a name='comment-form'/>

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

<p><data:blogCommentMessage/></p>

<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<!-- Aquí pegaremos la tabla de emoticones -->

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

La tabla que debemos añadir la podemos copiar del siguiente archivo.
¿El ejemplo? en el formulario de comentarios de esta misma entrada.

Las imágenes del script son gentileza de J.Miur de Vagabundia y están alojadas en ImageShack, las de la tabla las he alojado en Blogger. Recomiendo sustituirlas por otras alojadas en el sitio que normalmente usa cada uno.

El proceso es muy sencillo, copiamos la url de cada emoticon y la pegamos en la barra del navegador, cuando visualizamos la imagen la descargamos a nuestro PC, de esa forma las podemos subir en una entrada del blog o directamente en el en álbum de Picasa. Copiamos la nueva url y la sustituimos por las que contiene el script y la tabla.
Si queremos seguir jugando con los emoticones quizás interese "Emoticones y algo más"

Supalogo generador de logos online

Supalogo es una herramienta online que nos ayudará a crear logos y personalizar texto en un abrir y cerrar de ojos. En Option podemos escoger tipo de fuente, tamaño, grosor, color de fondo o transparencia si así lo deseamos y la posibilidad de dejar el texto simplemente de color o añadir un agradable efecto glossy o gradient.

REFERENCIA: Juanguis de Punto Geek

Imágenes gratuitas libres de derechos

Imágenes y más imágenes es lo que siempre necesitamos para ilustrar nuestras entradas para decorar esto de aquí y lo otro de más allá ¿libres de derechos de autor? ¿tendrá copyright? ¿es necesario hacer referencia del sitio? para no hacernos estas preguntas una y otra vez en Photo Laboratory tenemos la oportunidad de descargar libremente hasta 35 Mb diarios de imágenes libres de derechos y totalmente gratuitas tanto para uso comercial como personal.

2 Fondos Exclusivos para Twitter

Hola, ¿qué tal?



Ahora que anduve con el rollo de Twitter, estuve trabajando en la creación de dos fondos, los cuales quiero compartir contigo. Uno es con fondo oscuro y con un look moderno y el otro con fondo de ladrillos estilo grunge y a su vez usando algunos elementos gráficos abstractos.

 Tamaño de los dos fondo

1920 pixeles de ancho, por 1440 pixeles de alto. No necesitas añadir efecto mosaico (que se repita la imagen).

 Cómo instalar el fondo en twitter

Paso 1. Estando en tu página de Twitter, haz click en Configuración en el menú de navegación.

Paso 2. Luego haz click en Diseño.

Paso 3. Después, haz click en Cambiar imagen de fondo.

Paso 4. Finamente, sube la imagen  y Guarda los cambios.



Fondo #1

Descargar

 Fondo #2.

                           

Descargar

Crédito por el pájaro azul simpático usado en el segundo fondo: Bittbox.

Cómo hacer una copia de las entradas publicadas

Hace unos días squirrel me preguntaba cómo descargar una copia de todas las entradas publicadas para que , en el caso que borremos nuestro blog accidentalmente u otro caso, no perdamos todos nuestros post.

Para descargar una copia de los post, donde también se guardarán sus comentarios, haremos lo siguiente:

1.§ Vamos a Configuración - Básico y Herramientas del blog.

2.§ Veremos tres opciones Importar blog - Exportar blog - Suprimir blog.

3.§ Escogemos la opción Exportar blog.


4.§ Aparecerá un cuadro titulado "Exporta tu blog". Damos click en "Descarga tu blog".

Eso sería todo; muy sencillo y en poquísimo tiempo.

Si deseas, puedes aprovechar también para descargar una copia de tu plantilla.

Texturas imágenes reales de maderas

Buscando texturas de madera he conocido Defcon x una página para tener a mano si pensamos en cambiar nuestro diseño, las texturas son imágenes reales de maderas y los resultados espectaculares.

REFERENCIA:Utilidades para Websmaster

Añadiendo una imagen en la caja de contenido

Hace unos días me preguntaban por la forma de mostrar los códigos en algunos ejemplos, propuse una entrada explicándolo y aquí la tenemos.

Lo primero de todo es crear la caja de contenido personalizada al estar explicado con anterioridad podemos seguir esos pasos y continuamos con lo siguiente que tratará de añadir esas imágenes que vemos en la parte superior izquierda de la caja. Los ejemplos los podéis ver en esta misma entrada son esas imágenes de fondo rojo y texto blanco que nos indican la clase de código que vamos a copiar si es CSS o HTML.

En plantilla edición de html añadimos los estilos para ubicar esas imágenes, supongamos que deseo añadir una imagen que la vamos a mostrar cuando añadimos CSS añadimos entonces una clase a esa imagen que la llamaremos "css"

pre.css {

background:transparent url(url-imagen) no-repeat scroll left top;

}

Donde url-imagen lo sustituimos por la url de nuestra imagen, guardamos los cambios y en la entrada que deseamos mostrar la caja de contenido con imagen añadimos unas líneas de html con la misma clase que se asocia a esa imagen que sería lo siguiente:

<pre class="css">Contenido de la caja

</pre>

Con eso, veremos la imagen en la parte superior izquierda de nuestro contenido:

Contenido de la caja

Pero, si seguimos los pasos del enlace para personalizar la caja de contenido también tendremos que añadir <code> al principio de nuestro contenido y </code> al final, de forma que nos quedaría más o menos así:

<pre class="css"><code>Contenido de la caja
</code></pre>

¿Se puede hacer con cualquier otra imagen y contenido? puede hacerse, simplemente sustituyendo la url de la imagen y el contenido, sólo hay que entender que el nombre de la clase que añadimos asociado a esa imagen debe coincidir con el que añadimos en html para mostrar la caja de contenido.

Un último detalle, si te gustan las imágenes que se han usado en esta entrada eres libre de llevártelas pero por favor utiliza tu propia url alojándolas en tu álbum de Picasa o cualquier otro sitio.

Compartidisimo en Twitter

Definitivamente las redes sociales están en auge o como diríamos muchos "en su mero apogeo".



Ahora, a través de servicios como Twiter, Facebook etc., es posible compartir información de manera inmediata y al momento, así como links, fotos, comentarios, etc.



Esto representa muchas ventajas, entre ellas acceder a  información  de contenido  interesante, de hecho ese es mi propósito al empezar con este rollo de twitter, después de un tiempo de estar al aire o mejor dicho en la red con Blogger, he decidido empezar una página en twitter.

¿Por qué y para qué?, bueno, para poder formar una red para compartir información de utilidad entre los usuarios de este servicio.



Definitivamente hay mucho que se puede compartir, en muchas ocasiones encuentro navegando por la red información muy útil para los blogueros que definitivamente vale la pena difundir, además de otra información de actualidad y mensajes importantes que puedan ser compartidos sobre mi blog, y a través de Twitter esto será posible.

¿Cómo funciona?



Es muy fácil, si te interesa recibir mis actualizaciones en tu propio historial es necesario que me sigas, para ello tienes que tener una cuenta de Twitter y si no la tienes solo te lleva unos minutos crearla, hecho lo anterior, recibirás todos mis tweets desde tu página de inicio de twitter.



También es posible recibir información a través de tu celular si activas esta función.



 Entonces,  ¿Me sigues?. Tú decides.

Nota: Twitter a diferencia de otras redes sociales no significa una solicitud de amistad, es decir no necesariamente es algo mutuo, puedes seguir a alguien, sin que este te siga o viceversa, el seguirme no significa que yo recibiré tus actualizaciones, para ello, yo tengo que seguirte a ti.

Colocando descripción del blog

Cuando buscamos alguna página o blog, vemos que debajo del título del blog aparece una descripción del mismo.


G me preguntaba cómo hacer para que aparezca la descripción, así que hoy vamos a ver cómo conseguirlo.

Pirmero, deberemos de entrar a Configuración - Básico; veremos en una parte donde dice "Descripción " y al lado un recuadro donde escribiremos un texto que resuma el contenido de nuestro blog, de qué trata, etc.

Click en la imagen para ampliar

Otra manera de colocar la descripción sería a través de la cabecera del blog.