Ciudad Blogger

Inicio » Archivos de junio 2011

Personalizar el FanBox de Facebook

Hace unos días CebicheTV me decía que había visto en Daddy Design un Fanbox personalizado que quería aplicar pero que no entendía muy bien cómo hacerlo.

La forma como lo presentan es un estilo minimalista que se adapta muy bien a plantillas de diseños más simplistas, aunque a partir del código CSS se puede modificar para hacer una readaptación del mismo.

Como puedes ver se ha eliminado la cabecera del Fanbox, se han quitado los bordes, el botón 'Me gusta' se ha puesto debajo, y el número de fans está en otro color.

Para conseguir personalizar el FanBox de esta forma necesitaremos saber la ID de nuestra página de Facebook.

Para saberla entra a tu página de Facebook y haz click en el botón Editar la página que se encuentra en el lado superior derecho.

En la barra de direcciones de tu navegador verás al final una serie de números, esa es la ID.

https://www.facebook.com/pages/edit/?id=XXXXXXXXXXXXXXX

Ahora descarga este archivo, descomprímelo y sube el archivo a un hosting.
Luego entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega este código:

<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:fan profile_id="XXXXXXXXXXXXXXX" stream="0" connections="8" logobar="0" width="240" css="URL del archivo CSS"></fb:fan>

Cambia las equis que están en rojo por la ID de tu página de Facebook que conseguiste anteriormente. Y agrega la URL de tu archivo CSS que subiste al hosting. Con eso será suficiente para tener el FanBox con este estilo minimalista.
¿Se puede personalizar más? Claro, si abres el archivo facebook.css te encontrarás con este código:

.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px; /* Altura del FanBox */
border: 0 !important; /* Eliminamos el borde */
background: #fff !important; /* Color de fondo del FanBox */
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none; /* Con eso eliminamos la cabecera */
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600; /* Color de la fuente para el número de fans */
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important; /* Color del nombre de los fans */
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0; /* Con eso colocamos abajo el botón 'Me gusta' */
right: 5px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}

En esas anotaciones color verde se indica cuáles son las áreas que podemos modificar, como el color de fondo, el color del nombre de los fans, el color del número de fans, etc.

Se recomienda no cambiar el tipo de letra para evitar desajustes con los espacios. Y si cambias la altura del gadget deberás hacerlo tanto en el código que va en el HTML/Javascript como en el archivo CSS, tomando en cuenta que la altura en negrita deberá tener aproximadamente 40px más que la altura establecida en el CSS.

Seguro podrán hacerse modificaciones interesantes, pero así como está a mí me parece bastante lindo el diseño :)

Mostrar una imagen diferente en los links rotos de las imágenes

Algunos tienen la mala costumbre de hacer hot-linking en su blog, es decir, andan navegando por la red, encuentran una imagen, consiguen su URL y la usan para mostrar dicha imagen en su blog. Es es el hot-linking, y lo único que hace es que perjudiquemos el ancho de banda del sitio al que le hemos tomado la foto. Pero además de eso corres el riesgo de que el dueño del sitio Web elimine la imagen y te quedes sin ella.

Cuando eso sucede obviamente la imagen ya no se mostrará en el blog y en su lugar veremos el típico icono que representa que una el vínculo de una imagen está roto, o sea que el link de esa imagen no funciona.

Pero esa no es la unica razón por la que pueda aparecernos ese icono, a veces aun cuando subimos las imágenes a nuestro propio hosting el servidor puede estar caído, la conexión puede andar lenta, sin querer eliminamos la foto, o simplemente hemos copiado mal la URL de la imagen. En cualquiera de esos casos puede aparecer el icono de la que hablo que indica que la imagen no existe o no cargó.

Lo que veremos hoy es cómo mostrar una imagen diferente al habitual icono predeterminado que trae el navegador, de manera que podamos cambiar la imagen que se muestra cuando la URL de la imagen está rota.

Así que cambiaremos esto:

Por una imagen personalizada, como por ejemplo, esta:

Para conseguirlo usaremos un script muy corto que lo que hace es detectar el tamaño ancho de la imagen, si lo encuentra en cero entonces mostrará la imagen que hemos elegido.
Sólo debes entrar en Diseño | Edición de HTML y antes de </head> pegar lo siguiente:

