Linwithin - enlaces con imagen a otros posts

Tutoriales - El escaparate de Rosa

En LinkWithin podemos añadir un gadget de Entradas relacionadas con miniatura de imagen.

[1] Accedemos a la página de LinkWithin y a la derecha vemos el formulario para obtener el gadget. Tenemos que introducir nuestro email, la url del blog donde vamos a colocar el gadget y la plataforma, que en nuestro caso será Blogger:

[2] Si nuestro blog tiene fondo oscuro en las entradas, marcamos la opción que dice "My blog has light text on a dark background" para que el gadget adapte el color de su texto al del fondo.
Pinchamos en "Get Widget".

[3] Pasamos entonces a otra página donde se nos dan las instrucciones para integrar el gadget, que se hace de la misma manera que cualquier otro que se integra directamente al blog.
Pinchamos en "Install Widget".

[4] Una vez instalado el Gadget este se verá en la sidebar pero solo en la parte de diseño,  dentro de ese gadget está el código que le hace funcionar, así que para eliminar las entradas relacionadas cuando ya no nos interese usarlas, lo unico que tenemos que hacer es eliminar ese gadget.

Las entradas relacionadas se mostrarán de forma automática al final de cada entrada, justo sobre el post-footer (pie del post) .

Algunas de las cosas que he notado en mis pruebas:

Si en nuestro blog no usamos imágenes en las entradas, en el gadget se verán solo los títulos de los posts.

El gadget se carga una vez ha cargado el resto del blog.

Algunas veces el gadget tarda algo en cargar e incluso no llega a hacerlo; cuando esto pasa en el lugar que el gadget con el código ocupa en la sidebar, se muestra un enlace a LinkWithis.
Para evitar que salga este enlace, en el "editar" del gadget eliminamos esta parte del código:

<a href="http://www.linkwithin.com/"><img alt="Related Posts Widget for Blogs by LinkWithin" style="border: 0" src="http://www.linkwithin.com/pixel.png"/></a>

Emoticonos

Poner emoticones en tu blog en realidad es sencillo, lo complicado realmente es crear el Script para hacerlo, pero aqui en esta miniguia pongo a disposicion de todos un Script que he creado y depurado, es el mismo que utilizo en este blog asi que los emoticones que pondremos son los siguientes:

:-) :-s :-p :-[ :-d }:-] x* ;-d :-| :-} :*) :-( ;-) xd

Antes de empezar quiero hacer una aclaracion: El Script del codigo lo pongo en un archivo de texto que pueden descargar, no pongo el codigo aqui escrito en blog porque al poner los cogigos del Script habrian partes en las que ustedes verian en vez de codigo los emoticones, espero darme a entender :-S

Bueno empezemos:


PASO 1

Debes ir a tu plantilla de blogger: Diseño > Edicion HTML y darle click a Expandir plantillas de artilugios una vez estando ahi tienen que buscar </head>

Un truco para buscar codigos en la plantilla de blogger es presionar Ctrl+F esto despliega una pequeña ventanita donde introduces lo que quieres buscar

Bueno una vez lo hayas encontrado tienes que pegar encima del </head> el codigo de Script que he puesto dentro de este archivo de texto

Descargar el Codigo del Script

El codigo es grande(no te asustes) lo unico que tienes que hacer es pegarlo y LISTO!!! ya tienes los emoticones


PASO 2

Ahora que ya tienes instalado el Script hace falta poner encima del formulario de comentarios de tu blog los codigos con la indicacion de los emoticones, para que se vea asi:


Para hacer esto, tienes que insertar una tabla html con los emoticones y el simbolo a utilizar, yo me he tomado la molestia tambien de hacer la tabla que igual que el Script esta en un archivo de texto

Descarga La Tabla de los Emoticones

Cuando ya tengas el cogido de la tabla tienes que ir a tu plantilla y con los artilugios expandidos buscar el siguiente codigo:

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

Ahi justo debajo de ese codigo debes pegar todo lo que esta adentro del archivo de texto de la tabla


PASO 3

Guarda los cambios en tu plantilla y ya puedes utilizar tus emoticones, tanto en los posts como en los comentarios ;-)

