El Blog de Vku, Lo se así - de todo un poco - Blogger

Blogger LightBox: Se sobreponen las imágenes - Solución

2011-10-14T10:26:00.000-07:00

Eso se debe a que tenemos distintos elemento con una capa superior a la capa que lleva la ventana modal tipo LighBox de Blogger.

Lo solucionamos cambiándole el valor a la propiedad z-index de los distintos elementos que se superponen a la capa de la ventana modal tipo LighBox de Blogger.

O podemos agregarle un valor superior a la capa de la ventana modal tipo LighBox de Blogger.

Para hacer eso solo hay que agregar un código al CSS de nuestra plantilla.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML.

Buscar ]]></b:skin> y justo arriba pegar el siguiente código:

.CSS_LIGHTBOX{z-index:9999999999!important;}

Ir viendo con vista previa antes de guardar.

Tal ves sea necesario agrandar el valor 9999999999.

Leer sobre la propiedad z-index

Blogger LightBox: Ya esta disponible y con opción deshabilitar

2011-10-13T18:39:00.000-07:00

Después de quitarlo por sugerencia de algunos usuarios en el foro de ayuda de Blogger.

Ayer en buzz.blogger.com avisan que esta disponible nuevamente con la opción de habilitar o deshabilitar.

También dicen que han mejorado algunos errores.

Si sos uno de esos usuarios que les gusta el nuevo LightBox de Blogger, no hay que hacer nada para habilitarlo ya que la opción está por defecto.

Pero si por alguna razón quieres deshabilitar lo puedes hacer de la siguiente forma:

Si utilizas la nueva interfaz:

Ir a Configuración, Entradas y comentarios, y cambian en Open images in Lightbox el Si por No.

Guardan la configuración.

Si utilizas la vieja interfaz:

Ir a Configuración, Formato, y cambian en Open images in Lightbox el Si por No.

Guardan la configuración.

Y listo, ya no tienen mas el nuevo LightBox de Blogger.

Seguidores Blogger, Twitter y Facebook flotando a la derecha

2011-10-12T06:11:00.000-07:00

Hace un tiempo Ciudad Blogger publicaba una entrada de cómo se hace El Fanbox de Facebook, flotante y con efecto deslizante.

Me gusto mucho la forma que se mostraba flotando, pero lo que no me gusto es que para darle el efecto hay que utilizar una librería, la cual enlentece la carga en un blog (mientras no la utilizamos para otra cosa), y en lo personal el efecto no es algo que me llame mucho la atención.

Ahí se me ocurrió que se podía hacer de otra forma; sin utilizar la librería, solo con hover, al igual que lo hacemos para cambiar una imagen al pasar el cursor por encima. Peroooo, como el contenedor mostrado es un iframe con script no funciona bien en Internet Explorer (este navegador siempre complicando las cosas), entonces decidí sustituir el hover con eventos javascript.

Y ya que estábamos; pensé (a veces lo hago), y por que no utilizar esto no solo para mostrar el Fanbox de Facebook.

Lo primero que hice fue crear las imágenes que las pueden descargar desde acá:

Y el resultado final fue el siguiente:

Vamos a mostrar los Seguidores de Blogger, Comentarios de Twitter y el Fanbox de facebook.

Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget.

¿Cómo se hace...?

Para los seguidores de Blogger vamos a: Google friend connect

Estando conectados con la cuenta de Gmail asociada a nuestro blog.

Ahí vemos que nuestro blog este seleccionado:

Si tenemos varios blog lo seleccionamos mas abajo:

Ya seleccionamos hacemos clic en: "Añadir el gadget de miembros"

Lo podemos personalizar o dejamos así ya que lo único que necesitamos es la ID.

La ID la tenemos que copiar ya que la vamos a utilizar mas abajo.

Es necesario ya que cada blog tiene una ID distinta.

La vemos en la barra de dirección:

O al darle al botón "Generar código":

Ahora con la ID copiada podemos cerrar la página.

Recomiendo pegar la ID en el bloc de notas.

Nos vamos al escritorio de Blogger.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz),

Edición de HTML

Y justo arriba de ]]></b:skin>