<script type='text/javascript'>
//<![CDATA[
// Script para sustituir imágenes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "https://lh4.googleusercontent.com/-3UgRMogbe88/TgVOkNvmg4I/AAAAAAAABhE/AGffCXH_sMk/no-imagen.png";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Lo que está en color rojo es la URL de la imagen de ejemplo que he puesto, pero puedes cambiarla por alguna que tú diseñes o el icono que tú elijas.

Cabe aclarar, que este script no sustituirá las imágenes de los hostings que añaden su propia imagen para indicar que la imagen ha sido eliminada como es el caso de TinyPic y Photobucket.
Recuerda que, para evitar en lo mayor posible que las imágenes no se vean, no uses la imagen de alguien más, mejor sube tus imágenes a Picasa y así te evitarás muchos dolores de cabeza.

El script está probado en Firefox 5, Google Chrome 12, Opera 11, Safari 5, Internet Explorer 7, 8 y 9. En todos funciona, si no ves el icono personalizado de inmediato entonces tienes que esperar a que cargue el blog por completo.

Subir imágenes y obtener la URL de la imagen

Enviar sitemap a Google

Usar el mismo avatar en todos los comentarios propios

Relojes de cuenta regresiva personalizados

Countdown Clock Codes es un servicio que nos permite crear nuestros propios relojes de cuenta regresiva personalizados, para ello nos ofrecen distintas imágenes de fondo para usar, así como la posibilidad de agregar un mensaje personal en ellos.

Dispone de varias categorías como cumpleaños, navidad, caricaturas, año nuevo, etc.

Su uso es sumamente sencillo, sólo hay que elegir la fecha esperada, la imagen de fondo, el mensaje personal, los colores y listo. Una vez configurado copiamos el código y lo pegamos en un elemento HTML/Javascript.

MySpace-Countdowns

Algunas opciones, excepto la palabra UNTIL (hasta, en español) podemos modificar una vez que tenemos el código.

<center><embed src="http://www.countdownclockcodes.com/cd/ccc-cartoons/show.swf?clickURL=http://www.countdownclockcodes.com/&clickLABEL=MySpace-Countdowns&flashLABEL=CountdownClockCodes&skin=http://www.countdownclockcodes.com/cd/ccc-cartoons/skins/2.jpg&text=%20Aqui%20va%20tu%20mensaje&untilColor=3501985&textColor=16777215&datesColor=0&year=2050&month=0&day=1&hour=0&minute=0&second=0&x=0&y=80" quality="high" bgcolor="#ffffff" width="300" height="200" name="countdown" align="middle" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><small><a href="http://www.countdownclockcodes.com/">MySpace-Countdowns</a></small></center>

La dirección que está después de URL es el enlace que se encuentra dentro del contador.

Hay dos etiquetas LABEL, la segunda es el texto que aparece en ese enlace dentro del contador.

La URL que está después de skin es la imagen de fondo, así que podemos cambiarla por una imagen propia si es que alguna de las del sitio no nos gustan.

Lo que está después de text es el mensaje personalizado, ese puede quitarse si es que deciden no mostrar ningún texto.

Y como un extra lo que está en gris es el enlace de hasta abajo que aparece fuera del contador.

No es nada extraordinario, pero es una buena opción si es que están cansados de usar un reloj de cuenta regresiva más simple, sobre todo si podemos personalizarlo un poco más.

Enlace | Countdown Clock Codes

La Edición de HTML en la nueva interfaz de Blogger

Desde que en abril se anunció la nueva interfaz de Blogger mucho se ha esperado de ella pero pocos han sido quienes han tenido la oportunidad de usarla. Estos "afortunados" -como dice Blogger-, seguro ya saben que esta nueva interfaz no tiene la opción de editar la plantilla desde la Edición de HTML. Únicamente podemos cambiar de plantilla, o bien, cambiar de lugar o eliminar los gadgets desde lo que usualmente conocemos como Elementos de la Página y que ahora sólo se llama Diseño.

Como todo lo que está en Blogger in Draft es de pruebas, sería muy apresurado decir que es definitivo que la Edición de HTML no la volveremos a ver. Así que bien puede ser que definitivamente no la incluyan o que más adelante lo hagan. Lo cierto es que en estos casos lo mejor es no especular y dejar que de la ~~boca~~ mano de Blogger salga la versión oficial con sus merecidos argumentos, aunque ya sabemos que siempre lo hace más tardado de lo que debería.

Mientras tanto, los "afortunados" que ya disponen de esta nueva interfaz aún pueden editar la plantilla desde la Edición de HTML, ya sea usando la versión normal de Blogger o ingresando a una URL antigua.

