Ciudad Blogger: noviembre 2009


descargas

Nombre:	iPod Touch
Diseñador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:	Plantilla para Blogger, 1 columna, 719px de ancho, 1 menú, 3 columnas en el footer, Leer más automático, Simula un iPod Touch
Incluye:	Plantilla XML, Instrucciones de instalación, Licencia

iPod Touch es una plantilla para Blogger ideal para los amantes del iPod. Es una plantilla de una columna, aunque en el footer tiene 3 columnas para acomodar los gadgets. Tiene un menú en la parte superior y los botones son una adaptación de los íconos del iPod o iPhone. Ya tiene integrado el Leer más de forma automática, es decir, sola hace los cortes de las entradas.

Personalización:

Menú
Para personalizar los enlaces del menú entra en Diseño > Edición de HTML y busca esta parte:

<a href='mailto:tucorreo@gmail.com' id='menu-Mail'/>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' id='menu-Feed'/>
<a href='http://twitter.com/usuario' id='menu-Twitter'/>
<a href='http://www.facebook.com/usuario' id='menu-Facebook'/>
<a href='http://myspace.com/usuario' id='menu-MySpace'/>
<a href='http://www.youtube.com/user/usuario' id='menu-YouTube'/>

Cambia lo que está en color rojo por tu nombre de usuario de cada cuenta. Si quisieras cambiar los íconos busca:

a#menu-Mail, a#menu-Feed, a#menu-Twitter, a#menu-Facebook, a#menu-MySpace, a#menu-YouTube

Y cambia la URL de la imagen según corresponda el caso. En Internet hay muchos íconos gratis estilo iPhone que puedes usar para que combinen con la plantilla.

Leer más
La función de Leer más funciona con un script y está configurado para que muestre sólo las primeras 30 palabras. Si quieres modificarlo busca en la plantilla esta parte:

var summary_noimg = 30;
var summary_img = 30;
var img_thumb_height = 35;
var img_thumb_width = 35;

La primera línea es el número de palabras a mostrar sin imagen; la segunda el número de palabras a mostrar en una entrada con imagen; la tercera y la cuarta es el alto y ancho de las imágenes en miniatura.

Funciona con todos los navegadores aunque los usuarios de Internet Explorer 6 no podrán disfrutarla. Recuerda que una forma de agradecer el tiempo invertido en esta plantilla gratuita es no remover los créditos.

[+/-]

Personalizar los bloques entrecomillados

[+/-]

Personalizar las viñetas del blog

[+/-]

Pop Star: Plantilla para Blogger


descargas

Nombre:	Pop Star
Diseñador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:	Plantilla para Blogger, 2 columnas, 707px de ancho, 1 menú, Colores vivos
Incluye:	Plantilla XML, Archivo PDF del logotipo, Fuente TTF del logotipo, Instrucciones de instalación, Licencia

Después de haber pasado por los colores oscuros de la noche, les presento Pop Star.

Plantilla para Blogger de dos columnas, una del contenido y otra del lado derecho, cabecera reducida para darle espacio al menú.

Es una plantilla muy sencilla pero juvenil con los colores representativos de la música pop que le dan mucho estilo.

Personalización:

Menú
Para modificar el menú entra a Diseño > Edición de HTML y busca esta parte:

<ul>
<li><a href="#">Inicio</a></li>
<li><a href="http://popstar-template.blogspot.com/feeds/posts/default">RSS Entradas</a></li>
<li><a href="http://popstar-template.blogspot.com/feeds/comments/default">RSS Comentarios</a></li>
<li><a href="#">Otro enlace</a></li>
<li><a href="mailto:tucorreo@gmail.com">Contacto</a></li>
</ul>

Modifica lo que está en color rojo por las URL de los enlaces que quieres, y lo que está en verde por el texto del enlace.

Logotipo

Se incluye en el archivo de descarga el documento PDF para crear un logotipo similar además de las fuentes en formato TTF que deberán instalarse en el equipo antes de usarse.

Fecha
La fecha tipo calendario funciona perfectamente aun con las entradas creadas el mismo día. Para que el calendario funcione correctamente deberás entrar en Configuración > Formato y en Formato de cabecera de fecha y asegurarte que esté seleccionada una fecha como esta: 22 noviembre 2009

Lista de seguidores
Los colores de la lista de Seguidores deberán cambiarse haciendo click en Editar ya que al tener un fondo negro los textos de la lista podrían no verse.

La plantilla ha sido probada en todos los navegadores con la última versión correspondiente a cada una así que al menos en las últimas versiones no debe haber ningún problema.

Que disfruten la plantilla!

[+/-]

Motor de Búsqueda Personalizada de Google

