Your image is loading...

Mostrando las entradas con la etiqueta Blogger. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Blogger. Mostrar todas las entradas

23 septiembre 2008

PASOS PARA CREAR UN BLOG EN BLOGGER

PASOS PARA CREAR UN BLOG EN BLOGGER

 

clip_image002[13]

 

ES NECESARIO TENER UNA CUENTA DE E-MAIL.

SI NO SE DISPONE DE ELLA SE PUEDE CREAR EN CUALQUIERA DE LOS PROVEEDORES DE CORREO GRATUITO.

 

 

 

 

clip_image004[7]

 

ACCEDER A LA PÁGINA www.blogger.com y pinchar sobre “crear tu blog ahora”.

Cuando tengamos el blog creado tendremos que introducir nuestro e-mail y la contraseña en la parte superior de la página.

 

 

 

 

clip_image006[7]

 

CREAR CUENTA:

Tenemos que introducir los datos que nos pide la página.

e-mail: _______________________________

contraseña: ____________________

 

 

 

clip_image008[7]

 

ASIGNAR UN NOMBRE AL BLOG:

- indicar el título del blog. Es el título que aparecerá en la cabecera del mismo.

- Dirección (url). Es la dirección del blog. Tenemos que verificar que no exista otro con la misma dirección. No olvides apuntarla.

Dirección:

http://______________________.blogspot.com

 

 

 

 

 

 

clip_image010[7]

 

Seleccionar entre las diversas plantillas que se nos ofrece. Se puede cambiar después.

 

 

 

 

 

clip_image012[7]

 

Comenzar a publicar.

Ya hemos creado el blog. A partir de ahora tenemos que ir introduciendo comentarios y darle “vida”.

 

 

 

 

 

clip_image014[7]

 

CREACIÓN DE ENTRADAS:

Es la pantalla para introducir comentarios.

 

 

 

 

 

 

clip_image016[7]

 

CONFIGURACIÓN:

 

 

clip_image018[7]

DISEÑO: (aspecto de la página)

 

 

 

 

 

 

clip_image022[7]

ASPECTO DEL BLOG:

- COMENTARIOS: orden inverso

- ARCHIVO DEL BLOG: histórico

 

 

clip_image024[7]

X COMENTARIOS: es donde tienen que pinchar para acceder a agregar comentarios

 

 

 

clip_image026[7]

HAGA SU COMENTARIO

- Ventana de comentario (pueden hacerlo en el programa de texto y hacer copy/paste)

- Palabra de verificación

- Nombre/url (solo nombre)

- PUBLICAR

27 agosto 2008

CONSIGUE COMENTARIOS EN TU BLOGGER

En esta ocasión les explicaré un método el cual les permitirá editar esa etiqueta que dice "X Comentarios", por lo general ubicada al final del contenido de la entrada haciéndola más llamativa para sus visitantes.

Cuando no hay comentarios en la entrada se mostrará el texto:
"Agrega tu Comentario"

Cuando hay 1 o más comentarios se mostrará:
"XX comentarios, agrega el tuyo!"

Ahora para comenzar es necesario que se dirijan a Plantilla > Edición HTML en su Panel, posteriormente seleccionaran la casilla "Expandir plantillas de artilugios", ahora tendremos que buscar sl siguiente código:

 

 

<span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <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>

El cual remplazaremos por el siguiente:

<span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <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'>Agrega tu comentario<b:else/><data:post.numComments/> comentarios, agrega el tuyo!</b:if></a> </b:if> </b:if> </span>

Luego simplemente guardamos los cambios y listo!

 

 

COMO PONER VIDEOS EN TU BLOG

Bueno esto es una pequeña guía para los que no saben mucho de Blogging, debido a que no solo nos enfocamos en los bloggers avanzados, sino que también a los que están comenzando apenas.

Así que para agregar un vídeo en una entrada, tenemos que elegir un vídeo que nos guste, en este caso pondré como ejemplo el siguiente vídeo:
http://youtube.com/watch?v=EgATlhZFAfs

Como podrán ver en ese enlace, alado del Vídeo hay un cuadro el cual contiene el nombre del vídeo, la fecha, descripción y categoría.