Como esta interfaz está disponible sólo desde Blogger in Draft, entonces la primera opción es dejar de usar esta interfaz como escritorio predeterminado. Así que entramos en Blogger, desmarcamos la casilla Establacer Blogger en borrados como predeterminado, cerramos la sesión e ingresamos al Blogger "normal".

Habiendo hecho esto podrás utilizar nuevamente la versión oficial actual que es la que la mayoría conocemos y que sí dispone de la Edición de HTML.

Otra opción es que, si no quieres estar entrando y saliendo de esa interfaz cada vez que vayas a editar la plantilla entonces a través de un link puedas acceder a la antigua interfaz de Blogger in Draft y así puedas utilizar la Edición de HTML.

Para ello necesitas ingresar a tu cuenta de Blogger, y en la barra izquierda localiza el nombre de tu blog y luego haz click en Escritorio.

Al hacer esto verás en la barra de direcciones de tu navegador una dirección que contiene la ID de tu blog, es una serie de números fácil de reconocer.

Copia esa ID y luego usa este enlace:

http://draft.blogger.com/html?blogID=XXXXXXXXXXXXXXXXX

Cambia lo que está en rojo por la ID de tu blog y podrás acceder a la Edición de HTML de la antigua interfaz de Blogger in Draft.

Como también sería muy tedioso tener que estar buscando la ID de tu blog a cada rato puedes agregar esa URL a tus marcadores (favoritos) y así tener un acceso mucho más fácil.

Lo dicho, no hay nada definitivo de manera oficial pero mientras tanto estas son unas opciones para poder editar la plantilla del blog. Y claro, que si ya tienes esta interfaz aprovecha la opción de Enviar comentarios para que puedas quejarte libremente :)

Agregar una descripción a las etiquetas del blog

En algunas ocasiones es necesario ser lo más descriptivo posible con ciertas áreas del blog como por ejemplo en las páginas de etiquetas; ya sea porque quizá la etiqueta que elegimos no dice mucho sobre la temática de la que se habla, o porque el público al que está dirigido el blog necesita más detalles para su comprensión.

Así que una forma de ser más explícitos es agregar una descripción en las páginas de las etiquetas para cuando el lector haga click en esa etiqueta pueda tener una introducción sobre lo que encontrará en esa categoría.

Como también soy malo describiendo las cosas mejor mira en este blog de pruebas que enlaza a la etiqueta Juegos. Si das click en otras etiquetas verás que la descripción cambia y ninguna de ellas se ven ni en la portada ni en las entradas individuales.

Para agregar estas descripciones a las páginas de etiquetas haremos uso de los códigos condicionales para que -redundantemente- condicionemos que sólo se muestren en la etiqueta que especifiquemos, por lo tanto puedes hacerlo para todas las etiquetas de tu blog o sólo para las que elijas.

Primero ingresa a Diseño | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:include data='top' name='status-message'/>

Si no la tienes probablemente la eliminaste para ocultar el mensaje "Mostrando entradas con la etiqueta..."
Si ese es tu caso entonces busca este código:

<div class='blog-posts hfeed'>

Debajo de cualquier de esos códigos agrega esto:

<b:if cond='data:blog.url == "http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta"'>
<div id='IntroEtiquetas'>
<img src='URL de la imagen' style='float: left; border:0; margin: 0 5px 10px 0;'/>
...Aquí va la descripción de la etiqueta...
</div>
</b:if>

Escribe el nombre de tu blog y el de la etiqueta donde se indica. Si lo deseas también puedes agregar una imagen, pero si no, puedes quitar el código de la imagen y no pasa nada.

Ese código es para una sola etiqueta, si deseas más sólo agrega debajo de él otro código igual cambiando obviamente el nombre de la etiqueta y su descripción.

Ya que hayas hecho eso añade antes de ]]></b:skin> los estilos:

#IntroEtiquetas {
background:#6E6E6E; /* Color de fondo */
color:#000; /* Color del texto */
padding:20px;
}

Son estilos muy básicos pero que puedes mejorar agregando más o modificando los existentes para que se adapten a tu gusto.

Como ves es un procedimiento muy simple que puede ayudar a ilustrar las categorías de tu blog haciéndolas más personalizadas.

Menú vertical con subpestañas hecho sólo con CSS

Este es un menú vertical con subpestañas hecho sólo con CSS, no tiene nada de Javascript o de alguna librería, así que para aquellos que prefieren las cosas simples esta es una buena opción para organizar las etiquetas del blog o cualquier enlace.