google custom search engine

Aunque hemos visto tres formas de poner un buscador en el blog son muchos los que dicen que muchos resultados no aparecen en las búsquedas aun cuando el contenido exista. Y es que la forma en que esos buscadores funcionan es muy simple por lo que hay muchos datos que pasan por alto.

Un buscador con el que seguro quedarás más que satisfecho (a) es el Motor de Búsqueda Personalizada de Google, que no es otra cosa que la potencia del buscador de Google dentro de tu página web.

Las ventajas de este buscador son:

Los resultados son más precisos.
Los comentarios se incluyen en los resultados.
Posibilidad de incluir varios sitios web para encontrar los resultados.
Se puede personalizar la página donde se muestran los resultados.
Si tienes cuenta de AdSense puedes aprovecharla para incluir anuncios en los resultados.

Para colocar este buscador en tu blog,

Entra a Google Custom Search Engine.
Haz click en el botón azul (Crear motor búsq. person.)
Si no estás logueado en tu cuenta de Blogger te pedirá que lo hagas.
A continuación dale un nombre al buscador, una descripción, selecciona el idioma así como las páginas donde deseas que encuentre los resultados, por ejemplo: http://tublog.blogspot.com
Selecciona la edición estándar y haz click en Siguiente.
En la siguiente página dale click en Finalizar (no es necesario que selecciones la opción de confirmar por correo)
Ahora en el panel de control que aparece haz click en Custom Search element, copia el código y pegalo en un elemento HTML/Javascript.
Si deseas incluir anuncios de Adsense selecciona la opción Search my site and use Adsense for Search, ingresa tu clave de publicador, copia el código y pegalo en tu blog.

Para cambiar el aspecto del buscador ingresa de nuevo a Google CSE, haz click en Panel de Control y en el menú izquierdo haz click en Diseño, ahí haz los cambios que quieras.

Sin duda es un buscador muy completo que independientemente de la posibilidad de incluir AdSense notarás que los resultados en las búsquedas son más completos.

Enlace | Google Custom Search Engine

[+/-]

Logotipo personalizado en suscripciones por correo de Feedburner

[+/-]

Botón de Facebook flotante

[+/-]

Nocturnus Template: Plantilla para Blogger


descargas

Nombre:	Nocturnus Template
Diseñador:	El Potro
Compatibilidad:	Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer
Características:	Plantilla para Blogger, 3 columnas, 1000px de ancho, 1 menú, Optimizada para SEO, Colores oscuros, Comentarios destacados
Incluye:	Plantilla XML, Instrucciones de instalación, Licencia

Después de varias plantillas que empiezo y nunca termino les presento mi primera plantilla terminada, Nocturnus Template.

Es una plantilla de tres columnas, dos a los laterales y otra en medio como parte del contenido, cabecera reducida con espacio para alargar el menú superior derecho.

Está inspirada en la noche y es por eso que los colores son oscuros y el diseño es sencillo y elegante, perfecto para blogs con contenido profesional.

Personalización:

Para modificar el menú busca el siguiente código y cambia las URL y títulos que correspondan:

<div id='menu'>
<a href='#'>Inicio</a> | <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS Entradas</a> | <a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>RSS Comentarios</a> | <a href='mailto:tucorreo@gmail.com'>Contacto</a>
</div>

La cabecera tiene un alto de 75px y está pensada para ingresar sólo el título del blog; si se desea cambiar el título por una imagen se recomienda que ésta tenga un alto de no más de 75px.

La imagen principal es una obra derivada de la fotografía de 111 Emergency, retratando la ciudad de Auckland. Para cambiarla hay que editar la imagen que se encuentra bajo las propiedades de #outer-top. Se requiere un programa de diseño para hacerlo.

He maximizado la compatibilidad para todos los navegadores (arriba se especifica cuáles) sin embargo es posible que en Internet Explorer se presenten pequeñas diferencias, esto podrá depender de la versión del navegador.

Los títulos se han optimizado para SEO con la finalidad de ser más amigables para los robots de los buscadores y facilitar el posicionamiento en la web.

Espero y sea de su agrado, que la disfruten!

[+/-]

Botón de Twitter flotante

[+/-]

Cómo poner los códigos correctamente en las entradas

Uno de los problemas más habituales al momento de usar un código en una entrada es que no se ponen en el modo adecuado.

Cuando se use un código en una entrada, ya sea un script, una tabla, una imagen, video, o cualquier cosa que no sea simple texto debes cerciorarte que estés en la pestaña de Edición de HTML y no en Redactar.

La pestaña de Edición de HTML como su nombre lo indica mostrará los códigos tal cual para poder ser editados, y es ahí donde debemos manipularlos y hacer las modificaciones necesarias.