Abajo hay 2 cuadros de texto, uno dice "URL" y el otro que dice "Embed". El primero es la dirección del vídeo y el segundo es el código el cual tenemos que copiar para ponerlo dentro de nuestra entrada.

En esta caso el código es:

 

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/EgATlhZFAfs"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/EgATlhZFAfs" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

 

Este código lo tendremos que poner dentro de la pestaña de "Edición de HTML" cuando creamos una entrada.

Una vez que agreguemos el código podemos seguir escribiendo ( aunque el vídeo no aparezca en el momento ), si quieren visualizarlo antes de publicar la entrada simplemente pueden hacer click en "Vista Previa".

cambiar el titulo del blog por una imagen

Para alojar una imagen puedes usar Imageshack. En cambio, si quieres que sea en blogger debes crear una nueva entrada o post. Desde ahí, subes una imagen al editor y después te vas a Edición de HTML, para copiar la ruta de la imagen.


1. Lo siguiente que debes hacer es ir a Plantilla. Luego deberán buscar lo siguiente:

 

<div id="header">
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
</div>

 

2. Una vez ubicado el código, tendrás que borrar <$BlogTitle$> para luego agregar el siguiente código: <img src="http://urldelaimagen.jpg" /> y a su vez reemplazar la URL de la imagen que has subido en ImageShack o en Blogger.
Nota: Probablemente algunas plantillas no tienen el mismo código que les he puesto, pero tienen algo parecido. Sin embargo, incluyen <$BlogTitle$>.
Existe otra manera de modificar, el cual tendrías que localizar lo siguiente en la plantilla:

 

 

/* Header
----------------------------------------------- */
#header {
background:#be4 url("http://www.blogblog.com/no565/topleft.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}
#blog-title {
background:url("http://www.blogblog.com/no565/bg_header.gif") no-repeat left top;
margin:0;
padding:40px 0 0;
font:bold 275%/97px Helvetica,Arial,Verdana,Sans-serif;
text-transform:lowercase;
}
#blog-title a {
color:#fff;
text-decoration:none;
}
.postpage #blog-title {
padding-top:0;
background-position:0 -40px;
}

 

 

Simplemente tendrías que sustituir las dos URL´s en background por la URL de tu imagen. Esta modificación hará que la imagen aparezca como fondo en la cabecera. Sin embargo el título y la descripción del blog seguirán manteniéndose, siempre y cuando no lo hayas borrado <$BlogTitle$>.

Eliminar Titulo de Texto en Blogger Manual

 

Un visitante del Blog tiene problemas con una Plantilla la cual no le permite de alguna forma quitar el Titulo ( de Texto ) para que solo salga la Imagen y nos pregunta como removerlo para que solo se vea la imagen que el desea.

Normalmente esto se puede hacer desde una opción de Elementos en Blogger, no obstante hay veces que algunas plantillas no están bien hechas los "Elementos" no son reconocidos por el Editor integrado Blogger, así que ahora lo eliminaremos manualmente.

Para comenzar, tenemos que tener en cuenta que es necesario guardar nuestro diseño antes de tocar cualquier parte del código, recuerden que no siempre esta controlado lo que suceda, en especial si no tienen mucha experiencia.

Ahora, veamos lo que necesitamos remover, para comenzar, tenemos que tener en cuenta que el Elemento CSS: Display

Lo que necesitarán ir a Edición HTML que se encuentra en el Panel de Control de su Blog y luego seleccionamos la casilla Expandir Plantillas Artilugios.

Ahora ya estamos listos para trabajar, lo que tenemos que buscar ahora son los parámetros los cuales hacen que muestre el titulo de texto, por lo que tendremos que buscar el siguiente código:

 

 

 

<a expr:href='data:blog.homepageUrl'><data:title/></a>

 

 

 

Dependiendo de si su plantilla es una de las predefinidas Blogger o si es una Plantilla personalizada, podrán encontrar el siguiente código en la parte superior de lo que ya encontraron ( marcado en Rojo ) :

 

<b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/>

<a expr:href='data:blog.homepageUrl'><data:title/></a>

 

