Archivo de la Categoría:

Tutoriales

Poner un botón Spoiler en Blogger

Escrito por: Alberto Lozano

Publicado hace 1085 días, el 28 de junio, 2010 (Lunes)

Bueno ya todos saben que es un spoiler, pero para los que no saben, entonces un spoiler es una herramienta un botón para mostrar o ocultar cualquier contenido para ahorrar espacio para colocarlo en los posts, es fácil colocar, no es nada de modificar nada extravagante en la plantilla, hay dos maneras diferentes para colocarlo:

En forma de Link:

<div><a href='#' onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Mostrar Contenido';}return false" type="button">Mostrar Contenido</a><div style="display: none;">AQUI EL CONTENIDO QUE QUIERAS OCULTAR</div></div>

Asi quedaría:

Mostrar Contenido

En forma de Botón:

<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar Contenido';}" type="button" /><div style="display: none;">AQUI EL CONTENIDO QUE QUIERAS OCULTAR</div></div>

Asi quedaría:

Visto en | TrucosGeek

Publicado en: Blogger, Tutoriales

Escribe un comentario

Cambiar el fondo en el Inicio de Google

Escrito por: Alberto Lozano

Publicado hace 1089 días, el 25 de junio, 2010 (Viernes)

0 Comentarios

Aquí les dejo un mini tutorial para cambiarle el fondo de la página de inicio de Google, no es nada de programas ni nada por el estilo, para cambiarle el fondo necesitas tener cuenta de Google, ahora les diré como cambiarle el fondo es muy fácil.

Primero nos vamos a la página de inicio de Google.
En la parte de abajo a la izquierda hay una opción que dice "Cambiar imagen de fondo" como se ve en la imagen.

Le damos a la opción, nos mandara a otra página que nos pedirá ingresar a Google cuentas.

Una vez ingresado, regresara a la pagina inicial, y solito nos mostrara una mini ventana con opciones de las imágenes ya sea examinando tus imágenes de la PC, galería publica, destacados.

Cuando ya seleccionemos nuestra imagen para el fondo, le damos en seleccionar y ahora el fondo de Google estará con nuestro propio fondo , les dejo como quedo mi fondo.

Publicado en: Diseño, Internet, Tutoriales

Escribe un comentario

Colocar una imagen flotante en tu Blog

Escrito por: Alberto Lozano

Publicado hace 1090 días, el 24 de junio, 2010 (Jueves)

7 Comentarios

Una imagen flotante estática en nuestro Blog es algo que casi todos usan en este tiempo, porque no es estorboso para los visitantes y moderno, es visible en todas las páginas, ya sea si bajas o subes la pagina siempre se quedara estática donde la coloques.

Podemos colocar una imagen de tu logo, un icono de sígueme en Twitter, hazte fan en Facebook, por dar algunos ejemplos.

Bueno primero nos vamos a Diseño > Edición de HTML y colocamos el siguiente código antes de </body>

<a href='URL de tu Blog o de otro sitio' style='display:scroll;position:fixed;bottom:150px;right:0px;'><img src='URL de la imagen'/></a>

Url de tu Blog o sitio: Es a donde quieres que sea redirigida la imagen, si no quieres eso, entonces en vez de la Url ponemos una #

Bottom: Significa la posición donde quieres que este tu imagen por defecto esta en 150px, así como se ve en mi imagen flotante, pero si la quieres hasta abajo lo dejamos en 0px, o más arriba le ponemos un 250px, como gusten.

Right: Esta opción significa que la imagen por defecto se encuentra del lado derecho, pero si la quieres del lado izquierdo lo cambiamos a left

Si solo quieres poner la imagen flotante y sin enlace, en vez del código anterior ponemos este:

<a style='display:scroll;position:fixed;bottom:150px;right:0px;'><img src='URL de la imagen'/></a>

Y listo, la imagen flotante se puede ver en los navegadores de Firefox y Internet Explorer.

Añado: les dejo dos imágenes muy padres.

Publicado en: Blogger, Diseño, Tutoriales

Escribe un comentario

Poner emoticones en comentarios de Blogger

Escrito por: Alberto Lozano

Publicado hace 1099 días, el 14 de junio, 2010 (Lunes)

13 Comentarios

Poner emoticones en la sección de comentarios, es lo que varios quieren en su Blog, visto tantos tutoriales de cómo poner los emoticones y la mayoría no sirve, pero les diré de forma fácil como ponerlos y lo mejor que estos emoticones están con movimiento.

Primero nos vamos a Diseño > Edición de Html > Expandir plantillas de artilugios y buscamos </head> en nuestra plantilla.
Ahora tenemos que descargar un Script y colocarlo justo encima de </head>.

Descargar Script

Con esto ya tenemos los emoticones en nuestro Blog, pero falta colocarlos en la parte de comentarios, para que se vean así:

Bueno tenemos que colocar una tabla con los símbolos de cada emoticón para identificarlos.

Descargar Tabla de Emoticones

Una vez descargada la tabla, vamos otra vez a la plantilla y buscamos el siguiente código:

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

Abajo de este código agregamos la tabla que descargamos, guardamos la plantilla y ya tendremos nuestros emoticones en nuestro Blog. Los emoticones se pueden utilizar en los comentarios y en los posts.

Visto en | Trucos Geek

Publicado en: Blogger, Diseño, Tutoriales

Escribe un comentario

LinkWithin | Entradas Relacionadas con Imagen en Blogger

Escrito por: Alberto Lozano

Publicado hace 1132 días, el 12 de mayo, 2010 (Miércoles)

5 Comentarios

LinkWithin es una nueva forma de mostrar las entradas o posts relacionados para el Blogger, ya que esta cuenta con imágenes miniatura para darle más estilo y elegancia, ya que puedes mostrar hasta 5 entradas relacionadas, este widget se aplica muy fácil y lo mejor de todo es que es gratis y no tienes que regístrate como en otras páginas que lo piden, este se muestra debajo de cada entrada o post las entradas antiguas y así no se salgan de tu blog sin checar todas tus entradas interesantes y así tener más visitantes, aumentar las vistas de pagina, y más tráfico.

Ahora en este mini tutorial les diré como aplicar este widget a tu Blog.

1.- Primero nos vamos a esta pagina y ya adentro les aparecerá este formulario.

Email: Aquí ponemos nuestro correo electrónico.
Blog Link: La dirección de tu Blog (ejemplo: http://tublog.blogspot.com).
Platform: La plataforma aquí elegimos Blogger, aunque también hay para WordPress.
Width: El número de entradas relacionadas que quieres publicar, con un máximo de 5 entradas.

Hay una opción para marcar y es por si tu Blog es de fondo negro y texto blanco.

Y por ultimo le damos clic a Get Widget.

2.- Luego nos mandara a otra página y hasta arriba le damos a donde dice Install Widget y nos aparecerá esto:

Aquí solamente veremos que este seleccionado nuestro Blog y el titulo del widget esta por default como LinkWithin pero se lo puedes cambiar si deseas, lo demás lo dejamos como esta y por ultimo le damos en añadir artilugio.

3.- Y nos enviara a nuestro blog en la sección de Diseño > Elementos de la Pagina aquí el elemento Html del Widget nos aparecerá en la barra de la sidebar es cuestión de moverla abajo de donde dice Entradas del Blog y le damos en guardar como se muestra en la imagen.