El problema viene cuando insertamos un código en la entrada y ésta se encuentra en la ficha Redactar, entonces el editor interpreta los códigos y en esa interpretación puede hacer cambios que no queremos y la final el truco que queríamos simplemente no funciona.

Un método que recomiendo es, primero escribir todo el texto de la entrada sin imágenes ni códigos; esto lo puedes hacer tranquilamente en la ficha Redactar, ahí usa los botones del editor para cambiar el color de las letras, tamaños, etc. Y ya que has visto que se ve como quieres, entonces cambia a la ficha Edición de HTML y agrega los códigos que vayas a usar y haz los cambios que hagan falta.

Si al intentar publicar la entrada aparece un error, fíjate qué dice el error, ahí siempre dirá cuál es el problema y por consiguiente sabremos cómo arreglarlo. Lo más común son etiquetas que no se cierran adecuandamente, así que si abriste una etiqueta <div> (por poner un ejemplo), fíjate que tenga la etiqueta de cierre correspondiente, </div>

Lo mismo con los enlaces que uses dentro de las entradas, antes de ponerlos abre una ventana y pega ahí los enlaces para verificar que funcionan correctamente, ya sea el link de una imagen o de una página verifica que los enlaces no estén rotos para garantizar que los lectores los verán de forma correcta.

Tomando en cuenta estos detalles no deberás tener problemas al usar un código dentro de una entrada y te evitarás muchos dolores de cabeza.

[+/-]

Personalizar enlace de Leer más

[+/-]

Botón para compartir por Twitter y Facebook

[+/-]

Estrellas en movimiento dentro del blog

Este es otro de esos truquillos que no sirven para nada pero que se ven muy bonitos en el blog.
Se trata de unas estrellas en movimiento que giran y se expanden en círculo dentro del blog y cambian de color conforme se mueven.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Para ponerlo en tu blog entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<script language='javascript' type='text/javascript'>
//<![CDATA[
//Iván Nieto Pérez

var incremento = 0
//limite de la expansion de las letras
var y = 200
var x = 300
//posicion del centro de referencia del dibujo que describen las letras
var X = 400
var Y = 200

//velocidad de movimiento de las letras
var velocidad = 50
//mensaje que se mostrara y cuyas letras danzaran por la pantalla
//maximo 25 letras (de lo contrario, se sobrepasa el rango de colores valido)
var mensaje = "★★★★★★★★★★★★★★★★★★★★"
var numeroLetras = mensaje.length

function mueveLetras() {
for ( j = 0 ; j < numeroLetras ; j++ ) {

if (document.layers) {
letra = eval( "document.capa" + j )
letra.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.all) {
letra = eval( "document.all.capa" + j )
letra.style.pixelTop = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
letra.style.pixelLeft = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10))
} else if (document.getElementById) {
letra = document.getElementById( "capa" + j )
letra.style.top = (Y + Math.cos((20 * Math.sin(incremento/20)) + j * 70) * y * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
letra.style.left = (X + Math.sin((20*Math.sin(incremento/20)) + j * 70) * x * (Math.sin(10+incremento/10) + 0.2) * Math.cos((incremento + j * 25)/10)) + 'px'
} else //no soportado, finaliza ejecucion
return

}

incremento += .2
setTimeout("mueveLetras()", velocidad)
}

function escribeTexto() {
var texto = ''
for ( j = 0 ; j < numeroLetras ; j++ ) {
texto += '<div id="capa' + j + '" style="position:fixed; visibility:show; left:250px; top:150px; z-index:2; font-size: 2em; color: rgb(' + j*10 + ',' + (255-j*10) + ',150)">' + mensaje.charAt(j) + '</div>'
}
document.write( texto )
}

window.onload = mueveLetras;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}

//]]>
</script>

Luego busca la etiqueta </body> y antes de ella pega esto:

<script language="javascript" type="text/javascript">
escribeTexto()
</script>

¿No te gustan las estrellas? Entonces puedes usar cualquiera de estos caracteres:

♥ ☺ ✿ ♫ ♪ ☽ ☼ ☆

Puedes jugar con la combinación de colores modificando donde dice 150, puedes cambiarlo por 0, 30, 50, 100 o 200, cualquiera de esos números.

Y listo, tendrás un bonito adorno para tu blog que seguro llamará la atención a todos.

NOTA: Es posible que este script no funcione si tienes instalado algún otro script para marquesinas, títulos en movimiento o cursores con texto siguiéndolo.

[+/-]

Botón de No Tocar que cambia el tamaño de la ventana

[+/-]

Menú vertical desplegable