Ahora lo que tenemos que hace, es agregar las lineas que se encuentran en negrillas al código:

 

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div style='display:none;'><data:title/></div> <b:else/> <div style='display:none;'><a expr:href='data:blog.homepageUrl'><data:title/></a></div>

 

Repitan la búsqueda sí encuentran más simplemente repitan el proceso, si no tienen idea de el porqué de el Parámetro CSS "display:none" revisen esta entrada: CSS Propiedad Display

poner un contador en tu web

                                          contadorloco

 

 

 

El sistema es bastante fácil, pero como algun@s lo preguntais, entiendo que no os lo parece tanto.

 

 

  • Si teneis vuestro propio dominio, el servicio de hosting os facilita esta utilidad y sólo tendreis que activarla. El procedimiento varía dependiendo del servidor.

  • Para los que tenemos un dominio "prestado" como éste de Blogger, hay que recurrir a servicios externos. Básicamente hay que darse de alta (registrarse), poner los datos de la página que se pretende medir y luego colocar en ella el código html que os facilitan. En Blogger sería añadiendo un elemento de página como ya hemos visto en otras ocasiones.

 

Todos o casi todos ellos, tienen además servicio de estadísticas. Eso sí, las estadísticas son muy limitadas. En el caso de Contador gratis, sólo las últimas 100 visitas.

Si poneis el contador en la cabecera, barra lateral o pie de página, y éstos están configurados para aparecer siempre, pues os medirá el acceso a cualquier página de vuestra web. Si lo poneis en un post concreto, sólo os contará los accesos a ese post.

Los servicios que conozco son:

 

 

 

 

 

 

 

Después de haber colocado el código del contador, comprobar entrando desde otro PC, si os han colgado publicidad. Resulta que si entras desde tu propio ordenador, las cookies están preparadas para que a vosotros no os salga. Pero al resto de usuarios los bombardean (como parece lícito por otra parte, si el servicio es gratuito).

Contador gratis que es el que yo utilizo, no tiene publicidad...hasta la fecha. Álguno de los demás citados, que ahora no recuerdo, seguro que sí la tienen.

                                      contadorloco2

25 agosto 2008

+3700 iconos gratis para tu web o blog

+3700 iconos gratis para tu web o blog


Si estás buscando iconos para un proyecto web, para completar el diseño de tu blog, o para darle un nuevo aire a cualquier página te presento una lista inmensa de iconos gratis y de calidad.

Muchos no tienen restricciones de uso pero te recomiendo que eches un vistazo a las condiciones ya que algunos no permiten su uso en proyectos comerciales.

Si no encuentras lo que buscas pásate de vez en cuando por aquí porque la lista se actualiza con nuevos iconos.

Iconos gratis

Mobile Icon
12 iconos para aplicaciones de móvil

Mobile Icon

Fast Icon
89 iconos divertidos y de mucha calidad donde elegir.

Fasticon

Emotions
Emoticonos divertidos y diferentes para usar en cualquier proyecto web o en aplicaciones de escritorio.

Emotions

Developpers Icons
Iconos para cualquier aplicación web.

Developpers

Silk
Silk contiene alrededor de 700 iconos gratuitos de 16×16 píxeles en formato PNG.

FamFamFam - Silk

Silk Companion #1
Un set complementario al anterior con el estilo Silk 460 más.

Silk Companion 1

Mini
Mini es un conjunto de 144 iconos gif, gratuitos para cualquier uso.

FamFamFam - Mini

Mint
Los iconos Mint son pequeños iconos en png basados en el sistema de estadísticas Mint.

FamFamFam - Mint

Flags

¿Necesitas banderas? Aquí tienes 247 iconos, en formatos gif y png. Son de libre uso.

FamFamFam - Flag

Sweetie
Limpias, elegantes… bajo licencia Creative Commons, lo que permite un uso comercial. Incluyen los archivos originales de Photshop y disponibles en dos paquetes y estilos..

Sweetie BasePack (182 Iconos)

sweetie-basepack.png

Sweetie WebCommunication (37 Iconos)

Sweetie - WebCommunication