Poner el siguiente código:

/* Seguidores Blogger */
.barrightblogger { background: url('http://3.bp.blogspot.com/-M5A-TLdB58E/TpOxL5GAReI/AAAAAAAAAN0/gEa0HRqhX4k/s1600/bl_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:50px; z-index:1000;}
.barrightbloggerc { background: url('http://3.bp.blogspot.com/-gQ9PACjKc2I/TpOxMv4CyiI/AAAAAAAAAN8/FyEncEGNCbM/s1600/bl_cg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:50px; z-index:1100;}
.barconteblogger {margin:12px 0 0 47px}

/* Twitter */
.barrighttwitter { background: url('http://2.bp.blogspot.com/--gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/s1600/tw_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:210px; z-index:1000;}
.barrighttwitterc { background: url('http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/s1600/tw_ag.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:120px; z-index:1100;}
.barcontetwitter {margin:0 0 0 47px}

/* Facebook */
.barrightfacebook { background: url('http://3.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/s1600/fb_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:370px; z-index:1000;}
.barrightfacebookc { background: url('http://2.bp.blogspot.com/-Cum28YwF4d8/TpOxM_lUKMI/AAAAAAAAAOE/L4pJ91PTVz4/s1600/fb_bg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:185px; z-index:1100;}
.barcontefacebook {margin:12px 0 0 47px}

Podemos descargar las imágenes y subirlas a su propio servidor o a Picasaweb.

Y si quieren modifican las distancias desde arriba: (top:...px)

Ahora nos vamos bien abajo y arriba de </body>

Poner el siguiente código:

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger">

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id="div-3082905992843096175" style="width:240px;border:0px solid #ffffff;"></div>

<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ffffff';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '6';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-3082905992843096175',
site: '00286525615627339881' },
skin);
</script>
</div></div>





<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 30000,
width: 240,
height: 250,
theme: {
shell: {
background: '#33ccff',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#33ccff'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('v_ku').start();
</script>
</div></div>





<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/ParquedelPlataUruguay&width=240&colorscheme=light&connections=15&stream=false&header=false&height=320" style="border: none; height: 320px; overflow: hidden; width: 240px;background: #fff;"></iframe>
</div></div>

Cambiamos:

Para Blogger: La ID que antes copiamos y guardamos: 00286525615627339881

Para Twitter: El nombre de la cuenta: v_ku
La cantidad de comentarios: rpp: 3

Para facebook: La página: http://www.facebook.com/ParquedelPlataUruguay

Con Vista previa vemos que todo este bien y Guardamos.

Si no queremos mostrar alguno, solo eliminamos el código.

Esta bien separado por comentarios:

/* ............................. */
CÓDIGO CSS

CÓDIGO

Sustituir blink con JavaScript

2011-10-10T13:24:00.000-07:00

La etiqueta blink, es utilizada en ocasiones para mostrar un texto parpadeando.

También se puede utilizar el valor blink de la propiedad text-decoration, que podemos asignar a un texto por medio de un estilo CSS.

El problema con utilizar la etiqueta o valor blink es que no funciona con Internet Explorer.

Les voy a mostrar 3 formas que podemos sustituir blink con JavaScript.

Forma 1:

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

Poner el siguiente código:

<div id='blink' style="text-align:center;">
<a href="http://vitua.blogspot.com/" target="_blank"><span style="color: red;font-size:18px;">Visite:</span> <span style="color: blue;font-size:24px;">VituaRadio</span></a>

</div>
<script language="JavaScript">
function blink_uno() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_dos()',1000);
}
function blink_dos() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_uno()',1000);
}
blink_uno();
</script>

Lo que pongas dentro del div con la ID blink va a parpadear.

Puede ser texto, imagen, etc...

Yo en el ejemplo puse un enlace centrado con distinto tamaño y color en el texto.

La velocidad se regula cambiando 1000, cuando mayor sea el numero mas lento será.
(1000 = 1 Segundo.)

Ejemplo:

Visite: VituaRadio

Forma 2:

Es como la anterior forma, pero cambiando un poco el código.

Código 2:

<div id="vku_blink" style="text-align: center;">
<a href="http://vitua.blogspot.com/" target="_blank"><img src="http://2.bp.blogspot.com/_-S0mVtswfhU/TTQEIG_buHI/AAAAAAAAASU/QRFlImDZ3XU/s1600/VituaR.png"/></a></div>
<script language="javascript">
function parpadeo(){
if(document.getElementById('vku_blink').style.visibility=="hidden")
{document.getElementById('vku_blink').style.visibility= "visible"}
else
{document.getElementById('vku_blink').style.visibility= "hidden"}
}
setInterval('parpadeo()',1500);
</script>

Acá le cambie la ID, la velocidad (es un poco mas lento) y muestro una imagen con enlace.

Ejemplo 2:

Forma 3:

Este código es distinto ya que podemos hacer el efecto todas las veces que se quiera utilizando el mismo script, solo hay que ir cambiando la ID.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz),

Edición de HTML.

Y justo arriba de </head>

Poner el siguiente código:

<script language="javascript">
function vku_parpadeo(otro) {
var el = document.getElementById(otro);
if ( el.style.visibility != 'hidden' ) {
el.style.visibility = 'hidden';
}
else {
el.style.visibility = 'visible';
}
}
</script>

Y en donde quieramos mostrar el efecto ponemos así:

<script>setInterval('vku_parpadeo("asocia1")',2000);</script>
<div id="asocia1" style="color: red; text-align: center;">
Texto que aparece y desaparece</div>

Acá utilizo la ID asocia1, que tiene que ser igual en el script y en el div.

Texto que aparece y desaparece con ID asocia1

Otro ejemplo con la ID asocia2

También le cambie el color del texto utilizando estilo CSS y la velocidad (4000).

Texto que aparece y desaparece con ID asocia2

PicMarkr: Marcas de agua en imágenes online

2011-10-07T21:36:00.000-07:00

PicMarkr le permite añadir marca de agua personalizada (imagen o texto) a sus imágenes en línea y gratis.

Es útil cuando se necesita para proteger sus derechos de autor o si desea agregar comentarios a sus fotos.

Muy fácil, solo en 3 pasos.

1- Subimos la foto.

2- Personalizamos el tipo de marca de agua.

3- Descargamos o compartimos la foto.

Botones de Sigueme en Twitter en español

2011-10-05T20:04:00.000-07:00

¿Cómo funcionan los botones de Twitter?
Incorporar un botón de Twitter en tu web es muy sencillo. Simplemente pon el nombre de tu cuenta de Twitter a continuación y podrás copiar y pegar el código de cualquier botón en tu web, blog, firma de foro, etc.. Así cuando pulsen en el, irán directamente a tu cuenta de Twitter y podrán convertirse en tus followers! Eso es todo, ¡felices Twitteos!

http://botones.gigatwitter.com/

Menú sencillo con imágenes y texto

2011-10-03T15:59:00.000-07:00

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

Poner los siguientes códigos:

Estilos del menú:

Enlaces del menú:

Cambiamos # por los enlaces de las páginas y el texto a mostrar.

Ejemplo:

<a href="http://loseasi.blogspot.com/p/contacto.html">Contacto</a>

Si queremos que la página abra en otra pestaña le agregamos target="_blank":

<a href="http://...../contacto.html" target="_blank">Contacto</a>

Mover el gadget a un lugar apropiado; por ejemplo arriba de las entradas.

Botones sociales de Taringa!

2011-09-29T21:52:00.000-07:00

Taringa! es una comunidad virtual donde puedes compartir todo lo que se te ocurra y en el cual puedes obtener mucha información, programas etc...

Me parece una buena opción para que tu blog sea visto por miles de usuarios que entran diariamente.

Comparte más información y agrega los botones sociales de Taringa! a su sitio Web.

Ahora tus visitantes pueden recomendar tu sitio en Taringa! de manera muy fácil.
Solo tienes agregar el botón social de Taringa! en tu web para que los usuarios de Taringa! puedan recomendar a sus seguidores tu mejor contenido.

Sigue los pasos a seguir para comenzar:

http://www.taringa.net/widgets/compartir

Me fui a pescar y miren lo que me pasaba

2011-09-29T16:32:00.000-07:00

Nuevas opciones en vistas dinámicas

2011-09-28T00:04:00.000-07:00

Anteriormente vimos el anuncio de las: Vistas dinámicas de tu blog

Magazine: Classic:

Clic en las imágenes para ver los ejemplos.

Puedes elegir uno de los diseños y cambiar la plantilla desde el "Diseñador de Plantillas"

Ir a Plantillas, Dynamic Views y elegir uno de los 7 diseños.

Tener en cuenta:

En navegadores antiguos no va a funcionar, ej: Internet Explorer 7 e inferiores.
No vas a poder editar el diseño ni agregar gadget.

La ciudad Web 2.0

2011-09-25T17:42:00.000-07:00

Ya vimos La ciudad 2.0, ahora al pasar el tiempo, la ciudad a cambiado.

Muestra qué serían algunos de los servicios 2.0 más influyentes si estuvieran en el mundo real.

Un regalo especial para una mujer Facebook

2011-09-24T21:14:00.000-07:00

Como para quedar bien, un regalo especial para una mujer Facebook.

¿Que es un Blog de Blogger?

2011-09-23T20:17:00.000-07:00

Según la definición de la Wikipedia el blog, también llamado en español una bitácora, es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente.

En cada artículo o post de un blog, los lectores pueden escribir sus comentarios y el autor darles respuesta, de forma que es posible establecer un diálogo, una conversación.

No obstante es necesario precisar que ésta es una opción que depende de la decisión que tome al respecto el autor del blog, pues las herramientas permiten diseñar blogs en los cuales no todos los internautas -o incluso ninguno- puedan participar agregando comentarios.

¿Que es Blogger?

Por blogger, o bloguero, entendemos alguien que escribe en una bitácora en línea o blog.

Blogger es un servicio creado por Pyra Labs para crear y publicar una bitácora en línea. El usuario no tiene que escribir ningún código o instalar programas de servidor o de scripting. Blogger acepta para el alojamiento de las bitácoras su propio servidor (Blogspot) o el servidor que el usuario especifique (FTP o SFTP)

Historia de Blogger.

Lanzado en agosto de 1999, es una de las primeras herramientas de publicación de bitácora en líneas y es acreditado por haber ayudado a popularizar el uso de formularios. Más específicamente, en vez de escribir a mano el HTML y frecuentemente subir las nuevas publicaciones, el usuario puede publicar a su bitácora en línea llenando un formulario en el sitio web de Blogger. Esto puede ser realizado por cualquier navegador y los resultados son inmediato.

En el 2003, Pyra Labs fue adquirido por la empresa Google; por ende, también Blogger. Google consiguió los recursos que Pyra requería. Más adelante, las "características premium", que eran de pago, fueron habilitadas para el público en general gracias a la ayuda de Google.

En el 2004, Google compró Picasa y su utilidad de intercambio de fotografías Hello. Esto permitió a los usuarios de Blogger poner fotografías en sus bitácoras. Así el photoblogging (o la posibilidad de publicar fotografías en las bitácoras) se hacía realidad en Blogger con la integración de Hello.

El 9 de mayo de 2004, Blogger fue relanzado, añadiendo nuevas plantillas de diseño basadas en CSS, archivaje individual de publicaciones, comentarios y publicación por correo electrónico. Después Google lanzaría una herramienta llamada BlogThis! en la barra de búsqueda Google. La herramienta BlogThis! permite abrir una nueva ventana con un formulario de publicación que permite al usuario publicar sin necesidad de visitar la página principal de Blogger e ingresar un usuario.

A finales de 2006, con el nuevo Blogger Beta, se hizo posible lo que tanta falta hacía en Blogger: el poder publicar artículos por categorías o etiquetas, (labels) como son llamados en Blogger, así como la posibilidad de poner bitácoras de acceso restringido o privadas para solo unos cuantos, entre otras funciones.

Inicialmente el servicio de Blogger Beta no permitía hacer los cambios a la plantilla modificando el código HTML. Tiempo después se migraron las cuentas anteriores de Blogger al nuevo Blogger Beta sin que signifique ninguna molestia a sus usuarios.

La actualización al nuevo Blogger requiere el registro de una cuenta de Google e incluye, entre otras mejoras, el servicio de etiquetado de artículos y una mejora en la interfaz de edición y publicación de artículos. La nueva versión no modifica en absoluto la apariencia de las bitácoras en línea creados en la versión antigua, salvo algunos pequeños problemas con acentos y caracteres especiales como la letra ñ. Una vez actualizado un blog, puede decidirse dar un paso más y actualizar la plantilla, con lo que se perderían las modificaciones realizadas al HTML. Por ello se recomienda hacer copia de seguridad de la plantilla (y todos los snippets que se hayan ido incluyendo) antes de asimilar el nuevo conjunto de plantillas.

(Blogger en Wikipedia)

Enlaces de Interes:

La seguridad ante todo!!!

2011-09-22T18:41:00.000-07:00

Blogger LightBox: Dejará de funcionar momentaneamente

2011-09-22T09:27:00.000-07:00

¿Cuando? No se.

Lo anunciaron en el Foro de Blogger.

Hola a todos:

Tras escuchar sus comentarios sobre esta nueva funcionalidad decidimos retirarla para trabajar en algunas mejoras. En cuanto tengamos novedades sobre su re lanzamiento las compartiremos aquí.

Saludos,
Verónica - empleado de Google

Ver comentario

Ventana modal tipo LightBox en Blogger Parte 2

2011-09-21T17:49:00.000-07:00

Primero que nada hay que ver que nosotros no tenemos porque proporcionar una solución a los errores o caprichos de Blogger. Son ellos quien tienen que dar la solución.

No pueden integrar cosas solo porque a ellos les parece lindas.

Tendría que haber alguna opción en la cual cada uno elija si quiere o no integrar la nueva ventana modal tipo LightBox, como sucede con los gadget, que uno lo integra si quiere.

Pero por desgracia no hay ninguna forma para deshabilitarla, por lo menos proporcionada por ellos.

Solo han puesto la función que se activa automáticamente en todos los blog.

No hubo una notificación oficial, por lo menos hasta transcurrido unos días. A todos nos tomo de sorpresa.

Ahora si podemos ver el anuncio oficial: "Las imágenes nunca se vio tan bien"

Ahora vamos a ver las soluciones para quitar la nueva ventana modal tipo LightBox.

Por lo menos hay 2 soluciones que yo conozco.

Una es proporcionada por mí, y la otra la encuentran acá

Ninguna de las 2 soluciones son del todos buenas.

Voy a decir poco de la solución proporcionada en http://englishjavadrinker.blogspot.com.

Solo voy a decir que no es del todo buena ya que puede afectar otras imágenes que funcionen con eventos javascript.

Sobre mi código si voy a decir mas cosas.

En el único lugar que funciona es agregandolo arriba de </html>, lo cual no debería hacerse. Pero solo ahí se ejecuta después del script que ha puesto Blogger.

El código que yo hice fue porque al principio solo actuaba la ventana modal tipo LightBox en imágenes subidas a picasa (blogger) y en la mayoría de los casos los enlaces de las imágenes tienen s1600 y al cambiarlo dejaba de funcionar.

Ya en este momento no solo la ventana abre con imágenes de picasa (blogger), también con otros servidores.

Entonces en lógica el script que hice ya no tendría que funcionar, o solo con imágenes de picasa (blogger).

Pero igual sigue funcionando.

El código lo único que hace es cambiar s1600 por s00 de las imágenes dentro de la ID main.

Si cambiamos la línea: cambiarimg = cambiarimg.replace(/\/s1600/g,'/s00'); por: cambiarimg = cambiarimg.replace(/\/aaaaaaaaaaaaaaaaaaaa/g,'/'); igual deshabilita la función.

Si eliminamos la línea también deshabilita la función.

Hasta podemos simplificar el código así:

<script type="text/javascript">
//<![CDATA[
document.getElementById('main').innerHTML = document.getElementById('main').innerHTML;
//]]>
</script>

O así:

<script type="text/javascript">
//<![CDATA[
cambimagen = document.getElementById('main');
cambimagen.innerHTML = cambimagen.innerHTML;
//]]>
</script>
Visto en Vagabundia

En lógica no tendría que funcionar pero por alguna razón deshabilita el script de Blogger.

Esperemos que Blogger de una solución rápida, YA.

Una ves que Blogger proporcione la solución hay que quitar los códigos puestos por nosotros, ya que es una solución momentánea.

Set de iconos Google+

2011-09-21T11:32:00.000-07:00

Ahora que Google+ está abierto a todos, les traigo unos muy bonitos iconos.

Set de 16 iconos en PNG. 16x16, 24x24, 32x32, 64x64 y 128x128px.

Descargar

Set de iconos en formato: PSD y AI.

Descargar

Fuente y creador

Google+ está ahora abierto a todos

2011-09-20T19:16:00.000-07:00

https://plus.google.com/

Solo debes tener una cuenta de Google para entrar a Google+

Blogger LightBox: No se ve la imagen - Solución cuadro rojo

2011-09-19T23:03:00.000-07:00

He notado que hay imágenes que no se ven y solo sale un cuadro de color rojo.

Eso pasa con las imágenes viejas subidas a Picasa (Blogger).

Hace unos años las imágenes venían con -h al final del tamaño.

Ejemplo:

http://1.bp.blogspot.com/_WvACVGW1iPE/Sj6DyvL-tvI/AAAAAAAAADg/i90Dqg1_0xA/s1600-h/cosasdepeliculas4.jpg

Lo que vamos a hacer es agregar un código JavaScript que quite -h

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML.

Buscamos bien abajo de la plantilla </body>

Y arriba de </body> ponemos el siguiente código:

<script type='text/javascript'>
//<![CDATA[
solimagen = document.getElementById('main');
imgsolu = solimagen.innerHTML;
imgsolu = imgsolu.replace(/00-h\//g,'00/');
solimagen.innerHTML = imgsolu;
//]]>
</script>

Guardamos.

Ahora si podremos ver las imágenes:

Cómo instalar el botón Send o Enviar de Facebook en Blogger

2011-09-18T21:07:00.000-07:00

Con el botón Send o Enviar podemos enviar información, por ejemplo este post, a los amigos de Facebook que uno elija en forma privada, en lugar de compartirlo en el muro a la vista de todos.

Pueden ir directo a la página: Facebook Send Button o colocar el código de mas abajo.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML.

Pueden colocarlo abajo de:

<div class='post-body entry-content'>

Poner el siguiente código:

<span id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<span class='fb-send' expr:data-href='data:post.url' style='border:0;'/>

Si solo se quiere mostrar el botón en las entradas individuales y no en la página principal, hay que poner el código dentro de condicionales:

<b:if cond='data:blog.pageType == "item"'>


</b:if>

Ejemplo:

Ventana modal tipo LightBox en Blogger

2011-09-17T09:58:00.000-07:00

El miércoles 14/09/2011 me entero de la nueva ventana modal del tipo LightBox que ha puesto Blogger en los blogs por medio de una pregunta realizada por andrejasz en el Foro de blogger.

Si quieren pueden ver la pregunta acá

En ese momento en mi blog no me mostraba la nueva ventana modal tipo LightBox, recien en la noche fue que apareció.

Por lo que se, al día de hoy ya casi todos los blog la tienen en funcionamiento.

Si, todos los blog tienen incorporado el código, pero no funciona en todos.

En lo personal no me gusto el tipo de ventana modal tipo LightBox, creo que hay otras opciones mas convenientes.

Lo que mas me molesta es que pongan códigos sin consentimiento del usuario, y como dijo NicoNico, sin "algo que se podrá habilitar/deshabilitar desde algún apartado de configuración del blog."

Tampoco avisaron previamente, lo metieron y listo, les guste o no.

Encima con un peso muy grande, creo que ni todo mi blog pesa tanto.

Aunque no he comprobado que afecte en la carga del blog.

Pueden verlo ustedes mismo acá ingresando el enlace de su blog.

Notarán que no figura el Script (1473586466-lbx_es.js), a pesar de que se vea en el código fuente del blog (lo encuentran bien abajo del todo).

Pero no todos piensan igual y he visto que muchos están contentos con la nueva ventana modal tipo LightBox.

Si aun no saben de lo que digo, pueden hacer clic sobre la siguiente imagen:

Si son unos de esos que no les gusta o interfiere con otra clase de ventana modal tipo LightBox y la quieren quitar, he creado un código que deje en el foro de Blogger y ahora lo pongo acá.

He esperado unos días desde que cree el código para compartirlo con ustedes, esperando a que Blogger proporcione una solución.

Aclaro que es una solución momentánea hasta que Blogger ponga una opción mejor.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML y justo arriba de </html> (esta abajo del todo)

Poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
cambimagen = document.getElementById('main');
cambiarimg = cambimagen.innerHTML;
cambiarimg = cambiarimg.replace(/\/s1600/g,'/s00');
cambimagen.innerHTML = cambiarimg;
//]]>
</script>

Si igual quieren dejar la ventana modal tipo LightBox en el blog, pero tienen un blog diseñado con entradas reducidas, pueden poner el código entre condicionales, para que solo funcione la ventana modal en las entradas y no en la página principal.

Poner el siguiente código:

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
//<![CDATA[
cambimagen = document.getElementById('main');
cambiarimg = cambimagen.innerHTML;
cambiarimg = cambiarimg.replace(/\/s1600/g,'/s00');
cambimagen.innerHTML = cambiarimg;
//]]>
</script>
</b:if>

Ahora solo queda esperar un comunicado de parte del equipo de Blogger.

Agregar mensaje en las entradas: "Has visto el post x veces"

2011-09-16T00:01:00.000-07:00

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML, Expandir plantillas de artilugios.

El código se va a mostrar dentro de los post.

Puede ir abajo de:

<div class='post-footer-line post-footer-line-2'>

O donde lo prefieran mostrar.

Poner el siguiente código:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function setC(visitas, valor){
var caducidad=new Date (2099, 12, 31);
document.cookie = visitas + "=" + escape(valor) + ((caducidad == null) ? "" : ("; expires=" +
caducidad.toGMTString())) }
function readC(visitas){
var busca = visitas + "=";
var i, j;
if (document.cookie.length > 0) {
i = document.cookie.indexOf(busca);
if (i != -1) {
    i += busca.length;
    j = document.cookie.indexOf(";", i);
    if (j == -1) j = document.cookie.length;
    return unescape(document.cookie.substring(i,j));
} } }
var num;
num=readC("Visitasblog");
if (!num) num=0;
num++;
setC("Visitasblog", num);
document.write("<div class='visitablog'>");
document.write("<b>Has visto el post "+num+" veces.<\/b>");
document.write("<\/div>");
//]]>
</script>
</b:if>

Puedes agregarle estilos con la clase visitablog: (va arriba de ]]></b:skin>)

.visitablog{
propiedad: valor;
propiedad: valor;
}

Ejemplo:

El código trabaja con Cookies, si el visitante elimina los cookies de su navegador el contador vuelve a 1.

Caja de texto con aviso o mensaje en movimiento tipo marquee

2011-09-14T20:51:00.000-07:00

Paso 1:

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML y justo arriba de </head>

Poner el siguiente código:

Camiar el primer y el segundo texto.

Paso 2:

El siguiente código va en el lugar que se quiera mostrar.

Puede ser en un gadget HTML/Javascript.

<form name="scrform_Vku" onSubmit="0">
<input type="text" name="scrtext_Vku" style="font-family: 'Arial'; color:#6699FF; background: transparent; font-weight: bold; font-size:15px; width:550px; text-align:center; border:0"/></form>

Adaptamos a gusto cambiando el estilo.

www.softicons.com: Otra página con muchos iconos gratis

2011-09-13T17:28:00.000-07:00

http://www.softicons.com

Page Peel: Iconos de redes sociales gratis

2011-09-11T18:34:00.000-07:00

Iconos estilo page peel.

Descargar Versión 1

Descargar Versión 2

Fuente