Colocarlo es bastante sencillo, sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega los estilos siguientes:

/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 162px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
padding: 8px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6E6E6E; /* Color de fondo al pasar el mouse */
color: #000;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top: -1px;
}
#menuvertical ul li ul li a {
width: 160px;
background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:

<div id="menuvertical">
<ul>

<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 1.1</a></li>
<li><a href="URL del enlace">Pestaña 1.2</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
</ul>
</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
</ul>
</li>

</ul>
</div>

Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de </ul> una línea como esta:

<li class="nivel1"><a href="URL del enlace" class="nivel1">Pestaña 6</a></li>

Si quieres agregar una pestaña CON subpestañas entonces añade igual antes de </ul> lo siguiente:

<li class="nivel1"><a href="#" class="nivel1">Pestaña 6</a>
<ul>
<li class="primera"><a href="URL del enlace">Pestaña 6.1</a></li>
<li><a href="URL del enlace">Pestaña 6.2</a></li>
<li><a href="URL del enlace">Pestaña 6.3</a></li>
<li><a href="URL del enlace">Pestaña 6.4</a></li>
</ul>
</li>

No es un menú fuera de lo normal pero sí es bastante útil para organizar los enlaces del blog.

Cambiar el favicon del blog ahora desde Blogger

Cuando en el blog aparecen menos entradas de las configuradas

Son muchos quienes por primera vez se topan con este conflicto, configuran su blog para mostrar equis número de entradas y de un momento a otro aparecen menos entradas en el blog de las que habían configurado.

No es algo nuevo ni se trata de un error de la plantilla o un problema de Blogger y aunque ya hace un tiempo habíamos tocado parte de ese tema me parece que es necesario explicar un poco más a detalle el porqué sucede esto debido al gran número de personas que preguntan muy a menudo por esta situación.

Es bien sabido por todos que desde siempre Google ha querido destacar por la rapidez en sus productos haciendo de este factor un distintivo de su marca. Blogger, al ser un producto de Google no se puede quedar atrás por lo tanto quiere que los blogs alojados en blogspot sean lo más rápido posibles en cargar, esto no por un capricho de ellos, sino porque está mas que visto que los usuarios preferimos los sitios que cargan más rápido a aquellos que nos quitan 3 minutos de nuestro "valioso tiempo" o que simplemente parece que nunca acabarán de cargar.

Es por ello que desde febrero del 2010 Blogger puso en marcha la autopaginación como una medida para controlar la velocidad de carga de los blogs. Esto es que, si un blog tarda mucho tiempo en cargar debido a la cantidad de contenido que posee, entonces, sin importar cuántas entradas hayas configurado, Blogger determinará de forma automática el número apropiado de entradas a mostrar tanto en la portada como en las páginas de etiquetas y archivos a fin de no hacer el blog tan lento.

Por lo tanto, si tenías configurado (por ejemplo) 10 entradas a mostrar entonces podría ser que sólo se muestren la mitad de ellas o menos.

No hay un truco o receta mágica para evitarlo, es una medida que tomó Blogger y que parece no haber marcha atrás. Sin embargo sí puedes hacer algo para reducir el tiempo de carga de tu blog y de esta forma quizá puedas ver un par de entradas más (no te obsesiones, no verás 50 entradas de nuevo).

Si la acción fue tomada por la velocidad de carga del blog entonces trabaja en reducirla:

Quita los gadgets que no sean necesarios o que sean lentos en cargar

Revisa si tienes algún script que alguna vez pusiste pero que dejaste de usar y olvidaste eliminar de la plantilla

Reduce el número de imágenes que tengas tanto en las entradas como dentro de la plantilla, o bien, utiliza un editor que optimice las imágenes para hacerlas más ligeras.

Muestra algunos gadgets sólo en las entradas, así evitarás que éstos tengan que cargar en la portada y archivo del blog

En resumen, imagina que en tu blog harás una venta de garage y todo lo que no uses o no sea necesario que se vaya para afuera, y lo que vayas a dejar que no ocupe tanto espacio. Más delante hablaremos un poco más sobre el tema de reducir la velocidad de carga del blog.

Seguro que muchos se quejan (y se seguirán quejando) por estas medidas pero piensa que tener un blog más rápido significa tener mayores probabilidades de tener más visitas en el blog pues los que antes abandonaban la página porque no cargaba ahora podrán quedarse en tu blog a navegar sin esperar mucho tiempo en ver el contenido de tu sitio.