Quality Mini Icons by DaPino
Contiene 400 iconos en formato png bajo licencia Creative Commons Attribution 3.0.

Dapino Mini Quality Icons

Tango icon library
El conjunto Tango contiene un set de iconos para los usos más comunes.

Tango Icon Library

Milk and Green
21 iconos en formato png

Strawbee - Tiny Little Icons

Sizcons
Sizcons en tamaños de 12×12 y 16×16.

Sizcons

Drunkey Love
Más de 100 (16×16 píxeles) iconos en formato png.

Drunkey Love

Sway
3 conjuntos diferentes de iconos

Pack #1 (29 Iconos)

Sway #1

Pack #2 (5 Iconos)

Sway 2

Smiley (12 Iconos)

Sway Smiley

Two Tone
Two Tone es 100% gratis, con los archivos psd para cambiar los colores a tu gusto aunque ya está disponible en cinco distintos.

Two Tone

ASP NET Icons

Más de 300 iconos en formato gif.

ASP NET Icons

Bullet Madness
¿Necesitas iconos para tus listas? Aquí tienes más de 200 flechas, iconos, puntos…

Bullet Madness

FeedIcons
Dos sets diferentes de iconos para feeds.

IconFeeds - Standard

IconFeeds - Colour

Zeusbox FeedIcons

Zeusbox Feed Icons

Microformats Icons
3 conjuntos diferentes de iconos de interacción. Primary Microformats, XFN Set, y Vote-links.

Primary Microformats

Microformats

XFN Set

XFN Set

Vote-links

Vote-Links

Tiicon
Tiicon 1.0 incluye 200 glyphs.

Tiicon

Bitcons
Bitcons, predecesor de Sanscons, es un conjunto de pequeños iconos (16×16 píxeles) que contiene 121.

Bitcons

Mini Pixel Icons
Alrededor de 320 mini iconos gratis. Con una tamaño de 14×14px y fondo transparente. Perfectos para botones de navegación, libres de uso hasta un máximo de 10, entonces deberás otorgar un enlace a N.Design Studio.

Mini Pixel Icons

Pixeley
31 iconos en formato gif y png.

Pixeley

Mini Icons
113 iconos - 10×10 píxeles en tonos grises y formato gif

Mini Icons

DocType Icons
42 iconos - 16×16 píxeles. Formato gif.

DocType Icons

ExplodingBoy Pixel Icons
Conjunto de 31 iconos gratis para usar donde te apetezca y en varios colores.

ExplodingBoy Pixel Icons

ExplodingBoy Pixel Icons 2
25 iconos, en tonos grises, formato gif y fondo transparente.

ExplodingBoy Pixel Icons 2

Mini Icons
Mini iconos en diferentes categorías.

Urlgreyhot Mini Icons

PixelGraphix Weblog Icons
Iconos para blogs de tamaño 13×15 píxeles y formato gif.

PixelGraphix Web Blog Icons

mIcons

Disponibles en 8 categorías.

mIcons

graphicPUSH
Diseñados especialmente para blogs y sistemas de gestión de contenidos.

graphicPUSH Icon Pack 1
Grupo de 14 iconos para carga/descarga, gestión de archivos.

graphicPush 1

graphicPUSH Icon Pack 2
Conjunto de 17 iconos diseñados para representar tipos de archivo.

graphicPush 2

XML and RSS Pixel Icons
Colección de 22 iconos para representar XML, RSS.

graphicPush XML RSS

Primail
Iconos para lo que quieras.

Primail

Manentia Icon Pack
245 iconos gratuitos diseñados por Javier Ordiozola, en formato gif.

Ordiozola

Web Control Icons
Conjunto de iconos para sistemas de administración. En diferentes colores y tamaños.

Marko Web Admin Icons

Free Web Developement Icons
26 iconos de 16×16 por Kurumizawa.

Free Web Development Icons by Kurumizawa

Proxal
Set de 99 iconos gratis con el psd disponible.

Proxal Icon Set

Fuente: Free quality icons for your website

Add to Google Reader or HomepagePowered by FeedBurner

Para una óptima visualización sugerimos: Resolución 1024 x 768