Ayer estaba haciendo una plantilla (una de esas que siempre empiezo y nunca termino) y después de "armar todas las partes" me di cuenta que ya no quedaba espacio para agregarle un menú y entre tantas ~~tonterías~~ decoraciones que le había puesto se veía más saturado de lo que de por sí ya estaba.

Así que pensé: -¿por qué no poner un menú desplegable que esté escondido y que aparezca cuando presiono un botón?

De esta forma podemos meter varias pestañas y el menú no se verá saturado porque estará escondido y se desplegará hasta que el usuario lo decida, de igual modo se oculta de nuevo con el botón.

Pueden ver un ejemplo en este blog de pruebas.

Para poner este dinámico menú entra a Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<script type='text/javascript'>
//<![CDATA[

//]]>
</script>

Ahora antes de la etiqueta </body> pega esto:

<div id='BotonMenu' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='VerOcultarMenu();' title='Mostrar / Ocultar'>
<span style='font-weight:bold; border:1px solid red; text-align:center; padding:5px; background:#ccc; color:#000;'>Ver/Ocultar menú</span></a>
</div>

Y por último después de la etiqueta <div id='outer-wrapper'> pega esto:

<div id='MenuDesplegable' style='position:fixed; visibility:hidden; background:#ccc; z-index:1;'>
<table style='border:1px solid red; width:150px; text-align:center; padding:5px;'>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 1</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 2</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 3</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 4</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 5</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 6</a></td></tr>
<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 7</a></td></tr>
<tr><td><a href='#'>Pestaña 8</a></td></tr>
</table>
</div>

Personalización:

En el segundo código cambia Ver/Ocultar menú por el texto que quieras para tu botón. Utiliza lo que está en color verde para cambiar el color de fondo, color de texto y color de borde del botón.

También puedes usar una imagen como botón, sólo remplaza el texto por este código y cambia la URL de la imagen:

<img src="URL de la imagen" />

En el tercer código cambia el signo de gato (#) por la URL del enlace, y Pestaña por el texto que quieras para el vínculo.

Si quisieras agregar más pestañas sólo repite antes de </table> esta línea:

<tr><td style='border-bottom:1px solid #000;'><a href='#'>Pestaña 1</a></td></tr>

Para cambiar el color de fondo del menú así como el borde y el ancho, cambia lo que está en color verde del tercer código.

Sencillo ¿no?

[+/-]

Enlaces con líneas en movimiento

[+/-]

Gadget de entradas más visitadas (populares)

A menudo me preguntan cómo hago para poner el gadget de entradas más visitadas, que no es lo mismo que el gadget de las entradas más comentadas ya que el hecho que un post tenga muchos comentarios no significa que tenga muchas visitas.

Anteriormente había un script que podía mostrarnos las entradas más vistas en un día pero hace mucho dejó de funcionar.

Hay dos formas de hacerlo, una es a través de AffiliateBrand, que nos dará un widget que podremos colocar en el blog con los posts más populares. Y la otra forma (como lo hago yo) es manualmente, apoyándonos en los resultados de Google Analytics y usando una Lista de enlaces.

Con Google Analytics

Primero deberás ingresar a tu cuenta de Google Analytics y hacer click en Ver informe.
Luego ve hasta abajo y busca el recuadro que dice Visión general del contenido, ahí haz click de nuevo en Ver informe.
Hasta abajo verás que dice Contenido principal, otra vez click en Ver informe.
Abajo verás las URL que tienen más visitas incluyendo las URL de las etiquetas, esas no nos interesan, sólo tienes que buscar las URL de las entradas con más visitas (ocupan los primeros lugares).
Ahora en Blogger entra a Diseño > Elementos de la página > Añadir un gadget > Lista de enlaces y ahí agrega los links de las entradas con más visitas.

Puedes agregar los links que desees según con cuántos quieras armar tu top ten.

Recuerda que este gadget de posts más populares o más vistos está hecho manualmente así que cada semana deberás revisar las estadísticas de Analytics y actualizar tu Lista de enlaces.

Con AffiliateBrand

Entra a la página de AffiliateBrand e ingresa la dirección de tu blog y presiona el botón Add blog.

Inmediatamente aparecerá un recuadro de opciones, haz click en Configure.

Copia el código y pégalo en un elemento HTML/Javascript.

Listo, tendrás un gadget con las entradas más vistas de tu blog. Si lo deseas puedes hacer click en Customize y cambiar el tamaño del widget y otras pequeñas opciones.
Este gadget tardará unos minutos en recopilar la información para poder mostrar los resultados de los posts más vistos de tu blog y suele tardar demasiado en cargar además de que incrusta mucha publicidad por lo que no es muy recomendable usarlo.

[+/-]