Extraído de   Trucosgeek

Formato texto

 

Align="CENTER":      define la alineación de la línea (center, right, left).

Size="2":   define el grosor, en píxel, de la línea.

Width="400":   define la longitud horizontal, en píxel, de la línea. Puede también expresarse en tanto por cien respecto al espacio a disposición: width=80%.

Color="RED":    define el color de la línea.

Noshade:    si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente, produce dicho efecto.

WIDTH=178     es la dimensión horizontal (ancho) de la imagen

HEIGHT=180     la dimensión vertical (alto)

ALIGN=top:    alinea la primera línea de texto con la parte superior de la imagen.

ALIGN=middle:     alinea la primera línea del texto con el centro de la imagen.

ALIGN=bottom:     alinea la primera línea de texto con la parte inferior de la imagen.

ALIGN=left:     el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.

ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.

Ensanchar la plantilla Mínima

Tutoriales - Ayuda para tu Blog 

Bueno en este tutorial les voy a mostrar como pueden cambiar el ancho de su blog (cuerpo, entradas, sidebar, titulo, etc)
Para esto les dejo 5 pasos sencillos para que lo puedan hacer, ya sea disminuir o agrandar el ancho de tu blog.
En estos 5 pasos les voy a mostrar como ensancho mi blog, ya de paso les dejo una medida muy apropiada y conveniente para ensancharlo, pero esta de mas decir que pueden elegir la medida que ustedes quieran.

1) Primero que nada deben dirigirse a la parte de diseño del blog, a la edicion de codigo HTML. No hace falta que expandamos los artilugios. Nececitamos localizar la instruccion #outer-wrapper ( Esto es como quien dice, el ancho del blog en si, dentro del blog esta el espacio para las entradas y la sidebar, si queremos ensanchar estas ultimas, primero debemos hacer espacio en el blog para que luego entren sin problemas). La primera linea debajo de:#outer-wrapper es width: 660px;Cambiaremos esa línea por width: 850px; (width significa ancho y el numero es la cantidad de pixeles que le estamos dando)

2) A continuacion vayamos a ensanchar el espacio de entradas (main), si buscamos mas abajo de lo anterior debemos encontrar: #main-wrapper ( y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;)

3) Un poco más abajo vemos #sidebar-wrapper (, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;)



4) Ahora vayamos a ensanchar el titulo para lograr una mejor estetica en nuestro blog, para eso dejemoslo del mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper ( y cambiamos la línea del width porwidth:850px;) (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas. Bajamos ahora por el código de la plantilla, hasta encontrar el #footer ( y le ponemos también el mismo ancho que el blog: width:850px;)
de esta forma nuestro blog logra una imagen uniforme.





5) Usamos la vista previa, y si todo ha ido según lo previsto, guardamos los cambios.

Si usas otras medidas no olvides que la suma del ancho de las entradas con el de la sidebar, debe ser menor o igual a el ancho del blog para una correcta vizualizacion.

Mostrar fecha en todos las entradas

Tutoriales El escaparate Rosa

En unos sencillos pasos conseguiremos que la fecha de nuestras entradas se muestre dentro de una imagen tipo calendario.

[1] Para comenzar tendremos que cambiar el formato en que se muestra la fecha de nuestros posts. Iremos a nuestro panel de Blogger y en Configuración escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que aparece en el despegable.
Ejemplo: 08 junio 2008

[2] Una vez cambiado el formato de la fecha, vamos a Edición de Html y expandimos los artilugios. Localizamos la etiqueta y justo antes colocamos este script:


<script>

function remplaza_fecha(d){

var da = d.split(' ');

dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";

mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";

anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";

document.write(dia+mes+anio);

}

</script>


[3] Tendremos que localizar ahora dentro del código de la plantilla esta etiqueta:

<h2 class='date-header'><data:post.dateHeader/></h2>


Para que no sea tan complicado podemos usar nuestro navegador para buscarlo.

Sustituimos esa etiqueta por este código:

<div id='fecha'>

<script>remplaza_fecha('<data:post.dateHeader/>');</script>

</div>



