Conforme nos vamos familiarizando con el blog vamos adquiriendo soltura y perdemos el miedo que inicialmente teníamos a tocar cualquier cosa que no fuera el editor de entradas. Un día es un detalle en los títulos, al otro un borde en las imágenes, al otro... queremos probar aquello que vemos en tal o cual blog. Existe una curiosidad sana y ansiedad por descubrir que se esconde detrás de ese detalle que nos enamora. Nuestro aliado el código fuente, se une a nosotros intentado darnos el empujón. Las páginas de diseño son mi perdición, es acceder a una y a otra y a otra.... y pasar el tiempo sin apenas darse cuenta, hago mil pruebas en mis sufridos blogs y a veces me he sorprendido sonriendo por la ilusión que produce conseguir algo que ha llamado mi atención. Lo más curioso de todo es que no tengo ni la más remota idea de trabajar con imágenes y por más que me hago el propósito de dedicar un tiempo a aprender ese tiempo no llega nunca. Pero sigo ahí erre que erre con la ilusión intacta y la sensación después de haber perdido un tiempo sin finalidad alguna.
Esto es una muestra de lo que me trae de cabeza ¿quieren perderse entre páginas conmigo? visiten la nube de etiquetas de CSSArtillery
Aunque hace tiempo que publiqué como hacer un menú desplegable para incluir enlaces, se me ha ocurrido gracias a un comentario de Friol que podría hacer esta entrada para explicar un poco como personalizar este tipo de menús.
[1] Menú desplegable sencillo.
Colocamos este código en un gadget HTMLJavascript:
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1"> <option selected/>TITULO <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA <option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA </select>
Y este sería el resultado:
[2] Menú desplegable con opción "Ir".
Colocamos este código en un gadget HTMLJavascript:
<script language="JavaScript"> function Ir_amigos(form) {var myindex=form.dest.selectedIndex window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); } </script> <form name="mis_enlaces"> <select name="dest" class="combobox" SIZE=1> <option class="amarillo" selected value="">BLOGS AMIGOS <option class="rojo" value="URL DE LA PAGINA">LINK1 <option class="azul" value="URL DE LA PAGINA">LINK2 <option class="verde" value="URL DE LA PAGINA">LINK3 </select><input type="button" value="Ir" onClick="Ir_amigos(this.form)"> </form>
Y este sería el resultado:
[3] Menú desplegable con enlaces que abren en "página nueva".
Colocamos este código en un gadget HTMLJavascript:
<script language="JavaScript"> <!-- function sitios_enlaces(form) { var myindex=form.destino.selectedIndex window.open(form.destino.options[myindex].value,"main",""); } //--> </script> <form name="miForma"> <select name="destino" size=1> <option selected value=""> MIS FAVORITOS <option value="URL DE LA PAGINA">LINK1 <option value="URL DE LA PAGINA">LINK2 <option value="URL DE LA PAGINA">LINK3 <option value="URL DE LA PAGINA">LINK4 <option value="URL DE LA PAGINA">LINK5 </select><input type="button" class="boton" value="Ir" onClick="sitios_enlaces(this.form)"> </form>
Y este sería el resultado:
Como veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades. Supongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas "clases" añadidas en cada menú para darles color mediante CSS.
En el primer menú, la clase añadida (class="combobox") controlará tanto la "cajita" como los enlaces una vez desplegados. Si añadimos algo como esto en el CSS de nuestra plantilla (antes de ]]></b:skin>) "ordenamos" al menú que tenga un color de fondo y que su texto sea de color blanco:
En el segundo menú, he mantenido la clase class="combobox" pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:
En el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (class="boton"), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:
En aquella ocasión el gadget funcionaba con una Pipe de Yahoo que yo misma había creado a base de "estudiar" las Pipes que otros habían hecho antes. El mayor inconveniente que ese gadget presentaba, era que el enlace de cada comentarista, llevaba a una página de Google donde se mostraban los comentarios de esa persona en concreto.
En esta ocasión os traigo un gadget que muestra el nombre de los que más comentan en el blog y que he encontrado en Blogger Widgets. La diferencia con el anterior es que el enlace del nombre de cada comentarista lleva directamente a su perfil de Blogger o a su blog en el caso de que haya comentado con su url.
Tenéis que añadir el código en un gadget HTML-Javascript y cambiar donde dice elescaparatederosa por el nombre de vuestro blog. El gadget muestra los 10 comentaristas más activos, si queréis mostrar más o menos, cambiáis donde dice &num=10 por el número que necesitéis. Para que vuestro nombre no aparezca en la lista, lo colocáis (tal como lo usais en el blog) sustituyendo al mio (Rosa) en el código. Si además queréis filtrar el nombre de algún otro comentarista, ponéis sus nombre a continuación del vuestro separados cada uno por una coma.
Hay que tener en cuenta que la carga de las Pipes no es demasiado rápida, por lo que es conveniente ser prudente con el número de comentaristas a mostrar en la lista. Es también recomendable no usar el gadget en la parte superior de la sidebar, ya que si demora en cargar podría interrumpir la carga de esta.
Top comentaristas basado en los últimos 500 comentarios del blog.
<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=10&filter=Rosa" type="text/javascript"></script>
Top comentaristas basado en los últimos 5000 comentarios del blog.
<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Felescaparatederosa.blogspot.com&num=10&filter=Rosa" type="text/javascript"></script>
Sustituir la numeración de la lista por un icono.
Una vez colocado el gadget, su aspecto será como cualquier lista numerada (Imagen 1) pero podemos fácilmente sustituir los números de la lista por un icono (Imagen 2).
[1] Editamos el gadget donde hemos incluido el código para mostrar el Top de comentaristas, colocando todo el código en un <div>, es decir, ponemos <div id="topcoment"> al comienzo del código y </div> al final. Sustituimos en el código las etiquetas <ol> y </ol> por <ul> y </ul> respectivamente y guardamos los cambios en el gadget.
[2] Iremos entonces a "Edición HTML" de nuestro panel y en el CSS de la plantilla (antes de ]]></b:skin>) colocamos este código:
#topcoment li{ padding-left: 30px; background: url(URL_DEL_ICONO) no-repeat top left; }
Para filtrar tu propio usuario cuando lleva alguna letra acentuada, es necesario codificarlo para que lo reconozca, por ejemplo J.Úbeda sería: filter:J. Úbeda
Webwait es una herramienta para saber el tiempo que tarda en cargar completamente nuestra web, no hay que olvidar que el tema de la conexión es importante. Resulta muy útil y puede ser que más de uno pensemos que ya es hora de optimizar nuestro sitio.
Para utilizarla es suficiente con ingresar la url y hacer click en Time it!
Me pregunta TRECARUNGA como se alojan las imágenes en Blogger.
En realidad cada vez que subimos una imagen a una de nuestras entradas, estamos alojando la imagen en Picasa, que es el servicio que Blogger utiliza para alojar las imágenes de nuestros blogs.
En el caso de que queramos alojar una imagen que no vamos a usar en una entrada ( por ejemplo la imagen de fondo de nuestro blog) el sistema sería parecido.
En mi caso tengo todas las imágenes que uso en el blog (header, menu, footer, etc) alojadas en Blogger, y guardadas todas ellas al mismo tiempo en una entrada.
Creamos una entrada a la que llamaremos, por ejemplo, "Imágenes del blog" y subimos la imagen que queremos alojar en Blogger como hacemos habitualmente con cualquier imagen que subimos a una entrada.
Guardamos la entrada como borrador, y una vez guardada hacemos "vista previa" de la entrada y pinchamos en la imagen con el botón derecho - propiedades y copiamos su url. Esa url es la que usaremos para mostrar la imagen en el lugar que necesitemos.
Si estáis usando una plantilla no original de Blogger, probablemente tenga sus imágenes alojadas en algún servicio de alojamiento gratuito y no sería extraño que, debido al uso excesivo de ancho de banda, dejaran de mostrarse durante algún periodo de tiempo o en su lugar se mostrasen mensajes de aviso "no deseables".
Resizeyourimagees una herramienta online que nos ofrece la posibilidad de recortar cualquier área de una imagen. Los formatos de imagen permitidos son jpg, gif, png y tiff ectc... Posee un zoom para aumentar o disminuir la imagen así como la opción de rotar. Con tres pasos es suficiente.
Top comentaristas basado en los últimos 500 comentarios del blog.
