- ▲▼ Cheat Sheet para Blogger
Una “cheat sheet” es una guía de referencia rápida, cuya denominación deriva de los “ayudamemoria” que todos alguna vez usamos en un examen. Habitualmente, vemos cheat sheets de WordPress, CSS, HTML y uno que otro lenguaje de programación. Entonces, ¿por qué no disponer de una para Blogger?
Francisco de Blog and Web creó una espectacular chuleta para Blogger, la única que se ha visto hasta este momento (y en español). De seguro, será muy útil para quienes quieren modificar su plantilla Blogger y no saben cómo, así como también para quienes adaptamos o diseñamos plantillas.
Blogger-Cheat-Sheet
La chuleta está basada en Mínima, y muestra de manera gráfica (y bastante pedagógica) los selectores de clase e ID que son comunes al CSS de la mayoría de las plantillas. Éstos pueden variar un poco en plantillas modificadas o adaptadas a partir de WordPress, pero es una excelente base para identificar y modificar las distintas secciones que componen la estructura de un diseño hecho en Blogger.
Puedes ver y descargar e imprimir la chuleta de Blogger desde Blog and Web. Indudablemente, puedes acompañarla con cheat sheets de CSS para comprender el uso de las propiedades y sacarle aun un mayor provecho.
- ▲▼ Blogger: ¿Dónde alojar archivos javascript?
Una de las mayores deficiencias de Blogger, como comentaba Francisco en BlogandWeb, es en cuanto al alojamiento de archivos. Encontrar un buen hosting para archivos *.js (javascript) es prácticamente indispensable, y no sólo pensando en plugins jQuery o MooTools para adornar un blog con “efectos especiales” en el menú o añadir un carrusel de imágenes, sino en necesidades tan básicas como incorporar excerpts.
Entonces, la pregunta del millón es: ¿Dónde alojar archivos javascript?
Hace un par de meses, Fernando en Quite Random nos mostraba una serie de alternativas para incorporar javascript en la misma plantilla. Cuando es posible, añadir javascript en la misma plantilla es lo más recomendable; sin embargo, cuando los archivos son demasiado grandes, es preferible usar un hosting externo.
¿Qué hosting usar?
Hay una serie de alternativas:
1. HotlinkFiles. Como su nombre lo indica, permite el hotlink de todo tipo de archivos, incluyendo *.js e *.ico.
Características: 1GB de espacio libre, 8 MB de ancho de banda mensual, 50 MB máximo por archivo.
Uso: Para obtener el enlace directo a cada archivo, es necesario subir el archivo, y en la sección “MyFiles” hacer click sobre él con el botón derecho del mouse (Propiedades/Dirección).
2. Lycos Tripod. Un hosting web de la época de los dinosaurios (seguro lo recordarán quienes lo vieron como alternativa a Angelfire o Geocities). Permite incluso hacer experimentos con PHP.
Características: 1GB de espacio libre para todo tipo de archivos, ancho de banda ilimitado. El registro te da un subdominio del tipo “usuarios.lycos.es”, “chica-web.es”, “super-red.es” “miss-web.es” o “mi-website.es”.
Uso: Accediendo a tu cuenta, puedes subir archivos vía FTP en WebFTP/Abrir FTP Web. El enlace directo a tu archivo será: tusubdominio/archivo.extensión. Por ejemplo: http://chicablogger.chica-web.es/easyslider.js.
3. FileAve. Un antiquísimo sitio online desde 2002, que comencé a valorar gracias a la recomendación de Alvaris Falcon.
Características: Subdominio, 30MB para subir archivos de todo tipo. Es necesario entrar cada 30 días para evitar que tu cuenta sea borrada.
Uso: Mediante el registro, puedes subir y ver las direcciones directas de tus archivos desde la sección “Files”.
4. Ripway. 30 MB para subir todo tipo de archivos (incluidos videos, imágenes y archivos PHP), 150 MB de banda ancha mensual. Utiliza el mismo script que Fileave; por lo tanto, puedes ver las URLs de tus archivos en la sección “Files”.
5. Web Hosting gratuitos varios, como 000WebHost. TexMixer hizo un listado de hostings gratuitos sin publicidad en los que perfectamente puedes llegar a instalar WordPress. Hostings como éstos, hay muchos; el problema es muchos de ellos prohiben ser usados sólo como hostings de archivos. En todo caso, siempre es recomendable leer sus políticas, y tener un respaldo de tus archivos.
Alternativas para alojar javascript, hay. Si usas Blogger, es bueno que las tengas a mano, porque nunca sabes cuándo las vas a necesitar.
- ▲▼ Adiós al error bX de Blogger
Quienes usamos Blogger, tenemos que lidiar contra el molesto error del “código raro” de Blogger, que siempre empieza con bX, como por ejemplo, bX-fgmhye. Es realmente odioso, porque aparece al cambiar de plantilla, hacer cambios en la edición de html o los elementos, justo cuando uno menos se lo espera.
Hace más de un año, cuando empecé a usar Blogger, me preguntaba qué estaría haciendo mal, tanto así, que decidí mandar un mail a soporte de Blogger. ¡Y me respondieron! Pero justo en ese momento ya se había solucionado el error por arte de magia, así que la respuesta que obtuve no fue de gran ayuda. De hecho, aquí la tengo:
Mi solicitud de ayuda:
Subject: Error code
Item type: Blog gone
I can’t see my blog. I try to login, but I see this error code:
bX-fgmhye. I was using Adsense when I detected the problem. Please,
help me.
La respuesta:
Hi there,
Thanks for writing in. I checked your blog and the problem seems to be
resolved already. Please let us know if you continue to have any trouble
with it, though.
Sincerely,
Karl
The Blogger Team
El error de Blogger es tan, tan común, que sale más fácil tratar de resolverlo por uno mismo antes que contactarse con soporte. La espera puede ser tediosa, más cuando hay que contactarse en inglés. Aunque suele resolverse solo, y se va así como llega, si no queremos esperar que a nuestro querido blog se le pasen las mañanas, es mejor intentar por otras vías.
Solución 1:
Cambiar de navegador (visto en Blog and web) . Si usas Firefox, cambia a Explorer o Chrome mientras dura el error. Según mi experiencia, casi siempre funciona.
Solución 2:
Se me ocurrió borrar los artilugios que están de sobra (los que dice que están a punto de eliminarse) y que de todas maneras se eliminarían al cambiar de plantilla. Se puede hacer desde la edición de elementos o la de HTML (en el primer caso, hay que resfrescar la página luego). Muchas veces sí funciona, aun cuando no sea la causa principal del problema.
Solución 3:
Eliminar cookies manualmente o con un software como CCleaner. Pasa que el error se produce al cambiar de una cuenta Google a otra (visto en GosuBlogger). Yo he optado por hacerlo manualmente, para no complicarme más la vida, y lo hago así:
1. Con Firefox:
Herramientas /Opciones /Privacidad /Mostrar cookies /Eliminar todas las cookies
o bien Herramientas /Limpiar Datos Privados /Cookies
2. Con Explorer (lo odio, pero lo pongo para quienes lo usan):
Herramientas /Opciones de internet /General /Historial de Exploración /Eliminar
Voilá! Como decía un profesor mío, fácil y bonito.
- ▲▼ Colocar una palabra concreta al lado de la numeración de etiquetas
[1] Añadimos el gadget de etiquetas si no lo hemos hecho antes.
[2] En Edición HTML marcamos la opción de expandir las plantillas de artilugios y localizamos la primera línea del gadget de Etiquetas:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
Algo más abajo y dentro del mismo código del gadget, encontraremos una línea de código como esta:
(<data:label.count/>)
Sustituimos esa línea por este código:
(<b:if cond='data:showFreqNumbers == 0'>
entradas
<b:else/>
<b:if cond='data:label.count == 1'>
1 entrada
<b:else/>
<data:label.count/> entradas
</b:if>
</b:if>)
Por supuesto que la palabra que añadamos puede ser la que mejor se adapte a nuestras necesidades y deberemos colocarla en el código en sustitución de "entradas".
Ha de incluirse tal como en el código, es decir, dos veces en plural y una en singular.
Etiquetas anotadas
Visto en: El Balcón de Jaime
- ▲▼ Valoración de estrellas en el blog por parte del autor
La mayoría de los sistemas de valoración que conocemos son para que los usuarios califiquen una entrada, pero qué pasa si no queremos la calificación de los usuarios sino la propia. Por ejemplo, algunos blogs hacen reseñas de películas, de libros, aplicaciones, etc. y quieren calificar el "producto" del que hablan, pues es ahí cuando podemos usar un sistema de valoración de estrellas como el siguiente, para que el autor le ponga una calificación a su entrada, reseña, película, o lo que quiera calificar.
El resultado será algo como esto:
Calificación:
Este sistema de valoración lo haremos sólo con CSS apoyándonos de sprites, y tiene la característica de mostrar calificaciones fraccionadas, es decir, que podemos darle una o cinco estrellas, o una estrella y media, dos estrellas y media, etc.
Lo primero que haremos es entrar en Plantilla | Edición de HTML y pegar antes de ]]></b:skin> el CSS:
/* Estrellas de valoración
----------------------------------------------- */
.val-fieldset {
width:100px;
border:none;
font-weight:bold;
font-size:12px;
}
.valoracion {
width: 100px;
height: 21px;
display: block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzIHv_LkIf63if56hD1OyGz0-LTsCzFhRxPADTcwoTndaXK0vSFxGESfQZI90cLwYQH3CrtU_xzVWUjfjhn3-CGxImpNB53ZIM-0dY7HRWugDhJc1BDHBORjbhj2uWDQ8KfzgZvqi46Q8/s0/estrellas.png) 0 0 no-repeat;
}
.val-0 {background-position: -100px -0;}
.val-5 {background-position: -81px -21px;}
.val-10 {background-position: -81px 0;}
.val-15 {background-position: -61px -21px;}
.val-20 {background-position: -60px 0;}
.val-25 {background-position: -40px -21px;}
.val-30 {background-position: -40px 0;}
.val-35 {background-position: -21px -21px;}
.val-40 {background-position: -21px 0;}
.val-45 {background-position: 0 -21px;}
.val-50 {background-position: 0 0;}
Y luego en tu entrada donde quieras mostrar la calificación agrega lo siguiente:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-40"></span></fieldset>
Lo que está en rojo es la calificación que le darás, en este caso son 4 estrellas. Los valores son en múltiples de 5 donde 0 es ninguna estrella, 5 media estrella, 10 una estrella, 15 una estrella y media, 20 dos estrellas, etc. hasta el 50, que son cinco estrellas.
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-0"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-5"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-10"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-15"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-20"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-25"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-30"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-35"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-40"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-45"></span></fieldset>
Calificación:
<fieldset class="val-fieldset"><legend>Calificación:</legend><span class="valoracion val-50"></span></fieldset>
Es un método bastante sencillo que le permitirá al autor calificar cualquier cosa. Hemos usado la etiqueta FIELDSET para acomodar el texto "Calificación" y las estrellas, por lo que puedes personalizar esas etiquetas si lo deseas.
- ▲▼ Menú horizontal con subpestañas y buscador integrado 2
Hace algún tiempo vimos el menú horizontal con subpestañas y buscador integrado y desde eso me han preguntado cómo hacer ese mismo menú pero de varios niveles, es decir, que las subpestañas del menú también tengan subpestañas. El menú a continuación tiene esa característica, además de conservar el buscador dentro del menú.
Los estilos redondeados en los submenús se han quitado por cuestiones estéticas, pero ya saben que cualquiera de estas monerías pueden personalizarse a consideración y gusto propio.
El menú puedes verlo en este blog de pruebas.
ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.
Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:
/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmHP2GqQF32y_q-HjGjAPLVuui-TfrLDyygXHDiFNVQGapAiTa2M5o3mb8zsXK9TA-qNKWCiueUVG-FZj4DQy86wLiBL8QhwrLUV4TuJHjij33_n7uK6Ap4cCZlJBWFVCM9aS5RZ2fQ1N/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmHP2GqQF32y_q-HjGjAPLVuui-TfrLDyygXHDiFNVQGapAiTa2M5o3mb8zsXK9TA-qNKWCiueUVG-FZj4DQy86wLiBL8QhwrLUV4TuJHjij33_n7uK6Ap4cCZlJBWFVCM9aS5RZ2fQ1N/) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTAPcACpz1VoalHSY_c-aKip7GD20G-YWj0Exha9PRTC83qZXyVa0bw_tl_5-94D8oqid6vC1m21IEAkW0Z-_QnDNFfSfOmkSXloSAJHhp-yUFZjbxupk3U5wPvrRwSG2sqqVcRsSXjMM/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:
<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</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='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><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>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</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>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>
<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>
</li>
</ul>
</div>
Guarda los cambios y listo. En color verde puedes ver las áreas para cambiar los colores.
Antes de <!-- Buscador --> puedes agregar más pestañas si lo deseas.
Si quisieras añadir otra pestaña simple, agrega una línea como esta:
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>
Si quisieras agregar una pestaña con subpestañas entonces agrega este código:
<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>
Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:
<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>
Con esta variación del menú podemos agrupar más enlaces y categorías en poco espacio, y que además, al conservar el buscador dentro del menú hace que sea un menú práctico, compacto y útil.
- ▲▼ Corazones que suben por el blog
Cupido ya está a la vuelta de la esquina y ahora no es el amor el que está en el aire sino los corazones, muchos corazones.
Giffy.me nos ofrece estos dos scripts que harán que tu blog se inhunde de romanticismo al mostrar muchos corazones subiendo como globos por el blog. Son dos diseños, el primero son corazones color rosa de un tamaño mediano, el segundo son corazones pequeños en color rojo; en ambos casos los corazones subirán por la página moviéndose de un lado al otro.
Para poner estos corazones en tu blog sólo entra en Plantilla | Edición de HTML y antes de </body> agrega el código de los corazones que más te gusten.
<!-- Corazones en el blog -->
<div style="display:none;">
<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/0/7/29/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0133/parts.gif" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/">無料でタイピング練習☆</a></p>
</div>
<!-- Fin de Corazones en el blog -->
<!-- Corazones en el blog -->
<div style="display:none;">
<script type="text/javascript" src="http://blogparts.giffy.me/0082/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0082/parts.gif"/></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;">[PR] <a href="http://typing.twi1.me/">求む！タイピング初心者</a></p>
</div>
<!-- Fin de Corazones en el blog -->
El único punto en contra que suelen tener estas decoraciones es que no tienen opciones de configuración, pero tomando en cuenta que regularmente los usamos sólo en días festivos (como ahora que se acerca el día de San Valentín) pues no hay mucho inconveniente.
- ▲▼ Fanbox para Facebook, Twitter, y Google Plus, flotantes y con efecto deslizante
AVISO
La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.
Hace algún tiempo vimos cómo poner el fanbox de Facebook flotante y con efecto deslizante. En esa ocasión usamos un plugin de jQuery que aunque es bueno tiene la desventaja que la versión gratuita sólo permite poner una pestaña nada más, además que quienes usan otras librerías tenían problemas de compatibilidad.
En esta ocasión lo haremos sólo con CSS, de manera que no utilizaremos ni un solo sript y podremos mostrar no sólo una sino tres pestañas, el fanbox de Facebok, el fanbox de Google+, y el fanbox de Twitter.
Puedes ver un ejemplo en esta misma entrada, lo verás del lado derecho de la ventana.
Bien, para poner estos fanbox flotantes en el blog sólo tenemos que ir a Diseño | Añadir un gadget | HTML/Javascript y ahí pegar el siguiente código:
<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>
<!-- Primera pestaña -->
<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBqAoIY1EDitC2FqIdXtQqnvu6pA4aXymO9z6i7aVjburv2R_KwCh6K1DiLpIKz6QuRcaZYtPFsY2DndBS9T0dxGHeO4hY7XxRCwv9uCQbsXnw0VshKzENEnioj7GSfMVDKISlBKLqq-g/' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>
<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwFP8u0xuQlsduHspGQMglFO11YRfBwipyEcicXGwuSrJ1pRJFarK-6q4wDLF8BkDIy52Ilznv_dcXh7L2IMfsZkPW2NKVkszMDVpW7v_haZH2yYuDpR8uGQVO6GWXmCZrU77jN-p57E/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div></span></div></div>
<!-- Tercera pestaña -->
<div id='flotante3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PcM9v1E7FdSj_E46a4eeVBoPgDggFrcwWfGlpjef_lxQ0H3DfdnEUFiGLr2mJsp9J3F0inYOzNI2jy-sSIVMYalNMVC80955C-SPzyz7B82AIZCNFGsGamq01UQ4vJA-IDZ9kfyZQZ0/' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style>
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNN7u3Dn5AVnFKzoXc7366u71DMdQrqX31JWcArsUVHZ50u-_Mu1UAW3ddWnYZ_RwMahDmggE9o_KSgRexSoD0_xEQL0T2n2g8xNMNtPYAE8yrlBL1olGTG0r-EAaeIRFf7_0iFjOkRI/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>
<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuarioTwitter',
'height':'300',
'width':'260',
'theme':'custom',
'border_color':'#ffffff',
'bg_color':'#ffffff',
'bg_image':'',
'title_color':'#3B5998',
'total_count_color':'#333333',
'follower_name_color':'#BDBDBB'
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>
</div></span></div></div>
Agrega donde se indica el nombre de tu página de Facebook, también pon la ID de tu página de Google Plus en donde están las equis en rojo, y el nombre de tu usuario de Twitter también donde se indica en color rojo.
El ID de tu página de Google Plus lo puedes ver ingresando a tu página, y al final de la URL aparecerán una serie de letras y números, ese es tu ID.
En el caso del fanbox de Twitter hemos usado el fanbox para Twitter que vimos recientemente, pero puedes usar otro, o bien, quitar la pestaña, o sustituirla por otro contenido, pues al menos ese fanbox sí usa jQuery y puede causar incompatibilidad con otros scripts.
En caso de que quieras cambiar alguna pestaña por otro tipo de contenido tendrás que localizar la URL de la imagen de la pestaña (color azul) y sustituirla por la que diseñes, luego quitar el contenido de la pestaña (según sea el caso) y en su lugar poner el código que desees.
La ventaja de este método es que no usamos scripts para las pestañas, ni para esconderlas, ni para mostrarlas, ni para el efecto deslizante. La contra es que el efecto deslizante son transiciones con CSS por lo que los navegadores que no son modernos no podrán ver el efecto de deslizamiento. Fuera de esto último es un método que además de ser fácil de aplicar también es una buena opción para tener tus distintos fanbox agrupados y mostrándolos de una forma elegante y original.
ACTUALIZACIÓN 1:
Si el fanbox de Facebook te marca error puede ser porque aún no tienes una URL personalizada en tu página de Facebook, en esos casos deberás cambiar esta parte:
http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook
Por esta:
http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX
Ahí además de poner el nombre de tu página donde se indica deberás poner en las equis una serie de números que aparecen al final de la URL de tu página de Facebook.
ACTUALIZACIÓN 2:
Es preciso mencionar nuevamente que el fanbox de Twitter sí usa jQuery por lo que si ya tienes alguna versión de jQuery o si usas otra librería de scripts como Scriptaculous entonces no se verá, en esos casos habrá que eliminar la versión de jQuery que incluye el gadget y/o hacer unos cambios para que sea compatible con Scriptaculous. Para más información mira la entrada sobre el fanbox de Twitter.
- ▲▼ Tablas en HTML
Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.
En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.
Simple tables
Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no alrevés). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo:
Código
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
Vista
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
Nota: los bordes en este ejemplo fueron establecidos mediante el uso de CSS para mejorar la visualización. Te recomiendo evitar el uso de atributos presentacionales como "border" ya que son candidatos a ser desaprobados en el futuro.
Además, nota que, las celdas vacías deben ser declaradas utilizando sus respectivos tags para lograr una correctitud en el código. cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco ( ) como su contenido. Esto hará que tu página sea más compatible ya que algunos navegadores tienen problemas representando celdas vacías.
Unificación de celdas
Para algunas tablas puedes necesitar unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos "rowspan" (para unificación vertical) y "colspan" (para unificación horizontal), ambos disponibles para celdas (tag HTML td y tag HTML th).
Código
<table>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
Vista
Campo 1 Campo 2 Campo 3
Campos 4 y 5 Campo 6
Campo 7 Campo 8 Campo 9
Mira en el ejemplo anterior cómo una definición de celda que unifica a dos, es el equivalente a dos definiciones de celdas simples. Esto también funciona para uificación vertical, con una pequeña diferencia debido a la naturaleza de las tables en HTML. Cuando se unifican celdas verticalmente, las definiciones de celdas en las filas afectadas por la unificación deben ser omitidas. Mira el ejemplo, donde los campos 1, 4 y 7 son unificados:
Código
<table>
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
Vista
Campo unificado
Campo 2 Campo 3
Campo 5 Campo 6
Campo 8 Campo 9
Debes tener cuidado al unificar filas y columnas de no encimar las celdas unificadas. Esto podría tener resultados inesperados.
- ▲▼ BLOGGER: CAMBIAR EL RÓTULO 'MOSTRANDO ENTRADAS CON LA ETIQUETA
En Blogger, cuando se accede a la página de cualquier etiqueta, nos sale en la parte superior un rótulo dentro de un recuadro gris, que nos indica que estamos viendo las entradas filtradas por esa etiqueta y adicionalmente un enlace para volver a la página de Inicio del blog (Mostrar todas las entradas).
Anteriormente vimos otro sistema que consistía en eliminar del todo el widget que genera este mensaje (status-message) y generar uno nuevo con nuestro propio código (Ver: Cabecera para páginas de etiquetas. Secciones del blog). pero lo de hoy será más sencillo porque iremos directamente al código del artilugio para cambiar allí sólo la parte que nos interesa.
Advierto que quizás no sea perfecto y que en algunas combinaciones de búsquedas + etiquetas + contenido nulo, el mensaje podría no quedar muy ajustado, pero la sencillez del cambio creo que compensa esos problemas menores... si se dieran.
La parte que nos interesa está en un includable que tiene id='status-message', por lo que editando nuestra plantilla HTML, pinchando en cualquier parte de la ventana o recuadro que contiene el código y pulsando CTRL+F, nos será fácil encontrarlo con el buscador interno de código y precisamente esa palabra clave: status-message. Luego sólo es cuestión de pinchar en la flecha a la izquierda si no aparece desplegado.
Nota: No uséis el buscador del navegador que es una de las cosas que he detectado que más problemas os genera.
En la mayoría de plantillas, será la tercera coincidencia encontrada y es inconfundible porque empieza por <b:includable id='status-message'> y no lleva barra de cierre al final (/). Este sería el artilugio original completo (para localizarlo bien y por si queréis revertir los cambios algún día):
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
Lo que hay que cambiar es justo lo que he marcado en verde y lo que ahí escribamos será lo que saldrá dentro del recuadro gris. Podría ser un simple texto como "Mostrando entradas filtradas", pero también podemos usar algunos truquillos para que se vean datos adicionales.
Por ejemplo, la magia la hace en el siguiente caso las dos data que veis, que son respectivamente para mostrar la etiqueta seleccionada o la palabra insertada en un buscador interno básico.
Poniendo las dos, si una no existe porque estamos en página de etiquetas y no de búsqueda o viceversa, simplemente se mostrará una sí y la otra no. Adicionalmente he puesto un enlace para mostrar todas las entradas (con destino la página inicial) a similitud de lo que hace el artilugio original.
El resultado sería algo así como así como "Mostrando las recetas de pasta. Mostrar todas las entradas.".
Mostrando las recetas de <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas.</a>
Otra cosa útil sería ver el número de entradas como resultado del filtrado ("Viendo 5 artículos sobre libros"), para lo cual echamos mano de data:numPosts:
Viendo <data:numPosts/> artículos sobre <b><data:blog.searchQuery/><data:blog.searchLabel/></b>
Y ahora que conocemos esa variable que nos muestra el número de entradas ¿por qué no mostrar un rótulo distinto cuando se acaban? En este caso se vería el rótulo estándar y cuando avanzamos por recientes/antiguas, al llegar al final nos enseñaría un mensaje de que no hay más artículos para ver.
<b:if cond='data:numPosts == 0'>
No hay más artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>.
<b:else/>
Mostrando los artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas</a>.
</b:if>
Por último, todo lo visto junto: condición para cuando no hay entradas y número de entradas junto con el nombre de la etiqueta o la palabra tecleada en el buscador, más un enlace al inicio:
<b:if cond='data:numPosts == 0'>
No hay más artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>.
<b:else/>
Mostrando <data:numPosts/> artículos sobre <b><data:blog.searchLabel/><data:blog.searchQuery/></b>. <a expr:href='data:blog.homepageUrl'>Mostrar todas las entradas.</a>
</b:if>
Como es costumbre, en estos enlaces podéis ver la cosa funcionando: 1 y 2.
Creo que con esto quedará bastante completito, pero es que tampoco se me ocurría ninguna variante más ;)
 |
&  |
&  |
1 comentarios:
gracias
Publicar un comentario