[4] Volvemos hacia arriba en nuestra plantilla para localizar la etiqueta ]]></b:skin>
y justo encima, pegamos estas líneas de CSS para controlar el estilo de nuestra fecha:

/* Calendario-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
}


Notas: En el CSS anterior está colocada la url de uno de los calendarios azules (el que se ve en el ejemplo de la imagen) para usar otro color de calendario, tendremos que subir el calendario escogido a un alojamiento de imágenes y sustituir la url en el código por la que nos proporcionan en el alojamiento.


Estes son algunos ejemplos :

DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE GOOGLE-PAGES

DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE DROPBOX

Eliminar fecha del post

Cómo quitar la fecha de las entradas
lunes 21 de diciembre de 2009

Hay dos formas sencillas de eliminar la fecha de las entradas.

La primera consiste yendo a Diseño - Elementos de página - Entradas del blog - Editar. 
En editar os encontraréis con la siguiente opción:

Debes dejar la casilla sin seleccionar y posteriormente guardar los cambios.

Si con esto aún continua apareciendo la fecha en las entradas, deberás realizar cambios en tu plantilla HTML. Esto puede deberse a que no estés empleando una de las plantillas mínimas que nos facilita Blogger.

1) Ves a Diseño
2) Edición de HTML
3) Busca date-header (teclea Ctrl + F para buscar más rápido)
4) Te encontrarás con algo así:

h2.date-header {
margin:0;
padding:0;
font-weight:normal;
font-size:10px;
background:#fff;
color:#222}

Deberás añadir, respetando la estructura, este código:

visibility:hidden;

Es decir, deberás quedarte así:

h2.date-header {
margin:0;
padding:0;
visibility:hidden;
font-weight:normal;
font-size:10px;
background:#fff;
color:#222}

5) Clica en vista previa, y si todo está correcto guarda tu plantilla.

Fuente - Quiero crear un blog

Sidebar con 2 columnas

FUENTE  -  TUTORIALES - EL ESCAPARATE DE ROSA

Una manera de ganar espacio extra en el blog sin hacer grandes cambios es añadir una nueva sidebar debajo de la que ya tenemos y dividirla en dos.

Para explicar estas modificaciones, damos por hecho que la plantilla a la que vamos a hacer los cambios tiene solamente una sidebar y, por descontado, que lo más adecuado sería tratar de hacer los cambios en un blog de pruebas antes de pasarlos al "original".

Para mi ejemplo usaré la plantilla Mínima de Blogger con sus medidas originales.
Haremos todos los cambios sin "expandir las plantillas de artilugios".

[1] Localizamos el código CSS que corresponde a la sidebar que ya tenemos en la plantilla y que será algo como esto:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Lo copiamos y justamente debajo pegamos la copia y le cambiamos la id, por ejemplo a sidebar-wrapper-doble:

#sidebar-wrapper-doble {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[2] Debajo de ese mismo código que acabamos de añadir, pegamos este otro que servirá para controlar las dos columnas de la nueva sidebar:

#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}

[3] Bajamos ahora hacia el HTML de la plantilla para localizar el código de la sidebar que ya tenemos:

<div id='sidebar-wrapper'>

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

</b:section>

</div>

Añadimos, justo debajo, el código para la nueva sidebar con sus columnas incluidas:

<div id='sidebar-wrapper-doble'>

<b:section class='sidebar' id='columna-izda' showaddelement='yes'>

</b:section>



<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>

</b:section>



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

</div>

Este sería el  resultado:

 

Mas plantillas

Blogger:

• Blogandweb. Muy buenos diseños creados a partir de plantillas gratuitas en CSS de la web Free CSS Templates y similares. Sin duda, es un trabajo que merece ser reconocido y premiado al menos con un enlace hacia su blog al instalar alguno de sus themes.
• BloggerTemplates. Es un buen sitio con excelentes diseños, aunque algo escaso en cuanto a la cantidad de plantillas.
• Blogger-Templates. Blog con bastantes themes clasificados en función de su estilo y codificación.
• BlogSkins. Puedes ver las plantillas más votadas por los usuarios o el estilo del día en su página principal. Los diseños están disponibles para Blogger, Movable Type y Xanga.
• BlogFlux Themes. Sección para descargar templates de este directorio de blogs.
• Geckoandfly. Blog con multitud de diseños para Blogger con un estilo similar al de los themes disponibles para WordPress.
• BlogMundi. Un blog fantástico con consejos para bloggers y multitud de utilidades que cuenta con algunos templates para Blogger magníficos.
• TemplatePanic. Las plantillas de Blogger están clasificadas en función de su número de columnas en la barra de navegación derecha.
• Psycho. Generador de plantillas para Blogger gratuito que te permitirá crear tu propio diseño en menos de 10 minutos.

Marcadores sociales

Las tendencias muestran que el uso de los marcadores sociales va en aumento… y es sencillamente porque son muy practicos y útiles. Aqui desarrollo un pequeño tutorial de como colocarlos en tu blog de Blogger. El proceso es MUY sencillo.

• Primero anda a tu panel de control->Diseño->Edición de HTML.
• Hace un backup de tu plantilla haciendo click en “Descargar plantilla completa” (nunca esta demás ser precavido).
• Hace click en la opción “Expandir plantillas de artilugios”.
• Busca la linea de código
  
  <code><div class='post-footer'>.
  
  En la siguiente imagen podes ver el lugar exacto. (si usas Firefox como navegador en Windows aprieta Crtl +F para buscar la linea rápidamente.)

• Pega el código que encontrarás en este archivo, y guarda los cambios.

Listo! Ahora tus visitantes cuentan con accesos rápidos para compartir y agregar tus posts a sus marcadores sociales o redes sociales. En el código encontrarás un vinculo a una explicación que realice sobre los marcadores sociales, algo que resulta útil a muchas personas que hace mucho que ven estos iconos pero aún no saben que son. Por supuesto, si el vinculo complica en algo el diseño de tu blog podes sacarlo.


Fuente : La web de Juan

Medidores de Pagerank

Aquí te presentamos varios estilos en medidores de pagerank. Selecciona el que más te guste e intégralo gratuitamente en tus paginas web o Blog para mostrar o medir tu pagerank, puedes tambien saber tu pagerank actual haciendo click aquí.

Para instalar un medidor de Pagerank en tu web o Blog solo debes seleccionar el código a continuación de cada medidor, copiarlo y pegarlo en las paginas que desees y tus páginas mostraran su Google Pagerank.

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=1); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:71px; height:17px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=2); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:71px; height:17px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=3); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:44px; height:15px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=4); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:70px; height:36px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=5); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:80px; height:15px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=6); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:52px; height:38px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=7); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:80px; height:15px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=9); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:80px; height:18px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=10); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=11); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=12); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=13); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=14); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

Muy pronto más estilos de medidores de pagerank para tu sitio web o blog y totalmente gratis!


Fuente : MediaTools

Crosscol - Dividirlo en 3 columnas

Tutoriales - El escaparate de Rosa

Antes de empezar tengo que aclarar que estás modificaciones están basadas en el código de las plantillas originales de Blogger que ya tienen incluido el crosscol en su código por defecto.

Para hacer esto mismo en una plantilla que no incluya en su diseño el código del crosscol tendríamos que saltarnos el paso [1] y [2].

<div id="main-wrapper">


y aplicar el paso [4] tal como está.

[1] Tendremos que retirar cualquier elemento que tengamos colocado en el crosscol del blog, moviendolo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el crosscol, volver a colocarlo en esa sección si así lo queremos.

[2] Nos situamos en "Edición HTML" de nuestro panel y sin expandir las plantillas de artilugios, localizamos la sección del crosscol:


<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/></div>


[3] Sustituimos ese código por este otro:

<div id='crosscol-wrapper' style='text-align:center'>

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

<div id='crosscol-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='crosscol' id='crosscol-bottom' preferred='yes'>

<b:widget id='Text3' locked='false' title='' type='Text'/>

</b:section>

</div>

<div id='crosscol-columna-contenedor'>

<div id='crosscol2' style='width: 30%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol1' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol3' style='width: 40%; float: left; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol2' preferred='yes' style='float:left;'/>

</div>

<div id='crosscol4' style='width: 30%; float: right; margin:0; text-align: center;'>

<b:section class='crosscol-column' id='crol3' preferred='yes' style='float:right;'/>

</div>

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

</div>

</div>

Una vez guardados los cambios ya podremos volver a incluir en el crosscol los elementos que queremos mostrar en esa sección.

[4] Ahora ya solo nos queda añadirle unas líneas de CSS a la plantilla para conseguir controlar la separación de las columnas y añadirles además un color de fondo (blanco en el ejemplo) y un borde.

Pegamos estas líneas antes de

]]></b:skin></b>

CÓDIGO


#crol1{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crol2{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crol3{
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}

#crosscol-columna-contenedor {
clear:both;
}
.crosscol-columna {
padding: 10px;
}

[5] Y tendríamos que conseguir entonces algo así:

Modificaciones

Para retirar el borde a los elementos, colocamos en border: 1px solid #60A9D1; el valor 1 en 0, o directamente borramos esa línea del código CSS.

Para cambiar el color de fondo, lo hacemos sustituyendo #fff por el código del color que vamos a usar.

El ancho de cada gadget está aplicado en porcentajes, podemos modificar la anchura de cada uno cambiando en width: el valor del porcentaje, cuidando que la suma del valor de los tres gadget juntos no sobrepase el 100%

 Fuente : El escaparate de Rosa

Directorios - Promocionar tu blog

Una vez que tengas el blog "terminado", debes darlo a conocer, y una de las formas más faciles y efectivas es incluyendo tu blog en los buscadores y directorios webs.

Algunos Directorios de Blogs en Español:

Blogalaxia ( www.blogalaxia.com) es uno de los portales más importantes para la difusión de contenidos de los blogs en español. Con miles de usuarios actualmente, permite Pings manuales y automáticos. Publica todos tus posts sin ningún filtro de contenido. El registro de blogs es bastante sencillo, aunque para el usuario final (lector) es difícil en ocasiones encontrar notas interesantes. (PR 6)

Blogazos.com (www.blogazos.com) es un nuevo portal/directorio de blogs en español que permite registro de blogs y envío de posts individuales. Publica únicamente contenidos bien elaborados y de relevancia (de acuerdo al criterio de sus administradores). Registro sencillo. Portal de reciente creación. (PR 3)

Ole Blogs (oleblogs.com) Directorio de blogs en español de aspecto limpio y ordenado, bien categorizado. El buscador interno es bastante malo y arroja demasiados resultados irrelevantes respecto a lo que se busca. (PR 4)

http://www.blogsmexico.com.mx/(actualmente fuera de operación)

Blogesfera (www.blogesfera.com) Directorio de blogs en español, con buen diseño y herramientas útiles. La aceptación de tu blog está condicionada a la publicación recíproca de su URL, es decir debes poner un enlace hacia blogesfera.com en tu blog. (PR 4)

Bitacoras.com (www.bitacoras.com) Directorio de aspecto parecido a Digg.com o Chido con posibilidad de votar artículos. Tiene varias herramientas para la gestión de tus blogs, aunque deberás tomarte tu tiempo para aprender a utilizarlas. El Ping para blogs de Wordpress funciona sin problemas, en el caso de Blogger tiene retardos o fallas. (PR 6)

Chido (chido.blogsmexico.com) Agregador social con el mismo concepto de Digg.com y Meneame.com. permite a cualquier usuario enviar publicaciones y noticias relevantes. Maneja ranking en base a votaciones de los usuarios. (PR 4)

Booster Blog (www.boosterblog.es) Directorio de blogs de origen español. Funciona bajo el concepto de enlace recíproco, es decir debes colocar un enlace hacia su sitio. Tu blog es incrustado en un frame con publicidad de Booster Blog en el encabezado, lo cual puede resultar un tanto molesto para algunos (PR 4)

99 Blologs (www.99blogs.net) Nuevo directorio de blogs. Se requiere de un enlace recíproco, no obstante la detección del enlace no es automática. (PR 3)

BloogZ (bloogz.freehostia.com) Directorio de blogs en español con enlace recíproco (PR 1)

Fuente : Negocios y superación personal

MARGIN - BORDER - PADDING

Para poder cambiar el tamaño en varias zonas de la  plantilla, hay que saber distinguir  muy bien entre estas 3 definiciones : Border, Margin y Padding

Border

Si en una capa solo definimos su contenido en Html, esta solo mostrará eso, el contenido, ya sea una imagen, un párrafo o lo que sea. Pues bien, la propiedad border dibuja un borde alrededor justo de ese contenido. El borde estará pegadito pegadito al contenido, como en este caso de la derecha. El borde por defecto, si no se indica otra cosa, es una línea continua de 1 pixel de grosor y de color negro.

Padding

El padding lo usaremos para definir una distancia de separación entre el borde y el contenido. Es decir, separa el borde de su contenido en una distancia igual a la que le indiquemos. Concretamente, esta zona sería como la parte roja que se ve en esta otra imagen de la derecha. Como ves, el borde ahora no está pegado a la imagen, sino separada de ella por la zona roja que ha sido definida con la propiedad margin. Fíjate que el borde ahora está pegado al padding, no al contenido.

Margin

Ahora tenemos otra distancia más. El margin es la distancia de separación que se va a dejar entre el borde y la parte exterior del elemento de la capa. En este caso no se ve, pues es una zona exterior al dibujo en la que no se permite que aparezca nada. Por eso se usa para separar unos párrafos de otros, como vimos en las lecciones primeras. En este caso solo hay definido el margin en el ejemplo de la derecha. Como ves, hay una separación entre la imagen y este mismo párrafo, aunque no se ve.

Fuente : Como crear tu web

Agrandar imágenes

Yo personalmente, uso para editar los posts / publicaciones, el Windows Live Writer.

Tiene muchas mas opcciones a la hora de editar las enradas. Las imagenes, se pueden  poner en el tamaño que deseamos, desde que entre en la plantilla, claro.

DESCARGAR

Ponerle fondo a enlace comentarios

Una de las cosas muy importante en un blog, es que nuestras visitas encontren donde comentar. Podemos resaltar cambiando el diseño del enlace a comentarios.

Enlace a comentarios con imagen en la parte superior del post

[1] Iremos en nuestro panel a la pestaña de "Edición HTML" y tendremos que marcar la casilla de expandir las plantillas de artilugios.

[2] Localizamos ahora el código que corresponde a nuestro enlace de comentarios:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>
</span>

Una vez localizado el código tendríamos que transportar el código de donde está a donde vamos a mostrar los comentarios dentro de la imagen, es decir, copiarlo, guardarlo en el blog de notas por ejemplo, y eliminar el original.

[3] Localizamos ahora la parte del código de la plantilla donde vamos a pegar el código anterior. Podríamos colocarlo en distintos sitios dependiendo de donde queremos mostrarlo, por ejemplo justo después de esta línea estaría bien:

<b><b:includable id="post" var="post"></b:includable></b>

[4] Modificaremos lo necesario en ese código para eliminar el texto del enlace y mantener únicamente el número de comentarios ya quedará mucho mejor para mostrarlo dentro de una imagen.

Hay que suprimir las etiquetas </data:top.commentlabel><y "<data:top.commentlabelplural>"

Colocamos entonces una líneas en el CSS, siempre antes de ]]>, para añadir los atributos del enlace y conseguir así el formato que queremos (imagen de fondo, fuente, dimensiones, márgenes, bordes, etc.):

.comment-link {
font-size: 150%;
background: url(http://img368.imageshack.us/img368/2623/comentabe7.png) no-repeat top right;
height: 50px;
width: 53px;
text-align: center;
float: right;
margin: 5px 0 0 0;
padding:5px 2px 0 5px;
}

Fuente : El escaparate de Rosa

Ocultar Navbar de blogger

Hay quién no le guste la tipica navabar de Blogger, y prefiere agregar un menú personal.

Para ocultar la navbar, hace falta un simple código, justo antes de  ]]>:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Fuente : El escaparate de Rosa

Menu con buscador incluido

Antes que nada nunca olvidar, guardar la plantilla, antes de hacer cualquier cambio.

En la parte de "Edición Html" de nuestra plantilla sin expandir las plantillas de artilugios, localizamos la etiqueta ]]> y justo antes pegamos este código CSS:

( presionar la tecla control + F  y os saldrá un buscador)


ENLACE:

/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}


(Aquí, es donde podéis cambiar los colores, ancho, tipo de letra,etc del menú.)

Colocaremos ahora el código necesario para que se muestre la "barra menú" en la parte superior del blog y lo haremos justo sobre

y si en esa posición el resultado no es el esperado (dependerá del diseño de la plantilla) lo colocaremos después de donde debería de funcionar:

<!-- Menu Superior -->

<div id='navtop'>

<div class='nav'>

<ul class='navtop'>

<li><a href='http://elescaparatederosa.blogspot.com'>Inicio</a></li>

<li><a href='http://draft.blogger.com/profile/06743611108067453905' title='Perfil Blogger'>Sobre mi</a></li>

<li><a href='http://feeds.feedburner.com/blogspot/hnBy' title='Suscribe Feed'>Suscribe Feed</a></li>

<li><a href='mailto:lejaniaimposible@hotmail.com' title='Contactame'>Contacto</a></li>



<li><a href='http://elescaparatederosa.blogspot.com/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas las entradas</a></li>

</ul>

<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>

</div>

</div>

<!-- Fin Menu superior -->

Los datos que están en negrita, tendréis que copiarlos, por los vuestros propios.


-------------------------------------

Si quereís eliminar alguno os pongo un ejemplo desde donde borrar hasta terminar, para que siga funcionando el código:

<li><a href="http://www.blogger.com/%3Cb%3Ehttp://elescaparatederosa.blogspot.com/search/label/?max-results=999%3C/b%3E" title="Ver todas<b> </b>las entradas">Ver todas las entradas</a></li>

Lo mismo si queréis cambiar, este de arriba, por ejemplo para enlazar vuestro Flickr :

<li><a href="dirección flickr" title=" <b>Flickr</b> <b>Flickr</b> </a></li>

----------------------------------------------------------------------

Si no lo queréis arriba de todo, buscáis el DIV , que os interesa.

Darle a vista prévia, antes de acceptar los cambios.

Fuente : El escaparate de Rosa

Colores hexadecimales

A la hora de cambiar los colores en nuestra plantilla es muy útil saber cuales son los códigos de los colores hexadecimales.
Lo más fácil  es guardar una página, donde se pueda ver en el momento el código correspondiente al color que queremos.

Esta es una de las páginas que utlizo :

Colores hexadecimales

Tráfico blog

Existen muchísimas páginas donde crear  un contador del tráfico del blog, estas son apenas algunas de ellas:

Contador Web
Contador Gratis
Histast.com
Cool Counters
Count My Page
Free Counter
Free Counter Plus
Free Hit Counters
Free Stats
Counter
Pliner Net Counter
Pro Counter
Rapidcounter
Rightstats
Stat Counter

Alojar imagenes

Una cosa muy importante a la hora de subir imagenes al blog, foros, etc , es el alojamiento de imagen.

Hay varias páginas de alojamiento, os dejo las que mas utilizo:

Tinypic

Imaxenes

Imageshack

Fabrica tu contador

Con el servicio de usuarios on-line de miarroba.com podrás saber cuántos usuarios hay actualmente en tu web. Además podrás acceder a unas estadísticas de las URL más visitadas y al número de visitantes que hay en cada URL de tu página web.

Características del servicio Usuarios online

Contabiliza el número de usuarios conectados a tu página web, blog o foro, usando la IP del navegador.

Dos modalidades de medidores de usuarios on-line: en modo texto y en modo gráfico.

En modo texto, podrás personalizar el mensaje para adaptarlo a tus necesidades.

En modo gráfico, podrás subir tu propia imagen personalizada, elegir qué cifras mostrar, tamaño, posición, alineación colores, etc.

Galería con todos los medidores gráficos usados por otros usuarios del servicio -  Ver galería.

Los usuarios conectados corresponden a los últimos 15 minutos.

Guarda el record de usuarios conectados y la fecha cuándo se produjo.

Estadística individual de las URL visitadas.