tag:blogger.com,1999:blog-74701929618069636012024-03-18T11:10:47.091+01:00OlobloggerBlogger para torpes y para no tanto
Aprendiendo contigoOlomanhttp://www.blogger.com/profile/11489455592466904176noreply@blogger.comBlogger853125tag:blogger.com,1999:blog-7470192961806963601.post-80422418127594727892017-05-15T17:30:00.000+02:002017-05-15T17:30:04.774+02:00Visualizar imágenes y vídeos en los comentarios de BloggerEste es un breve código JavaScript que convierte cualquier URL correspondiente a una imagen, en el HTML necesario para que dicha imagen se visualice en web y concretamente dentro de un comentario. <br />
<br />
Lo mismo hace si esa dirección está dentro de un enlace (<span class="html"><a href...</span>) o si se trata de un vídeo de YouTube o de Vimeo pero, claro está, en este último caso mostrando un vídeo.<br />
<br />
En resumen: si alguien pone dentro de un comentario de tu blog, un enlace a una imagen o vídeo, o simplemente su dirección, <b>este código hará que esa imagen o vídeo se vean dentro de dicho comentario</b>. <br />
<br />
Es lo que puedes ver funcionando actualmente en <a href="http://www.musicaememorandum.com/2017/04/downtown-petula-clark.html?showComment=1493233203644#c3314835509161300">este blog</a> y también en <a href="https://codepen.io/oloman/pen/dWNpvZ">este Codepen</a>.<br />
<a name='more'></a><br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1OALqQhoRPqLF6Za5M2B9kq8ToBILHj9mEEfeQ7m7fZXOFBhNo1vpxhu9T4ZOhehA6fAzL-W-26m0yRANuAFemnoKrlQl2h8nl3slONhY2rkEBMB6FIKJafJ7pmhKyMFlKgRbFxUpFU/s1600/imagenes+y+videos+en+comentarios+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1OALqQhoRPqLF6Za5M2B9kq8ToBILHj9mEEfeQ7m7fZXOFBhNo1vpxhu9T4ZOhehA6fAzL-W-26m0yRANuAFemnoKrlQl2h8nl3slONhY2rkEBMB6FIKJafJ7pmhKyMFlKgRbFxUpFU/s1600/imagenes+y+videos+en+comentarios+blogger.jpg" /></a></div><br />
<br />
No hace falta jQuery ni ninguna otra cosa adicional. Sólo tenéis que localizar el <span class="html"></body></span> de vuestra plantilla y justo antes pegar lo siguiente:<br />
<br />
<div class="vercodigo"><script>//<![CDATA[<br />
!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment-content"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;display: blocK;margin: 10px auto;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();<br />
//]]></script></div><br />
<hr /><br />
Para los que hablen JavaScript y siguiendo el código y los comentarios del <a href="https://codepen.io/oloman/pen/dWNpvZ">Codepen</a> antes citado que tiene un código menos compacto (más legible), el algoritmo que usé fue:<br />
<br />
<ul><li>Definir unas expresiones regulares <span class="html">regimg</span>, <span class="html">regyt</span> y <span class="html">regvim</span> para localizar las URL de imágenes, vídeos YouTube y vídeos Vimeo, respectivamente</li>
<li>Pasar a un objeto todos los elementos dentro de <span class="css">comment-content</span>, que es el selector que engloba a todos los comentarios.</li>
<li>Obtener todos los enlaces de ese objeto para comprobar si corresponden a alguno de los tres elementos que buscamos (imágenes, YouTube o Vimeo), en cuyo caso eliminamos el enlace y dejamos sólo la URL. Esto lo hacemos para que en el siguiente paso la sustitución sea limpia y sin interferencias por doble URL (la del <span class="html">href</span> y la del <span class="html">img</span>).</li>
<li>En los tres últimos pasos sustituimos, según el caso, cada URL por el código HTML necesario para que se vea una imagen o un vídeo</li>
</ul><br />
<br />
Explico esto porque de forma similar podréis incluir otros servicios distintos de YouTube y Vimeo, simplemente añadiendo por cada uno una expresión regular, una condición y una rutina de sustitución (<span class="html">replace</span>).<br />
<br />
Cambiando algo las expresiones regulares incluso podríais crear vuestro propio código <a href="https://es.wikipedia.org/wiki/BBCode">BBCode</a>, aunque los más avezados ya habrán visto ese <span class="html">[img]</span> por ahí ¿verdad? <div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com41tag:blogger.com,1999:blog-7470192961806963601.post-37633100365708911182017-02-07T16:00:00.000+01:002017-02-11T20:55:21.190+01:00Gadget de entradas por autores para BloggerAndaba el otro día por el foro de ayuda de Blogger y alguien preguntó por un gadget de autores similar a otro que existía para WP. La verdad es que no llegué a ver ese gadget pero por las explicaciones me hice una idea y pensé que podría ser útil para blogs con varios autores.<br />
<br />
Como creo que no lo he hecho nunca aclaro antes de seguir que todo lo que se puede hacer en una plataforma se puede hacer en la otra... siempre que se cuenten con los mismos recursos. Esto quiere decir simplemente que si algo por ejemplo requiere PHP y para ello un hosting que lo soporte, pues que para ambos sitios necesitaré ese soporte. Lo que no podemos hacer -salvo que seamos santos- son milagros, pero con los mismos recursos se puede hacer lo mismo y la plataforma pasa a ser prácticamente indiferente.<br />
<br />
Dicho esto mi visión de este tipo de gadget en el que saldrán todos los autores que hayan publicado recientemente (últimas 150 entradas como máximo) es como el de la siguiente captura. En ella se aprecia que se verán los avatares de cada uno de ellos y debajo las últimas X entradas que ese autor haya creado. Pinchando en el avatar de cada uno el contenido irá cambiando para mostrar lo de cada cual.<a name='more'></a><br />
<br />
El formato lo he adaptado para incluirlo en una barra lateral.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8_TwkWP7qv9n-VfNfXPNimyXkobyVyisa3krzG3hNBXcmgcU4u8zIcu1IazGzypL4w2ZGAcGB6uinxK4_E8uvFKweQeY3DIb4-YBgFt2IOtUqX-TIV2tcfBD5PIyK8I-Tmc4BSpGPvc/s1600/entradas+autor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Gadget autores para Blogger" border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8_TwkWP7qv9n-VfNfXPNimyXkobyVyisa3krzG3hNBXcmgcU4u8zIcu1IazGzypL4w2ZGAcGB6uinxK4_E8uvFKweQeY3DIb4-YBgFt2IOtUqX-TIV2tcfBD5PIyK8I-Tmc4BSpGPvc/s640/entradas+autor.jpg" title="Gadget autores para Blogger" width="640" /></a></div><br />
Esta vez por premura de tiempo sólo voy a proponer un corta-pega para un gadget tipo <span class="argot">HTML/JavaScript</span>, pero al final de esta entrada pondré una demo y aquí tenéis un acceso al <a href="http://codepen.io/oloman/pen/RKJrKJ">código montado en Codepen</a>. Si accedéis en modo edición podréis experimentar con el código para entender mejor su funcionamiento o incluso montar alguna variación. Lo que hace básicamente es leer el feed, guardar los datos necesarios, ordenarlos por autor y luego mostrar unas cuantas entradas de cada uno.<br />
<br />
Lo que hay que cambiar para personalizar algunas cosas está marcado en otro color, aunque más adelante también lo detallo.<br />
<br />
<div class="vercodigo"><div id="obautores"></div><br />
<span class="cambiar"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></span><br />
<script>//<![CDATA[<br />
// Parámetros configurables<br />
var url = '<span class="cambiar">http://www.musicaememorandum.com</span>';<br />
var totalposts = <span class="cambiar">30</span>; // Número de entradas a leer (Máximo 150)<br />
var maxposts = <span class="cambiar">5</span>; // Máximo de entradas a mostrar por autor<br />
var comenzarpor = <span class="cambiar">190</span>; // 1 para empezar por el post más moderno<br />
var granavatar = <span class="cambiar">false</span>; // True/False para ver o no avatar grande<br />
// No necesitas cambiar nada a partir de aquí<br />
$(document).ready(function(){var a=$("#obautores");$(a).prepend('<div class="bloading"/>');var b=new Array;$.getJSON(url+"/feeds/posts/default?orderby=published&start-index="+comenzarpor+"&max-results="+totalposts+"&alt=json&callback=?").done(function(c){c.feed.entry.length;$.each(c.feed.entry||[],function(a,c){c.author[0].name.$t&&(b[a]=new Array,b[a][0]=(c.author[0].name.$t||"").replace(/\"/g,"´"),b[a][1]=new Date(c.published.$t||Date.now()),b[a][2]=c.title.$t||"",b[a][3]=(c.link||[]).slice(-1)[0].href,b[a][5]=c.author[0].gd$image.src||"")}),b.sort(function(a,b){return a[0]>b[0]?1:a[0]<b[0]?-1:a[1]<b[1]?1:a[1]>b[1]?-1:0}),$(".bloading").remove(),$(a).append('<ul class="obautor"></ul>'),$(a).append('<div class="obautortab"></div>');for(var f=0;f<b.length;f++){var g=b[f][0],h=g.replace(/\s/g,"");if(0==f||g!=b[f-1][0]){var i=1,j='<img title="'+g+'" alt="'+g+'" src="'+b[f][5]+'"/>';$(".obautor").append('<li><a href="#'+h+'">'+j+g+"</a></li>"),$(".obautortab").append('<div id="'+h+'"><h4>'+g+'</h4><ul><li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li></ul></div>"),granavatar?$(j).insertAfter("#"+h+" h4"):$("#"+h+" h4").prepend(j)}else i<maxposts&&(i++,$("#"+h+" ul").append('<li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li>"))}$(".obautortab div").hide(),$("ul.obautor li:first").addClass("activa").show(),$(".obautortab div:first").show(),$(".obautor li").click(function(){$("ul.obautor li").removeClass("activa"),$(this).addClass("activa"),$(".obautortab div").hide();var a=$(this).find("a").attr("href");return $(a).fadeIn(),!1})}).fail(function(){a.append("Errror")})});<br />
//]]></script><br />
<style>#obautores {max-width: 300px;font-family:arial;margin:0 auto;padding: 10px 0 0 0;box-sizing:border-box;}<br />
#obautores img {padding:0;margin:0;border:0;}<br />
ul.obautor{width:100%;margin:0 auto;padding:0 0 10px 0;list-style:none;font-size:0;line-height:0;text-align:center;}<br />
.obautor li{display:inline-block;vertical-align: middle;width: 33.33%;height:0;padding-bottom: 33.33%;overflow:hidden;position:relative;box-sizing:border-box;}<br />
.obautor li a{display: inline-block;vertical-align: middle;overflow: hidden;position: relative;width:100%;height:0;padding-bottom: calc(100% - 10px);border:5px solid #fff;box-sizing:border-box;border-radius: 50%;}<br />
.obautor img {position:absolute;top:0;left:0;max-width:100% !important;min-height:100%;}<br />
.obautor li.activa a {border-color:#333;}<br />
.obautor li:hover a{border-color:#999;}<br />
.obautortab {text-align:center;width:100%;display: block;font-size:16px;box-sizing:border-box;}<br />
.obautortab img {width: 100%;}<br />
.obautortab h4 {margin:0; border:1px solid #333;background: #ccc;text-align:center;font-size: 18px;line-height:38px;}<br />
.obautortab h4 img {float:left;width:38px;height:38px;border-right:1px solid #333;}<br />
.obautortab ul {padding:0;margin:0;list-style:none;}<br />
.obautortab li {background:#ccc;padding:10px;text-indent:0;}<br />
.obautortab li:nth-child(odd) {background:none;}<br />
.obautortab a {display:block;text-decoration:none;color: #000;text-align:left;}<br />
.obautortab a:hover {text-decoration:underline;}</style></div><br />
En primer lugar marqué la carga de la librería jQuery, pues si ya la tenemos cargada para otros gadgets o plugins es innecesario cargarla de nuevo. En el caso de que ya la tuvierais, toda esa línea se puede suprimir.<br />
<br />
Luego vienen 5 parámetros que son los únicos que en principio tendremos que cambiar para que el gadget esté personalizado a nuestro gusto:<br />
<br />
<ul><li><b>url</b>: Aquí hay que poner la dirección del blog del que se pretenden obtener los autores (sin barra al final)</li>
<li><b>maxposts</b>: El número de posts que como máximo vamos a mostrar para cada autor y así evitar hacer un gadget interminable</li>
<li><b>totalposts</b>: Vamos a leer un feed y como eso es lento, aquí iría una cifra con el número total de entradas a leer</li>
<li><b>comenzarpor</b>: <i>start-index</i>, o el número del post desde el que empezaremos a leer el feed. 1 para comenzar por el más reciente; 10 para saltarnos los 8 más recientes; etc.</li>
<li><b>granavatar</b>: Con <i>true</i> bajo el nombre del autor saldrá su avatar en tamaño muy grande. Con <i>false</i> saldrá más pequeño y a la izquierda del nombre.</li>
</ul><br />
Y por fin la demo. Pinchad en cada avatar para observar los cambios:<br />
<br />
<div id="obautores"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><br />
<script>//<![CDATA[
// Parámetros configurables
var url = 'http://www.musicaememorandum.com';
var totalposts = 30; // Número de entradas a leer (Máximo 150)
var maxposts = 5; // Máximo de entradas a mostrar por autor
var comenzarpor = 190; // 1 para empezar por el post más moderno
var granavatar = false; // True/False para ver o no avatar grande
// No necesitas cambiar nada a partir de aquí
$(document).ready(function(){var a=$("#obautores");$(a).prepend('<div class="bloading"/>');var b=new Array;$.getJSON(url+"/feeds/posts/default?orderby=published&start-index="+comenzarpor+"&max-results="+totalposts+"&alt=json&callback=?").done(function(c){c.feed.entry.length;$.each(c.feed.entry||[],function(a,c){c.author[0].name.$t&&(b[a]=new Array,b[a][0]=(c.author[0].name.$t||"").replace(/\"/g,"´"),b[a][1]=new Date(c.published.$t||Date.now()),b[a][2]=c.title.$t||"",b[a][3]=(c.link||[]).slice(-1)[0].href,b[a][5]=c.author[0].gd$image.src||"")}),b.sort(function(a,b){return a[0]>b[0]?1:a[0]<b[0]?-1:a[1]<b[1]?1:a[1]>b[1]?-1:0}),$(".bloading").remove(),$(a).append('<ul class="obautor"></ul>'),$(a).append('<div class="obautortab"></div>');for(var f=0;f<b.length;f++){var g=b[f][0],h=g.replace(/\s/g,"");if(0==f||g!=b[f-1][0]){var i=1,j='<img title="'+g+'" alt="'+g+'" src="'+b[f][5]+'"/>';$(".obautor").append('<li><a href="#'+h+'">'+j+g+"</a></li>"),$(".obautortab").append('<div id="'+h+'"><h4>'+g+'</h4><ul><li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li></ul></div>"),granavatar?$(j).insertAfter("#"+h+" h4"):$("#"+h+" h4").prepend(j)}else i<maxposts&&(i++,$("#"+h+" ul").append('<li><a href="'+b[f][3]+'">'+b[f][2]+"</a></li>"))}$(".obautortab div").hide(),$("ul.obautor li:first").addClass("activa").show(),$(".obautortab div:first").show(),$(".obautor li").click(function(){$("ul.obautor li").removeClass("activa"),$(this).addClass("activa"),$(".obautortab div").hide();var a=$(this).find("a").attr("href");return $(a).fadeIn(),!1})}).fail(function(){a.append("Errror")})});//]]></script><br />
<style>#obautores {max-width: 300px;font-family:arial;margin:0 auto;padding: 10px 0 0 0;box-sizing:border-box;}
#obautores img {padding:0;margin:0;border:0;max-width:100% !important;}
ul.obautor{width:100%;margin:0 auto;padding:0 0 10px 0;list-style:none;font-size:0;line-height:0;text-align:center;}
.obautor li{display:inline-block;vertical-align: middle;width: 33.33%;height:0;padding-bottom: 33.33%;overflow:hidden;position:relative;box-sizing:border-box;}
.obautor li a{display: inline-block;vertical-align: middle;overflow: hidden;position: relative;width:100%;height:0;padding-bottom: calc(100% - 10px);border:5px solid #fff;box-sizing:border-box;border-radius: 50%;}
.obautor img {position:absolute;top:0;left:0;max-width:100% !important;min-height:100%;}
.obautor li.activa a {border-color:#333;}
.obautor li:hover a{border-color:#999;}
.obautortab {text-align:center;width:100%;display: block;font-size:16px;box-sizing:border-box;}
.obautortab img {width: 100% !important;}
.obautortab h4 {margin:0; border:1px solid #333;background: #ccc;text-align:center;font-size: 18px;line-height:38px;}
.obautortab h4 img {float:left;width:38px;height:38px;border-right:1px solid #333;}
.obautortab ul {padding:0;margin:0;list-style:none;}
.obautortab li {background:#ccc;padding:10px;text-indent:0;}
.obautortab li:nth-child(odd) {background:none;}
.obautortab a {display:block;text-decoration:none;color: #000;text-align:left;}
.obautortab a:hover {text-decoration:underline;}</style><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com17tag:blogger.com,1999:blog-7470192961806963601.post-32617509058993748052017-01-30T17:00:00.000+01:002017-01-30T17:00:31.429+01:00Una década aprendiendo. Una década juntos.Cuando <a href="http://www.oloblogger.com/2012/01/un-lustro-eso-es-mucho-o-es-poco-para.html">este sitio cumplió un lustro</a> me dió por argumentar a favor de la continuidad natural de los blogs y aquello no fue mas que una reacción en aquel preciso momento contra una importante corriente que afirmaba su pronta desaparición; una que decía que <b>los blogs estaban ya dando sus últimos coletazos</b>.<br />
<br />
De eso hace ya cinco años que a la velocidad con la que se mueven las cosas en Internet es como media vida, pero a pesar de que los blogs siguen existiendo y siguen renovándose, todavía hay quién sigue afirmando que les queda poco.<br />
<br />
Se equivocaron entonces y se siguen equivocando ahora, pero lo cierto es que si siguen con ese mismo discurso, una vez y otra, un año y otro, tarde o temprano acertarán por la natural evolución de todas las cosas. Algún listillo afirmará en ese momento "Ya lo predije...", pero en muchos sitios y aquí mismo estarán escritas otras cosas que podrán corroborar que <b>jugar a adivino-gurú </b>con la misma predicción todos los años, esperando que alguna vez se haga realidad, <b>es muy sencillo</b>. Sólo es cuestión de método e insistencia.<a name='more'></a><br />
<br />
<br />
Y si alguien vió un cinco y luego otro y los ha sumado, pues además de observador está en el camino correcto para saber de qué va realmente el post <i>off topic</i> de hoy: de dejar constancia que <b>Oloblogger ya pasó de los 10 años de existencia</b>. Ni más ni menos<br />
<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJD0gi0drR3n02rfAvYK0W85J9n2uX8r8VHjQ6kwoZA-EZO6jIDgZajJyd6Ydln0m7Iiuhfa0IRTJO-KR6RZrxviIECEmlPJwz_S9uyOn7-Y0JzM0XlRTsIrzIm2Qql63LXvQNjAWoLjg/s1600/oloblogger.jpg" imageanchor="1"><img border="0" height="500" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJD0gi0drR3n02rfAvYK0W85J9n2uX8r8VHjQ6kwoZA-EZO6jIDgZajJyd6Ydln0m7Iiuhfa0IRTJO-KR6RZrxviIECEmlPJwz_S9uyOn7-Y0JzM0XlRTsIrzIm2Qql63LXvQNjAWoLjg/s640/oloblogger.jpg" width="640" /></a></div><div style="font-size: 12.8px; text-align: center;">De programación he aprendido algo pero como podéis comprobar arriba, de diseño gráfico sigo igual de pez</div><br />
<br />
<br />
Bodas de estaño o de aluminio le llaman a esta cifra y eso me trae a la cabeza que sólo una vez más aparte del mencionado lustro celebré algún aniversario. Fue allá por las <a href="http://www.oloblogger.com/2015/02/oloblogger-bodas-bronce.html">bodas de bronce</a> y con ellas afloraron <b>algunos recuerdos en forma de personas y sitios</b> que de una manera u otra habían tenido que ver conmigo por estas tierras digitales. Pero había y hay muchos más. Por cierto, que si lo de "bodas" os parece excesivo, preguntadle a mi parienta si estoy o no casado con el blog. No se me ocurre una mejor expresión 😉<br />
<br />
<br />
¿Y qué voy a hacer de especial en esta tan especial fecha? Pues lo mismo que he hecho siempre: <b>nada</b><br />
<br />
A ver... no es que no haya hecho nada de nada, porque los <b>más de 800 artículos</b> publicados no se experimentan, prueban, redactan e ilustran solos... no. Lo que quiero decir es que no hago nada especial. Me gusta aclararlo porque algunos ven en mí un mérito especial que realmente me agrada conocer, pero que nunca pienso que realmente tenga.<br />
<br />
Escribo en el lugar que quiero, sin que nadie me diga qué, cómo o cuándo. Los temas son los que yo decido y la fecha pues ya veis, lo mismo tres artículos en una semana que tardo dos meses en escribir el siguiente. Tan poco llevo el control de nada que he tenido que corregir la cantidad de posts publicados que puse antes porque pensaba que no había llegado ni a 500 y ahora vi que eran bastantes más.<br />
<br />
<br />
10 años. Mucho tiempo sin duda. Tanto que hasta <a href="http://dle.rae.es/?id=5hLUKlO">la RAE ha añadido el término a su diccionario</a> y ya hay un Día internacional del blog, el 31 de agosto. Mucho tiempo que a mi me pasa rápido porque lo ocupo en algo que me gusta y mientras sea así, la regularidad podrá ser más o menos estable, <b>los comentarios serán contestados con más o menos retraso</b>, pero seguiréis viéndome por aquí.<br />
<br />
Mi excusa para las demoras es que en este tiempo <b>me he metido en nuevos líos</b>. Entre los que me ocupan más tiempo el lío de ser <a href="https://topcontributor.withgoogle.com/profile/manolo-sanchez-011e5f">colaborador</a> en el <a href="https://productforums.google.com/forum/#!profile/blogger-es/APn2wQcKzYJ4tJUakgg-V6-sXARnOfV4QanQmeZlapknmuM51KlMyBmC24Kprnzcjejl6aLnFitq">foro de Blogger</a> y el lío de abrir <a href="http://www.musicaememorandum.com/">otro blog</a> junto con un par de amigos. Casualmente este también anda en estas fechas de aniversario, pero allí son sólo 4 añitos.<br />
<br />
<blockquote>He visto cosas que vosotros no creeríais. Naves de combate en llamas más allá de Orión. He visto Rayos-C brillar en la oscuridad cerca de la puerta de Tannhäuser. Todos esos momentos se perderán en el tiempo... como lágrimas en la lluvia. Es hora de morir.</blockquote><br />
Pues no, en este tiempo no he visto lo de Orión ni lo de Tannhäuser como aquel replicante de Blade Runner. Tampoco mis momentos se perderán porque precisamente están grabados en un blog y por supuesto tampoco es hora de morir. Pero pardiez que he visto cosas en Internet en todo este tiempo. Hasta he visto <b>algún blog en WP casi mejor que los de Blogger</b> 😆😆<br />
<br />
Porque cuanto más tiempo pasa más <i>BloggerFan</i> me siento y más convencido estoy de que es <b>la mejor plataforma para crear un blog</b>. Si queréis hacer otra cosa que no sea un blog ahí ya podemos <b>discutir, pero no descartar</b>.<br />
<br />
<br />
Y bueno, tengo muchas ideas más a medias y ando un día pensando en un proyecto y al siguiente en otro distinto, pero como supongo que nos pasa a la mayoría, al final hago realidad muy pocos de ellos. Sin embargo este sí. <b>Este si es un proyecto realizado y completo.</b> Realizado porque se terminó de fraguar y completo gracias a todos vosotros que me hacéis saber que sigue vivo con vuestras continuas participaciones.<br />
<b><br />
</b> <b>Gracias por estar ahí... al otro lado.</b><br />
<br />
<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com50tag:blogger.com,1999:blog-7470192961806963601.post-83872606939665797472017-01-10T17:25:00.000+01:002017-01-10T17:25:07.703+01:00Algunos efectos 'hover' con animaciones¿Quieres decorar tus enlaces de texto para que reaccionen al pasar el puntero por encima de ellos, con líneas, pero de una forma distinta al simple subrayado fijo? <br />
<br />
Bien, pues entonces puedes seguir leyendo y quizás alguno de los que se muestran a continuación te podría interesar para todos tus enlaces o para algunos en particular. Tras cada ejemplo se detalla el código CSS que te permitirá animarlos -en todas las acepciones de la palabra- de esa manera.<a name='more'></a><br />
<br />
Como ya va siendo costumbre también podéis experimentar con estos mismos códigos <a href="http://codepen.io/oloman/pen/mIEpn">en Codepen</a> y al final del post encontraréis una pequeña explicación adicional para los más torpes (<a href="http://www.oloblogger.com/search/label/BPT">BPT</a>).<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qQSfi095QYDnPYB8oxqTP7VP0a6Fbdq5ZeDUX5no2YGNDk4E67tshdzN0q0tv98Do7s8fjmB8PtMLEGn1Cm9FPo3_ftqeydXrqfZnnd-ILeyurkFi80wuSZn55J7tiMOwi-qM4JxdZs/s1600/efectos.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qQSfi095QYDnPYB8oxqTP7VP0a6Fbdq5ZeDUX5no2YGNDk4E67tshdzN0q0tv98Do7s8fjmB8PtMLEGn1Cm9FPo3_ftqeydXrqfZnnd-ILeyurkFi80wuSZn55J7tiMOwi-qM4JxdZs/s640/efectos.jpg" width="640" height="362" /></a></div><br />
<br />
<div style="text-align:center;font-family:serif;font-size:20px;"><a class="izdadcha" href="javascript:void();">1. De izquierda a derecha</a></div><div class="vercodigo CSS">a {<br />
position: relative;<br />
overflow: hidden;<br />
display: inline-block;<br />
text-decoration: none;<br />
color: #333;<br />
}<br />
a:after {<br />
content: "";<br />
position: absolute;<br />
bottom: 0;<br />
left: -100%;<br />
width: 100%;<br />
height: 2px;<br />
background: #333;<br />
transition: left .8s;<br />
}<br />
a:hover:after {<br />
left: 0;<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="dchaizda" href="javascript:void();">2. De derecha a izquierda</a></div><div class="vercodigo CSS">a {<br />
position: relative;<br />
overflow: hidden;<br />
display: inline-block;<br />
text-decoration: none;<br />
color: #333;<br />
}<br />
a:after {<br />
content: "";<br />
position: absolute;<br />
bottom: 0;<br />
right: -100%;<br />
width: 100%;<br />
height: 2px;<br />
background: #333;<br />
transition: right .8s;<br />
}<br />
a:hover:after {<br />
right: 0;<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="dobleizdadcha" href="javascript:void();">3. Arriba y abajo opuestos</a></div><div class="vercodigo CSS">a {<br />
position: relative;<br />
overflow: hidden;<br />
display: inline-block;<br />
text-decoration: none;<br />
color: #333;<br />
}<br />
a:before,<br />
a:after {<br />
content: "";<br />
position: absolute;<br />
top: 0;<br />
left: -100%;<br />
width: 100%;<br />
height: 2px;<br />
background: #333;<br />
transition: left .8s;<br />
}<br />
a:hover:before {<br />
left: 0;<br />
}<br />
a:after {<br />
top: auto;<br />
bottom: 0;<br />
left: auto;<br />
right: -100%;<br />
background: #333;<br />
transition: right .8s;<br />
}<br />
a:hover:after {<br />
right: 0;<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="centro" href="javascript:void();">4. Del centro a los lados</a></div><div class="vercodigo CSS">a {<br />
display: inline-block;<br />
position: relative;<br />
color: #333;<br />
text-decoration: none;<br />
}<br />
a:after {<br />
content: "";<br />
display: block;<br />
margin: auto;<br />
height: 2px;<br />
width: 0px;<br />
transition: all .8s;<br />
}<br />
a:hover:after {<br />
width: 100%;<br />
background: #333;<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="doblecentro" href="javascript:void();">5. Doble del centro a los lados</a></div><div class="vercodigo CSS">a {<br />
display: inline-block;<br />
position: relative;<br />
color: #333;<br />
text-decoration: none;<br />
}<br />
a:before,<br />
a:after {<br />
content: "";<br />
display: block;<br />
margin: auto;<br />
height: 2px;<br />
width: 0px;<br />
background: #333;<br />
transition: all .8s;<br />
}<br />
a:hover:before,<br />
a:hover:after {<br />
width: 100%;<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="caja" href="javascript:void();">6. Borde completo</a></div><div class="vercodigo CSS">a {<br />
display: inline-block;<br />
position: relative;<br />
color: #333;<br />
text-decoration: none;<br />
padding: 0 4px;<br />
}<br />
a:before,<br />
a:after {<br />
content: "";<br />
width: 100%;<br />
height: 100%;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
box-sizing: border-box;<br />
transform: scale(0);<br />
transition: 0.5s;<br />
}<br />
a:before {<br />
border-bottom: 2px solid #333;<br />
border-left: 2px solid #333;<br />
transform-origin: 0 100%;<br />
}<br />
a:after {<br />
border-top: 2px solid #333;<br />
border-right: 2px solid #333;<br />
transform-origin: 100% 0%;<br />
}<br />
a:hover:after,<br />
a:hover:before {<br />
transform: scale(1);<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="caja2" href="">7. Borde completo bis</a></div><div class="vercodigo CSS">a {<br />
display: inline-block;<br />
overflow: hidden;<br />
position: relative;<br />
color: #333;<br />
text-decoration: none;<br />
padding: 0 4px;<br />
}<br />
a:before,<br />
a:after {<br />
content: "";<br />
width: 100%;<br />
height: 2px;<br />
position: absolute;<br />
box-sizing: border-box;<br />
transform: scale(0);<br />
}<br />
a:before {<br />
transform: translateX(100%);<br />
bottom: 0;<br />
left: 0;<br />
height: 2px;<br />
border-bottom: 2px solid transparent;<br />
border-left: 2px solid transparent;<br />
transition: .1s transform linear, .1s height linear .1s;<br />
}<br />
a:after {<br />
transform: translateX(-100%);<br />
top: 0;<br />
left: 0;<br />
height: 2px;<br />
border-top: 2px solid transparent;<br />
border-right: 2px solid transparent;<br />
transition: .1s transform linear .2s, .1s height linear .3s;<br />
}<br />
a:hover:after,<br />
a:hover:before {<br />
transform: translateX(0);<br />
height: 100%;<br />
border-color: #333;<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="centrofondo" href="">8. Fondo animado</a></div><div class="vercodigo CSS">a {<br />
position: relative;<br />
text-decoration: none;<br />
color: #333;<br />
z-index: 1;<br />
}<br />
a:before {<br />
content: "";<br />
background: #ccc;<br />
position: absolute;<br />
width: 100%;<br />
height: 2px;<br />
bottom: 0;<br />
left: 0;<br />
transform: scaleX(0);<br />
animation: .8s no-hover;<br />
animation-fill-mode: forwards;<br />
z-index: -1;<br />
}<br />
a:hover:before,<br />
a:focus:before {<br />
animation: .4s hover linear;<br />
animation-fill-mode: forwards;<br />
}<br />
@keyframes hover {<br />
0% {transform: scaleX(0);height: 5px;}<br />
45% {transform: scaleX(1.05);height: 5px;}<br />
55% {height: 5px;}<br />
100% {transform: scaleX(1.05);height: 100%;}<br />
}<br />
@keyframes no-hover {<br />
0% {transform: scaleX(1.05);height: 100%;}<br />
45% {height: 5px;}<br />
55% {transform: scaleX(1.05);height: 5px;opacity: 1;}<br />
100% {transform: scaleX(0);height: 5px;opacity: .02;}<br />
}</div><br />
<div style="text-align:center;font-family:serif;font-size: 20px;"><a class="tresd" href="">9. Efecto 3D</a></div><div class="vercodigo CSS">a {<br />
display: inline-block;<br />
position: relative;<br />
color: #333;<br />
text-decoration: none;<br />
transition: all .5s ease;<br />
transform-style: preserve-3d;<br />
}<br />
a:after {<br />
content: "Enlace";<br />
position: absolute;<br />
top: -100%;<br />
left: 0px;<br />
width: 100%;<br />
background: #ccc;<br />
transform-origin: left bottom;<br />
transform: rotateX(90deg);<br />
}<br />
a:hover {<br />
transform-origin: center bottom;<br />
transform: rotateX(-90deg) translateY(100%);<br />
}</div><style>a.dchaizda,a.dobleizdadcha,a.izdadcha{overflow:hidden;display:inline-block}a.dchaizda:after,a.dobleizdadcha:after,a.dobleizdadcha:before,a.izdadcha:after{content:"";width:100%;height:3px;background:#333}a.centro,a.dchaizda,a.dobleizdadcha,a.izdadcha{display:inline-block}a.centro,a.dchaizda,a.doblecentro,a.dobleizdadcha,a.izdadcha{color:#333;text-decoration:none;font-size:40px;line-height:46px;padding:0 0 6px}a.izdadcha{position:relative}a.izdadcha:after{position:absolute;bottom:0;left:-100%;transition:left .8s}a.izdadcha:hover:after{left:0}a.dchaizda{position:relative}a.dchaizda:after{position:absolute;bottom:0;right:-100%;transition:right .8s}a.dchaizda:hover:after{right:0}a.dobleizdadcha{position:relative}a.dobleizdadcha:after,a.dobleizdadcha:before{position:absolute;top:0;left:-100%;transition:left .8s}a.caja,a.centro,a.doblecentro{position:relative}a.dobleizdadcha:hover:before{left:0}a.dobleizdadcha:after{top:auto;bottom:0;left:auto;right:-100%;background:#333;transition:right .8s}a.centro:after,a.doblecentro:after,a.doblecentro:before{margin:auto;height:3px;transition:all .8s;content:""}a.dobleizdadcha:hover:after{right:0}a.centro:after{display:block;width:0}a.centro:hover:after{width:100%;background:#333}a.doblecentro{display:inline-block}a.doblecentro:after,a.doblecentro:before{display:block;width:0;background:#333}a.caja,a.caja2,a.tresd{display:inline-block;color:#333;text-decoration:none;font-size:40px;line-height:46px}a.doblecentro:hover:after,a.doblecentro:hover:before{width:100%}a.caja{padding:6px}a.caja:after,a.caja:before{content:"";width:100%;height:100%;position:absolute;top:0;left:0;box-sizing:border-box;transform:scale(0);transition:.5s}.caja:before{border-bottom:2px solid #333;border-left:2px solid #333;transform-origin:0 100%}.caja:after{border-top:2px solid #333;border-right:2px solid #333;transform-origin:100% 0}.caja:hover:after,.caja:hover:before{transform:scale(1)}a.caja2{position:relative;padding:6px}a.caja2:after,a.caja2:before{content:"";width:100%;height:2px;position:absolute;box-sizing:border-box;transform:scale(0)}.caja2:before{transform:translateX(100%);bottom:0;left:0;height:2px;border-bottom:2px solid transparent;border-left:2px solid transparent;transition:.1s transform linear,.1s height linear .1s}.caja2:after{transform:translateX(-100%);top:0;left:0;height:2px;border-top:2px solid transparent;border-right:2px solid transparent;transition:.1s transform linear .2s,.1s height linear .3s}.caja2:hover:after,.caja2:hover:before{transform:translateX(0);height:100%;border-color:#333}a.centrofondo{position:relative;text-decoration:none;color:#333;z-index:1;font-size:40px;line-height:46px;padding:3px 0}a.centrofondo:before{content:"";background:#ccc;position:absolute;width:100%;height:3px;bottom:0;left:0;transform:scaleX(0);animation:.8s no-hover;animation-fill-mode:forwards;z-index:-1}a.centrofondo:focus:before,a.centrofondo:hover:before{animation:.4s hover linear;animation-fill-mode:forwards}@keyframes hover{0%{transform:scaleX(0);height:5px}45%{transform:scaleX(1.05);height:5px}55%{height:5px}100%{transform:scaleX(1.05);height:2.8rem}}@keyframes no-hover{0%{transform:scaleX(1.05);height:2.8rem}45%{height:5px}55%{transform:scaleX(1.05);height:5px;opacity:1}100%{transform:scaleX(0);height:5px;opacity:.02}}a.tresd{position:relative;transition:all .5s ease;transform-style:preserve-3d}a.tresd:after{content:"Enlace";position:absolute;top:-100%;left:0;width:100%;background:#ccc;transform-origin:left bottom;transform:rotateX(90deg)}a.tresd:hover{transform-origin:center bottom;transform:rotateX(-90deg) translateY(100%)}</style><br />
<br />
<div class="bpt">Una vez elegido el estilo que os gusta, el código correspondiente habría que añadirlo en la plantilla en cualquiera de las zonas de la página que admita CSS. Para Blogger <a href="http://www.oloblogger.com/2016/08/guia-blogger-donde-incluir-css-html-javascript.html">ya detallé anteriormente cómo y dónde se podía incluir</a>. <br />
<br />
<br />
Puesto tal cual afectará a TODOS los enlaces de la página, así que en algunos casos podría ser conveniente limitarlo sólo a los enlaces del bloque dónde están las propias entradas. Para ello habría que cambiar todos los selectores <span class="css">a</span>, <span class="css">a:hover</span>, <span class="css">a:after</span>, etc. por otros idénticos pero precedidos de la clase (o id) de la caja contenedora de dichas entradas. <br />
<br />
Por ejemplo, en una plantilla estándar de Blogger ese contenedor sería <span class="css">.post-body</span>, así que lo anterior quedaría como <span class="css">.post-body a</span>, <span class="css">.post-body a:hover</span>, <span class="css">.post-body a:after</span>, etc.<br />
<br />
De esta manera, la primera opción ("De izquierda a derecha") tendría que quedar así para que sólo afectara a los enlaces del texto de las entradas y no a otros:<br />
<br />
<div class="vercodigo CSS">.post-body a {<br />
position: relative;<br />
overflow: hidden;<br />
display: inline-block;<br />
text-decoration: none;<br />
color: #333;<br />
}<br />
.post-body a:after {<br />
content: "";<br />
position: absolute;<br />
bottom: 0;<br />
left: -100%;<br />
width: 100%;<br />
height: 2px;<br />
background: #333;<br />
transition: left .8s;<br />
}<br />
.post-body a:hover:after {<br />
left: 0;<br />
}</div><br />
...y de la misma manera habría que cambiar los selectores de los otros estilos para un resultado que sólo afecte a las entradas.<br />
<br />
<br />
Si lo que queremos es aplicar este estilo a sólo unos enlaces muy concretos y no de forma general, entonces ya hay que incluir también una "marca" en el HTML. Para ello en primer lugar creamos un selector especial en lugar de los genéricos. Siguiendo con el ejemplo 1 nuestro CSS habría que incluirlo así:<br />
<br />
<div class="vercodigo CSS">a.enlacedes {<br />
position: relative;<br />
overflow: hidden;<br />
display: inline-block;<br />
text-decoration: none;<br />
color: #333;<br />
}<br />
a.enlacedes:after {<br />
content: "";<br />
position: absolute;<br />
bottom: 0;<br />
left: -100%;<br />
width: 100%;<br />
height: 2px;<br />
background: #333;<br />
transition: left .8s;<br />
}<br />
a.enlacedes:hover:after {<br />
left: 0;<br />
}</div><br />
Y ahora cada vez que queramos un enlace concreto con ese estilo concreto, tendríamos que añadir esa clase (<span class="css">.enlacedes</span>) al enlace. Así:<br />
<br />
<div class="vercodigo"><a <span class="cambiar">class="enlacedes"</span> href="http://direccionenlace.com">Enlace</a></div><br />
Tanto en esta entrada como en el <a href="http://codepen.io/oloman/pen/mIEpn">Codepen</a> que enlacé al principio de este post, todos los ejemplos están construidos de esta última manera para poder mostrar todos de forma individual.<br />
</div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com22tag:blogger.com,1999:blog-7470192961806963601.post-41986160993059328852016-11-20T17:00:00.000+01:002016-11-20T19:54:40.971+01:00Símbolos y emojis desde el editor de entradas de BloggerNo sé si habéis reparado en ello, pero desde hace unos pocos días Blogger ha incorporado a su editor de entradas un nuevo botón. Es uno cuyo icono es bastante ilustrativo de lo que ofrece.<br />
<br />
Se trata de una carita sonriente, así que en efecto, lo que hace es mostrarnos un numeroso catálogo de símbolos y emojis (emoticonos para los más antiguos) que podremos añadir a nuestras entradas con él.<br />
<br />
Son caracteres <a href="http://www.unicode.org/">Unicode</a>, así que aunque no los he comprobado todos, es de suponer que la lista incluye la <a href="http://www.unicode.org/charts/">extensa relación</a> que tiene disponible este estándar.<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQ1iISKRdiyWWkJGdlGa9HHdKIG0xK5QuuRP-EtkdgzYcN1KKw_yuWs01W1IuQzwMmZqOq4MXmX4cISdeIc5gDBRj6P0kGTAIUFvn8e0_EfH0-U5_I5MO_2-y3xsL9YL2h6oc30LAgnY/s1600/emojis+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Emojis Blogger" border="0" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQ1iISKRdiyWWkJGdlGa9HHdKIG0xK5QuuRP-EtkdgzYcN1KKw_yuWs01W1IuQzwMmZqOq4MXmX4cISdeIc5gDBRj6P0kGTAIUFvn8e0_EfH0-U5_I5MO_2-y3xsL9YL2h6oc30LAgnY/s640/emojis+blogger.jpg" title="Emojis Blogger" width="640" /></a></div><br />
<br />
Dentro de la barra de herramientas de edición y sólo disponible desde la pestaña <span class="argot">Redactar</span>, el botón se encuentra entre los de <span class="argot">Insertar vídeo</span> e <span class="argot">Insertar salto de línea</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrmsLRN5Bl03hu5erhcA4_p8zeqFXSzDL8imJg0DBFqTxDO8nBW4gb4EBM1hr9CsvRe9Yi9lyNT3n2AUwTFV5hVVcPhxMeACOVZIie8D8mw46kOi5ZmRl4PDPByGluIOFvbxQ0rpOl-8/s1600/Boton+editor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrmsLRN5Bl03hu5erhcA4_p8zeqFXSzDL8imJg0DBFqTxDO8nBW4gb4EBM1hr9CsvRe9Yi9lyNT3n2AUwTFV5hVVcPhxMeACOVZIie8D8mw46kOi5ZmRl4PDPByGluIOFvbxQ0rpOl-8/s640/Boton+editor.jpg" width="640" /></a></div><br />
<br />
Cuando pinchéis en él os saldrá una ventana emergente como la de la siguiente captura. Desde ahí podréis elegir entre las categorías Símbolos, Emojis, Puntuación, Números, Formato y otras muchas opciones más relacionadas con diferentes idiomas. <br />
<br />
Según el que escojáis se abrirá un segundo bloque de subopciones y en función de la nueva elegida, hasta un tercer desplegable. En definitiva muchas variantes, algunas más prácticas y otras menos, pero que conforman un completísimo catálogo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOHKCzjYLt-T0YYjGdOH_2jg2fGSxfJnPQJYVUgj17nmkLwgNGZp_Cc_Ud68vMLJJqKa4KFnXqi186wMCEpKpzzzhYyg0ryAGSgesQKiYNr6VE6GdgqP9LfyOXdTf3ZstT3IFiaVPBApM/s1600/desplegable+categorias.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOHKCzjYLt-T0YYjGdOH_2jg2fGSxfJnPQJYVUgj17nmkLwgNGZp_Cc_Ud68vMLJJqKa4KFnXqi186wMCEpKpzzzhYyg0ryAGSgesQKiYNr6VE6GdgqP9LfyOXdTf3ZstT3IFiaVPBApM/s640/desplegable+categorias.jpg" width="640" /></a></div><br />
<br />
Como principal inconveniente encuentro que la <i>interface</i> está en inglés, aunque supongo que es porque está recién lanzado. Sin embargo los términos que se usan son bastante conocidos aunque estén en ese idioma, así que imagino que no os causará demasiado problema.<br />
<br />
Otra pega que le veo es que son tantísimos los símbolos disponibles, que es bastante complicado encontrar uno concreto. No obstante para aliviar eso la utilidad tiene dos herramientas. Una es un buscador clásico por palabras en el que se teclea el término (en inglés, eso sí) y a la izquierda se nos ofrecen posibles resultados.<br />
<br />
La otra manera me ha parecido bastante original y simpática al tiempo. Se trata de un cuadro dónde podemos trazar un dibujo esquemático con el ratón y la utilidad nos saca como posibles resultados todos los símbolos con formas parecidas a ese dibujo. Más fácil imposible, aunque está por ver si es realmente efectivo. En mis pocas pruebas le doy de momento un 8 sobre 10.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxS9OA53ZncCtHtOONtYgfvGo9gDKPzt2bziGLHJ-7jsGpoR3EzCEhD-lT0fVldpAX5l-k5LcFj4p9lmRWwTeJrtT3sfXN_j8K1PCsXWSfn3h6lKaLuAO1Z5ej-H9r38TJK2FhSMffyXY/s1600/reconocimiento.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="502" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxS9OA53ZncCtHtOONtYgfvGo9gDKPzt2bziGLHJ-7jsGpoR3EzCEhD-lT0fVldpAX5l-k5LcFj4p9lmRWwTeJrtT3sfXN_j8K1PCsXWSfn3h6lKaLuAO1Z5ej-H9r38TJK2FhSMffyXY/s640/reconocimiento.jpg" width="640" /></a></div><br />
<br />
Este tipo de cosas son pequeñas tonterías que en el fondo no tienen una gran trascendencia para el manejo cotidiano de nuestro propio blog, pero como cada dos por tres últimamente añaden algo, mi interpretación personal es que Blogger no para. <br />
<br />
Es una señal más de que el producto no está olvidado por parte de Google y que, a pesar de <a href="http://www.oloblogger.com/2013/05/cierre-blogger.html">lo que algunos auguraban como cosa inminente hace ya más de tres años</a>, Blogger sigue vivito y coleando, incorporando cada vez más funciones... aunque no sean esas grandes cosas que a más de uno nos gustaría.<br />
<br />
Por ejemplo ¿Y para cuando esto mismo pero en los comentarios?<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com29tag:blogger.com,1999:blog-7470192961806963601.post-56211557356009247582016-11-14T17:00:00.000+01:002016-11-14T17:00:18.922+01:00Menú acordeón CSS desplegable con hover o con clicLos menús del tipo "acordeón" son aquellos cuyos elementos se disponen -normalmente- en vertical y cuyas correspondientes opciones se despliegan y quedan visibles al seleccionar el elemento principal que los engloba.<br />
<br />
Son especialmente útiles para barras laterales aunque el efecto para ciertos diseños a veces no es el óptimo. Hay que valorar por tanto su conveniencia o no de usarlos, teniendo en cuenta que el menú plegado ocupa evidentemente menos altura que cuando está desplegado y por tanto, cuando se hacen visibles las opciones secundarias todos los elementos (otros gadgets, por ejemplo) que pudiera haber debajo de él, se desplazarán hacia abajo tanto como el menú se despliegue.<br />
<br />
Dicho esto lo que veremos será un esquema básico de cómo construirlos <b>sin necesidad de JavaScript</b> (eso otro <a href="http://www.oloblogger.com/2014/07/menu-acordeon-simple-jquery.html">ya vimos cómo hacerlo</a>), para que reaccionen tanto cuando se pase el puntero por encima (<i>hover</i>) como cuando se haga clic sobre ellos.<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rSc8OaWLpXk4IymU1In_R063HDxDijS1A-fXQGV9kMILbfInTcqngt-4c8SHhpYQNioAYB6Jwd2WA9BhNFadAPe7yw6uL5o_AcmyHAfNuTMqrWiCeespLWHI40eG3sICXNDXHr3E1nM/s1600/menu+acordeon+css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menú acordeón CSS" border="0" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1rSc8OaWLpXk4IymU1In_R063HDxDijS1A-fXQGV9kMILbfInTcqngt-4c8SHhpYQNioAYB6Jwd2WA9BhNFadAPe7yw6uL5o_AcmyHAfNuTMqrWiCeespLWHI40eG3sICXNDXHr3E1nM/s640/menu+acordeon+css.jpg" title="Menú acordeón CSS" width="640" /></a></div><br />
<br />
<h3>Desplegable con <i>hover</i></h3><br />
El marcado HTML será el habitual de una lista, usando <span class="css">ul</span> para delimitar la propia lista y <span class="css">li</span> para cada uno de sus elementos. Para las distintas opciones de cada elemento de la lista simplemente anidaremos dentro de cada cual una nueva lista. <br />
<br />
Será suficiente con que marquemos la lista principal con una clase específica para que luego el CSS haga el resto. En el siguiente ejemplo usaremos <span class="css">acorh</span>.<br />
<br />
<div class="vercodigo HTML"><pre><ul class="<b>acorh</b>">
<li><a href="#">OPCIÓN 1</a>
<ul>
<li><a href="<span class="cambiar">URL11"</span>>Opción 1.1</a></li>
<li><a href="<span class="cambiar">URL12"</span>>Opción 1.2</a></li>
</ul>
</li>
<li><a href="#">OPCIÓN 2</a>
<ul>
<li><a href="<span class="cambiar">URL21"</span>>Opción 2.1</a></li>
<li><a href="<span class="cambiar">URL22"</span>>Opción 2.2</a></li>
<li><a href="<span class="cambiar">URL23"</span>>Opción 2.3</a></li>
</ul>
</li>
<li><a href="#">OPCIÓN 3</a>
<ul>
<li><a href="<span class="cambiar">URL31"</span>>Opción 3.1</a></li>
<li><a href="<span class="cambiar">URL32"</span>>Opción 3.2</a></li>
</ul>
</li>
</ul></pre></div><br />
<span style="font-size: 80%;">(*) Los <span class="cambiar">URLXX</span> que puse en otro color, los tendréis que cambiar por las direcciones de destino de cada uno de los enlaces que incluya el menú.</span><br />
<br />
<br />
Una vez tenemos una estructura HTML como esa, sólo será cuestión de añadir el siguiente CSS para que el menú funcione con el estilo acordeón:<br />
<br />
<div class="vercodigo CSS">ul.acorh,<br />
ul.acorh * {<br />
margin: 0;<br />
padding: 0;<br />
border: 0;<br />
}<br />
ul.acorh {<br />
margin: 10px auto;<br />
padding: 0;<br />
list-style: none;<br />
width: 100%;<br />
font-size: 18px;<br />
}<br />
ul.acorh li {<br />
list-style: none;<br />
}<br />
ul.acorh li a {<br />
display: block;<br />
padding: 10px 10px 10px 20px;<br />
background: #333;<br />
color: #eee;<br />
border-bottom: 1px solid #000;<br />
border-top: 1px solid #666;<br />
text-decoration: none;<br />
box-sizing: border-box;<br />
}<br />
ul.acorh li ul {<br />
max-height: 0;<br />
margin: 0;<br />
padding: 0;<br />
list-style: none;<br />
overflow: hidden;<br />
transition: .3s all ease-in;<br />
}<br />
ul.acorh li li a {<br />
padding: 10px 10px 10px 40px;<br />
background: #999;<br />
color: #000;<br />
font-size: 16px;<br />
border: 0;<br />
border-bottom: 1px solid #ccc;<br />
box-sizing: border-box;<br />
}<br />
ul.acorc li li:last-child a {<br />
border-bottom: 0;<br />
}<br />
ul.acorh li:hover ul {<br />
max-height: 300px;<br />
transition: .3s all ease-in;<br />
}<br />
ul.acorh li a:hover {<br />
background: #666;<br />
color: #fff;<br />
}</div><br />
Tal que así:<br />
<br />
<ul class="acorh"><li><a href="#">OPCIÓN 1</a><ul><li><a href="URL11">Opción 1.1</a></li>
<li><a href="URL12">Opción 1.2</a></li>
</ul></li>
<li><a href="#">OPCIÓN 2</a><ul><li><a href="URL21">Opción 2.1</a></li>
<li><a href="URL22">Opción 2.2</a></li>
<li><a href="URL23">Opción 2.3</a></li>
</ul></li>
<li><a href="#">OPCIÓN 3</a><ul><li><a href="URL31">Opción 3.1</a></li>
<li><a href="URL32">Opción 3.2</a></li>
</ul></li>
</ul><style>ul.acorh,
ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}</style><br />
<br />
<br />
Casi todo lo que veis en el CSS es formato de colores y demás, pero hay algo que que quiero destacar porque es precisamente lo que hace visibles o invisibles las subopciones. <br />
<br />
Ese algo es la propiedad <span class="css">max-height</span> del selector correspondiente a las listas anidadas o secundarias (<span class="css">ul.acorh li ul</span>) que como podéis comprobar inicialmente tiene el valor cero. Luego para el mismo selector pero una vez hecho <i>hover</i> sobre su inmediatamente superior <span class="css">li</span> (ul.acorh li:hover ul), ya ponemos un valor para <span class="css">max-height</span> lo suficientemente alto (sin pasarnos) como para que quepan en esa altura el número máximo de subopciones que usemos para cualquier elemento principal.<br />
<br />
De esta manera inicialmente la lista no se ve por tener altura cero y al pasar el puntero es cuando se expande ocupando la altura que necesite.<br />
<br />
Podíamos haber usado <span class="css">height</span> de la misma manera, pero en ese caso la transición que hemos incorporado para que el desplegado sea suave y no brusco, no hubiera funcionado. Cosas del CSS.<br />
<br />
<br />
<h3>Desplegable con <i>click</i>: dispositivos táctiles</h3><br />
Para que la cosa funcione con un clic ya tenemos que echar mano de la pseudo-clase <span class="css">:target</span>. En un principio sería sólo cuestión de cambiar el anteriormente mencionado selector <span class="css">ul.acorh li:hover ul</span> por <span class="css">ul.acorh li:target ul</span>, pero CSS es un poco puñetero y para que funcione como queremos es necesario que los elementos "clicables" tengan una id única y que además sus enlaces apunten a sí mismos.<br />
<br />
Esto se traduce en un HTML como este, en el que la diferencia con el anterior son precisamente las id de los elementos de la lista principal y el contenido de sus enlaces, que en lugar de estar vacíos (#) llevan un marcador con el mismo id. Los cambios que habría que hacer sobre lo visto los he vuelto a marcar también con otro color.<br />
<br />
<div class="vercodigo HTML"><pre><ul class="acorh">
<li <span class="cambiar">id="opcion1"</span>><a href="<span class="cambiar">#opcion1</span>">OPCIÓN 1</a>
<ul>
<li><a href="URL11">Opción 1.1</a></li>
<li><a href="URL12">Opción 1.2</a></li>
</ul>
</li>
<li <span class="cambiar">id="opcion2</span>"><a href="<span class="cambiar">#opcion2</span>">OPCIÓN 2</a>
<ul>
<li><a href="URL21">Opción 2.1</a></li>
<li><a href="URL22">Opción 2.2</a></li>
<li><a href="URL23">Opción 2.3</a></li>
</ul>
</li>
<li <span class="cambiar">id="opcion3</span>"><a href="<span class="cambiar">#opcion3</span>">OPCIÓN 3</a>
<ul>
<li><a href="URL31">Opción 3.1</a></li>
<li><a href="URL32">Opción 3.2</a></li>
</ul>
</li>
</ul></pre></div><br />
<span style="font-size: 80%;">(*) Los <span class="cambiar">URLXX</span> de nuevo los tendréis que cambiar por las direcciones de destino de cada uno de los enlaces que incluya el menú.</span><br />
<br />
Una vez hecho esto, el código CSS será exactamente el mismo que vimos antes salvo el selector <span class="css">ul.acorh li:hover ul</span>, que como comenté antes pasará a ser <span class="css">ul.acorh li:target ul</span> y que quedaría así:<br />
<br />
<div class="vercodigo CSS">ul.acorh li:<span class="cambiar"><b>target</b></span> ul {<br />
max-height: 300px;<br />
transition: .3s all ease-in;<br />
}</div><br />
La demo con clic a continuación.<br />
<br />
<ul class="acorc"><li id="opcion1"><a href="#opcion1">OPCIÓN 1</a><ul><li><a href="URL11">Opción 1.1</a></li>
<li><a href="URL12">Opción 1.2</a></li>
</ul></li>
<li id="opcion2"><a href="#opcion2">OPCIÓN 2</a><ul><li><a href="URL21">Opción 2.1</a></li>
<li><a href="URL22">Opción 2.2</a></li>
<li><a href="URL23">Opción 2.3</a></li>
</ul></li>
<li id="opcion3"><a href="#opcion3">OPCIÓN 3</a><ul><li><a href="URL31">Opción 3.1</a></li>
<li><a href="URL32">Opción 3.2</a></li>
</ul></li>
</ul><style>ul.acorc,
ul.acorc * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorc {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorc li {
list-style: none;
}
ul.acorc li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorc li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorc li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorc li:target ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorc li a:hover {
background: #666;
color: #fff;
}</style><br />
<br />
Para hacer que con un nuevo clic se plegara el último elemento desplegado ya tendríamos que recurrir a otro sistema con un CSS más complejo y no tan genérico, a <a href="http://www.oloblogger.com/2014/07/ocultar-mostrar-spoilers-css-input.html">la utilización de <span class="html">input</span></a> o <a href="http://www.oloblogger.com/2014/07/menu-acordeon-simple-jquery.html">usar JavaScript</a>.<br />
<br />
<br />
<h3>Desplegable con <i>hover</i> y <i>click</i></h3><br />
Esto es sencillo y además recomendable si queremos usar el hover, pero que en dispositivos táctiles el desplegable funcione también. <br />
<br />
Para ello simplemente hemos de combinar los dos selectores vistos como alternativas e incluir en el CSS ambos:<br />
<br />
<div class="vercodigo CSS"><span class="cambiar">ul.acorh li:hover ul,<br />
ul.acorh li:target ul</span> {<br />
max-height: 300px;<br />
transition: .3s all ease-in;<br />
}</div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com21tag:blogger.com,1999:blog-7470192961806963601.post-15449518072010437252016-10-11T17:00:00.000+02:002016-10-16T20:10:34.558+02:00Cambiar el tamaño de miniatura del gadget 'Entradas populares'Esto es algo que antes requería de un JavaScript para poder <a href="http://www.oloblogger.com/2012/04/agrandar-las-miniaturas-de-los-gadgets.html">cambiar la imagen original</a> que carga el gadget y que tan sólo tiene 72 píxeles, de manera que obteníamos otra mayor aprovechando el ya muy conocido asunto de <a href="http://www.oloblogger.com/2012/02/la-ventaja-de-subir-una-sola-imagen-y.html">las múltiples imágenes de diferentes tamaños de las que disponemos en Blogger</a> cuando almacenamos una nueva en su servidor asociando... antes Picasa y ahora Google Fotos.<br />
<br />
Sin embargo actualmente conseguir esto es mucho más sencillo debido a la incorporación de <a href="http://www.oloblogger.com/search?q=operador">nuevos operadores</a> a Blogger y en concreto para esta ocasión a <span class="html">resizeImage</span> (<a href="http://www.oloblogger.com/2016/04/redimensionar-imagenes-operador-resizeimage.html">también explicado anteriormente</a>) y que precisamente incorpora el gadget de Entradas Populares en su <b>nuevo código</b>. Nuevo sí, pues no hace mucho ha sido también actualizado.<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnkIz9s_GU9i75gUwWRQ3c7se-WMIEEQd1e92ZCpgT5a3klBUw8SA63xNsbY87LNCwUBmcpPrxOJ19VFemH5aCrdYQKG2rfuHS6MoCGqfYTMxduPwzYlEOHngjo-ClbhmqsIF_-9mmpY/s1600/Entradas+populares+miniatura.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Miniaturas de Entradas Populares" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnkIz9s_GU9i75gUwWRQ3c7se-WMIEEQd1e92ZCpgT5a3klBUw8SA63xNsbY87LNCwUBmcpPrxOJ19VFemH5aCrdYQKG2rfuHS6MoCGqfYTMxduPwzYlEOHngjo-ClbhmqsIF_-9mmpY/s1600/Entradas+populares+miniatura.jpg" title="Miniaturas de Entradas Populares" /></a></div><br />
<br />
Así pues, lo primero que tendremos que hacer es editar la plantilla y localizar el código del gadget. Lo distinguiremos si buscamos la palabra clave "popularposts".<br />
<br />
Una vez localizado, la línea que nos interesa es la que reza:<br />
<br />
<div class="vercodigo"><b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, <span class="cambiar">72</span>, "1:1") : data:post.thumbnail' var='image'></div><br />
¿Veis ese número 72 que anda por ahí? Pues ese es el que indica que las imágenes originales de las respectivas entradas pasen al gadget con un tamaño cuadrado de sólo 72px. <br />
<br />
<br />
La manera de que en dicho gadget salgan más grandes (o más pequeñas si por algún motivo nos interesara así) sería cambiando esa cifra por otra. Por ejemplo, para obtener un recorte cuadrado de la imagen original de 300px el código debería cambiarse así.<br />
<br />
<div class="vercodigo"><b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, <span class="cambiar">300</span>, "1:1") : data:post.thumbnail' var='image'></div><br />
<br />
Creo que es muy sencillo así que si no os funciona la cosa lo único que puede pasar es que tengáis todavía el código antiguo del gadget y que no encontréis la línea que he indicado. Si es así entonces lo más práctico será eliminar el gadget y volverlo a añadir. Eso con seguridad actualizará el código y como las opciones de configuración son pocas, no perdéis nada y apenas tiempo.<br />
<br />
<hr /><br />
<br />
Y cómo probablemente el diseño se desajuste un poco si hacéis muy grandes las miniaturas, este CSS os podría resolver la papeleta:<br />
<br />
<div class="vercodigo CSS">.PopularPosts ul,<br />
.PopularPosts li,<br />
.PopularPosts img {<br />
margin: 0 !important;<br />
padding: 0 !important;<br />
text-indent: 0 !important;<br />
}<br />
.PopularPosts .item-thumbnail {<br />
float: none !important;<br />
margin: 10px 0 !important;<br />
}<br />
.PopularPosts .item-title a {<br />
font-weight: bold;<br />
font-size: 110%;<br />
}</div><br />
<br />
<div class="actualizacion">Para aquellos que todavía tienen dificultades con cómo añadir cada cosa dónde corresponde, Mónica Lemos ha tenido a bien realizar un vídeo tutorial sobre el contenido de esta entrada.<br />
<br />
En su blog <a href="http://www.bloggerpasoapaso.com/">Blogger paso a paso</a> podéis encontrar más<br />
<br />
<div class="video-wrapper"><div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/afKrkBQQR30" frameborder="0" allowfullscreen></iframe></div></div></div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com32tag:blogger.com,1999:blog-7470192961806963601.post-73592496983054198202016-10-03T16:00:00.000+02:002016-10-03T19:37:14.924+02:00Presentación de imágenes para álbumes Picasa tras su cierreHace ya bastante que Google anunció <a href="http://googlephotos.blogspot.com.es/2016/02/moving-on-from-picasa.html">la retirada de Picasa</a> para centrarse en Google Fotos y así se hizo. Ahora llega el turno de la <a href="https://developers.googleblog.com/2016/06/announcing-turndown-of-google-feed-api.html">API para feeds de Google</a> (día 29 de septiembre) y con su <i>defenestración</i> también <b>dejarán de funcionar las presentaciones de imágenes Picasa</b> embebidas en web. La mala noticia es que no hay equivalente en Google Fotos.<br />
<br />
Por un lado estaba la utilidad de Picasa que posibilitaba <b>insertar fotos y álbumes</b> y por otro, el gadget <i><b>Presentación de diapositivas</b></i> de Blogger que también tiraba de Picasa. Uno ya no existe y al otro le debe quedar poco -si cuando se publique este post no ha fallecido ya- debido a la retirada de la mencionada API. En cualquier caso, agonizando están ambos.<a name='more'></a><br />
<br />
La buena noticia es que con las imágenes propiamente dichas no ha habido ningún problema, pues han migrado de un servicio a otro y <a href="http://picasaweb.google.com/">los álbumes siguen accesibles</a> desde una utilidad creada para el caso. Se han conservado tanto las que se subieron desde Blogger, como desde Google+ o Hangouts, así que tranquilos todos: las imágenes de vuestro blog siguen a salvo y operativas. Aquí sólo estamos hablando de los gadgets para presentaciones.<br />
<br />
Un matiz: los enlaces a las imágenes siguen funcionando siempre que estuvieran asociados a tu ID de usuario (no a tu nombre de usuario). Tenéis más información sobre todo esto Ayuda de Picasa: <a href="https://support.google.com/picasa/answer/6383491?hl=es">¿Qué ocurre con Picasa y Álbumes web de Picasa?</a><br />
<br />
Así las cosas me puse a buscar una alternativa que no usara aquello que desaparece y afortunadamente encontré un un <i>feed</i> relacionado con los álbumes migrados. Con él no es demasiado complicado montar una presentación de diapositivas casera.<br />
<br />
Vamos a verlo.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieV0QzxHUY5sRG21IgpgX_ZZl-uVnEY3_yKhQ_Fv_Yl168EbPo-9dxtAgRe8ifBcJyq3i3nOtnj0Ysd9Rg0VCl4Ve2ayCsfbcU80gmjW0I5Ib39RU2QBDl4ncy1Nvj9B-QonPfruwGJcI/s1600/slider+picasa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieV0QzxHUY5sRG21IgpgX_ZZl-uVnEY3_yKhQ_Fv_Yl168EbPo-9dxtAgRe8ifBcJyq3i3nOtnj0Ysd9Rg0VCl4Ve2ayCsfbcU80gmjW0I5Ib39RU2QBDl4ncy1Nvj9B-QonPfruwGJcI/s1600/slider+picasa.jpg" /></a></div><br />
<br />
<br />
El <i>feed</i> desde el que se pueden cargar todos los datos de las imágenes que teníamos en Picasa y que se han traspasado a Google Fotos tiene el siguiente formato:<br />
<br />
<div class="instrucciones">http://photos.googleapis.com/data/feed/api/user/<span class="cambiar">NUMERO_USUARIO</span></div><br />
<br />
El <b>número de usuario</b> es el de la cuenta Google asociada y podéis averiguar cuál es el vuestro al menos de dos maneras:<br />
<br />
<ul><li>Habiendo hecho <i>login</i> previamente en Google y accediendo a la dirección del nuevo archivo de álbumes Picasa que es <a href="https://get.google.com/albumarchive">https://get.google.com/albumarchive</a>. La antigua dirección <a href="http://picasaweb.google.com/">http://picasaweb.google.com</a> os redirige hoy día también a esa misma dirección. Si probáis los anteriores enlaces veréis que al final de la dirección se añade automáticamente vuestro número de usuario.</li>
<li>Entrando en <a href="https://plus.google.com/">https://plus.google.com</a> >> Perfil >> Botón derecho >> Copiar dirección del enlace... pero aunque parezca lo contrario la primera opción es la más fácil.</li>
</ul><br />
<br />
<h3>Plugin jQuery</h3><br />
Ese <i>feed</i> general que antes comenté incluye a su vez las respectivas direcciones de otros <i>feeds</i> que nos permiten acceder a los datos de cada álbum de manera independiente, así que lo que hace básicamente el plugin es leer el <i>feed</i> general mediante JSON a partir del número de usuario, localizar el feed particular de un álbum por su nombre y por último leer y mostrar los datos (imágenes y enlace al álbum en Google Fotos).<br />
<br />
El resto de cosas que hay por ahí sólo añaden a la página las capas necesarias para poder aplicar el estilo y el sistema de <i>slider</i>. Este último no es ni más ni menos que una pequeña evolución del ya conocido por aquí <a href="http://www.oloblogger.com/2013/04/mas-sencillo-slider-jquery.html"><i>slider jQuery más sencillo</i></a>.<br />
<br />
Esto se puede colocar tanto en plantilla (ver <a href="http://www.oloblogger.com/2016/08/guia-blogger-donde-incluir-css-html-javascript.html">dónde se puede colocar el JavaScript en Blogger</a>) como en un gadget HTML/JavaScript. En ambos sitios funcionará, pero en el segundo caso hay que tener la precaución de colocarlo de manera que se cargue antes que lo que veremos ahora después.<br />
<br />
Aquí está reducido de tamaño, pero si lo queréis ver más claro, en <a href="http://codepen.io/oloman/pen/ZpZdKQ">este CodePen</a> tenéis todo estiradito.<br />
<br />
<div class="vercodigo"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script><br />
<!-- Plugin slider automático álbum Picasa --><br />
<script>//<![CDATA[<br />
!function(a){a.fn.extend({gfotosgal:function(b,c,d,e){this.each(function(){var g=0,h="#"+a(this).attr("id"),i="https://photos.googleapis.com/data/feed/api/user/"+b+"?alt=json";a(h).append('<div class="gfsliderwrap"><div class="gfalbum">'+c+'</div><div class="gfslider"><div class="gfloading"></div></div></div>'),a.getJSON(i).done(function(b){a(h+" .gfsliderwrap").append('<a href="javascript:void();" class="gfmenos">&lsaquo;</a><a href="javascript:void();" class="gfplay">&#9658;</a><a href="javascript:void();" class="gfmas">&rsaquo;</a>'),a.each(b.feed.entry||[],function(b,e){var f=e.title.$t||"";f===c&&(a(h+" .gfloading").remove(),g=1,a.getJSON(e.link[0].href).done(function(b){a.each(b.feed.entry||[],function(b,c){return b!=d&&void a(h+" .gfslider").append('<a target="_blank" href="'+c.link[1].href+'" class="gfimagen"><img src="'+c.content.src+'"/></a>')})}))}),0==g?(a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Álbum no encontrado</div>')):a(document).ready(function(){function b(){a(h+" .gfslider a:first-child").fadeOut(1e3).next("a").fadeIn(1e3).end().appendTo(h+" .gfslider")}function c(a){clearInterval(f),f=setInterval(b,a)}function d(){c(a(h+" .gfplay").hasClass("gfpausa")?"999999":e)}var f=setInterval(b,e);a(h+" .gfmas").click(function(){b(),d()}),a(h+" .gfmenos").click(function(){a(h+" .gfslider a:first-child").fadeOut(1e3),a(h+" .gfslider a:last-child").fadeIn(1e3).prependTo(h+" .gfslider"),d()}),a(h+" .gfplay").click(function(){a(this).hasClass("gfpausa")?a(this).removeClass("gfpausa").html("&#9658;"):a(this).addClass("gfpausa").html("||"),d()})})}).fail(function(){a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Usuario inexistente</div>')})})}})}(jQuery);<br />
//]]></script></div><br />
<div class="nota">Si tienes ya instalado jQuery la primera línea la tendrás que eliminar, ya que es la que precisamente carga esa librería. En cualquier caso, el plugin hay que situarlo tras la carga de jQuery para que funcione.</div><br />
<br />
<h3>Formato de salida (CSS)</h3><br />
El estilo abulta casi más que el plugin, pero es lo que hace que todo quede <i>muy monísimo</i>, así que es necesario. <br />
<br />
Lo podéis poner tal cual justo tras lo anterior para que en el caso de querer desinstalar todo os resulte más cómodo, pero tampoco estaría mal ponerlo en la parte del <span class="argot">skin</span> de la plantilla. En este último caso habría que quitar las etiquetas <span class="html">style</span> del principio y el final.<br />
<br />
<div class="vercodigo"><style><br />
.gfsliderwrap{position:relative;text-align:center;font-family:arial}<br />
.gfslider{position:relative;width:100%;height:0;padding-bottom:56.25%;border:0 solid #000;border-top:50px solid #000;border-bottom:50px solid #000;border-radius:10px;box-sizing:border-box;overflow:hidden;background:#000;font-size:0;line-height:0;text-align:center}<br />
.gfslider:before{content:"";display:inline-block;width:0;height:0;padding-bottom:56.25%;vertical-align:middle}<br />
.gfalbum{position:relative;top:30px;color:#fff;z-index:1;text-align:center;display:block;line-height:20px;font-size:18px}<br />
.gfslider a{display:none}<br />
.gfslider a:first-child{display:block}<br />
.gfslider img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;border:0;width:auto;height:100%;max-width:100%;max-height:100%}<br />
a.gfimagen:hover .gftitulo{display:inline-block}<br />
.gftitulo:before{content:"";width:0;height:100%;display:inline-block;vertical-align:middle}<br />
.gfaviso{display:inline-block;font-size:22px;line-height:24px;margin-bottom:2px;padding:10px;box-sizing:border-box;color:#eee;background:#900;text-align:center}<br />
a.gfmas,a.gfmenos,a.gfplay{display:inline-block;position:relative;bottom:40px;z-index:10;width:30px;height:30px;margin:0 10px;border-radius:50%;text-align:center;line-height:26px;font-size:30px;font-family:arial;color:#fff;background:rgba(255,255,255,.4);text-decoration:none;vertical-align:top}<br />
a.gfplay{font-size:18px;line-height:30px}<br />
.gfloading{display:inline-block;vertical-align:middle;width:80px;height:80px;margin:10px auto;border-width:30px;border-radius:50%;animation:spin 1s linear infinite;border-style:double;border-color:#ccc transparent;text-align:center}<br />
.gfloading:before{content:"CARGANDO";font-weight:700;font-size:12px;line-height:80px;color:#c00}<br />
@keyframes spin {100%{transform:rotate(359deg)}}<br />
</style></div><br />
<br />
<h3>Activar el plugin para mostrar la presentación</h3><br />
A partir de tener todo lo anterior en la plantilla (o en un gadget), simplemente tendremos que añadir lo siguiente en un gadget HTML/JavaScript. También podríais añadirlo en la plantilla si va a ser un elemento fijo y común a todas las entradas, pero por cuestiones de peso no lo recomendaría.<br />
<br />
Sólo hay que tener en cuenta que dónde pongamos esto será dónde saldrá el <i>slider</i>. <br />
<br />
<div class="vercodigo"><div id='sliderpica'></div><br />
<script><br />
$(document).ready(function() {<br />
$('<span style="color: #741b47;">#sliderpica</span>').gfotosgal('<span style="color: #b45f06;">113123294987767899361</span>', '<span style="color: #38761d;">Fotografía 2</span>', <span style="color: #0b5394;">20</span>, <span style="color: #990000;">3000</span>);<br />
<span style="color: #666666;">//$('ID_CAJA_SALIDA').gfotosgal('ID_USUARIO', 'NOMBRE_ALBUM', NUM_IMAGENES, VELOCIDAD);</span><br />
});<br />
</script></div><br />
El comentario que puse al final intenta explicar como activar el plugin, pero de todas formas lo comento:<br />
<br />
<ul><li>Lo primero que necesitamos es una caja vacía con una id (en el ejemplo <span class="css">#sliderpica</span>)</li>
<li>A continuación iría la llamada al plugin indicando en primer lugar el nombre (id) utilizado para esa caja vacía</li>
<li>Luego la función que activa todo y que he bautizado como <span class="html">gfotosgal</span></li>
<li>Finalmente los parámetros configurables. En este orden:</li>
<ul><li>número de usuario del propietario del álbum (ya vimos al principio del post como obtenerlo)</li>
<li>nombre de dicho álbum (literal, sensible a mayúsculas, minúsculas, acentos...)</li>
<li>número de imágenes máximas a cargar (el feed creo que soporta hasta 1000 y no es cuestión de leer todas innecesariamente)</li>
<li>velocidad de transición de las imágenes en milisegundos (en el ejemplo 3000 = 3 seg.).</li>
</ul></ul><br />
<br />
¿Y cómo generamos dos o más presentaciones simultáneas? Pues simplemente creamos dos cajas vacías, cada una con su propia id y luego llamamos al plugin otras tantas veces. Cada vez usando la id correspondiente y los parámetros que gustemos para cada cual:<br />
<br />
<div class="vercodigo"><div id='slider1'></div><br />
<div id='galeria2'></div><br />
<script><br />
$(document).ready(function() {<br />
// $('ID_CAJA_SALIDA').gfotosgal('ID_USUARIO', 'NOMBRE_ALBUM', NUM_IMAGENES, VELOCIDAD);<br />
$('#slider1').gfotosgal('113123294987767899361', 'Fotografía 2', 20, 3000);<br />
$('#galeria2').gfotosgal('113123294987767899361', 'Naturaleza', 20, 4000);<br />
});<br />
</script></div><br />
<br />
<h3>Observaciones</h3><br />
Este plugin sólo es para los álbumes que originalmente estuvieran en Picasa. Los que se hubieran creado directamente en Google+ o Google Fotos, no se pueden cargar con este código.<br />
<br />
Los álbumes privados y los auxiliares de fotos del perfil, Blogger, etc. tampoco se podrán cargar porque sólo son visibles para el propietario. En caso de duda abrir <a href="https://picasaweb.google.com/">la página de álbumes</a> sin estar <i>logueados</i> o con un navegador en modo incógnito, y así podréis ver fácilmente qué álbumes están disponibles de manera pública.<br />
<br />
Este código funcionará mientras el feed del que se aprovecha siga existiendo. Si alguna vez es eliminado ya no se podrán leer las imágenes. Se podrá sólo si es sustituido por otro con los datos necesarios, pero habría que modificar el plugin en la parte en la que se indica la dirección del feed a leer.<br />
<br />
<br />
<h3>Demo</h3><br />
Para que se vea que también funciona en el blog, ahí va la demostración para que no me digáis que sólo es un dragón.<br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script><!-- Plugin slider automático álbum Picasa --><script>//<![CDATA[
!function(a){a.fn.extend({gfotosgal:function(b,c,d,e){this.each(function(){var g=0,h="#"+a(this).attr("id"),i="https://photos.googleapis.com/data/feed/api/user/"+b+"?alt=json";a(h).append('<div class="gfsliderwrap"><div class="gfalbum">'+c+'</div><div class="gfslider"><div class="gfloading"></div></div></div>'),a.getJSON(i).done(function(b){a(h+" .gfsliderwrap").append('<a href="javascript:void();" class="gfmenos">‹</a><a href="javascript:void();" class="gfplay">►</a><a href="javascript:void();" class="gfmas">›</a>'),a.each(b.feed.entry||[],function(b,e){var f=e.title.$t||"";f===c&&(a(h+" .gfloading").remove(),g=1,a.getJSON(e.link[0].href).done(function(b){a.each(b.feed.entry||[],function(b,c){return b!=d&&void a(h+" .gfslider").append('<a target="_blank" href="'+c.link[1].href+'" class="gfimagen"><img src="'+c.content.src+'"/></a>')})}))}),0==g?(a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Álbum no encontrado</div>')):a(document).ready(function(){function b(){a(h+" .gfslider a:first-child").fadeOut(1e3).next("a").fadeIn(1e3).end().appendTo(h+" .gfslider")}function c(a){clearInterval(f),f=setInterval(b,a)}function d(){c(a(h+" .gfplay").hasClass("gfpausa")?"999999":e)}var f=setInterval(b,e);a(h+" .gfmas").click(function(){b(),d()}),a(h+" .gfmenos").click(function(){a(h+" .gfslider a:first-child").fadeOut(1e3),a(h+" .gfslider a:last-child").fadeIn(1e3).prependTo(h+" .gfslider"),d()}),a(h+" .gfplay").click(function(){a(this).hasClass("gfpausa")?a(this).removeClass("gfpausa").html("►"):a(this).addClass("gfpausa").html("||"),d()})})}).fail(function(){a(h+" .gfloading").remove(),a(h+" .gfslider").append('<div class="gfaviso">Usuario inexistente</div>')})})}})}(jQuery);
//]]></script><style>
.gfsliderwrap{position:relative;text-align:center;font-family:arial}
.gfslider{position:relative;width:100%;height:0;padding-bottom:56.25%;border:0 solid #000;border-top:50px solid #000;border-bottom:50px solid #000;border-radius:10px;box-sizing:border-box;overflow:hidden;background:#000;font-size:0;line-height:0;text-align:center}
.gfslider:before{content:"";display:inline-block;width:0;height:0;padding-bottom:56.25%;vertical-align:middle}
.gfalbum{position:relative;top:30px;color:#fff;z-index:1;text-align:center;display:block;line-height:20px;font-size:18px}
.gfslider a{display:none}
.gfslider a:first-child{display:block}
.gfslider img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;border:0;width:auto;height:100%;max-width:100%;max-height:100%}
a.gfimagen:hover .gftitulo{display:inline-block}
.gftitulo:before{content:"";width:0;height:100%;display:inline-block;vertical-align:middle}
.gfaviso{display:inline-block;font-size:22px;line-height:24px;margin-bottom:2px;padding:10px;box-sizing:border-box;color:#eee;background:#900;text-align:center}
a.gfmas,a.gfmenos,a.gfplay{display:inline-block;position:relative;bottom:40px;z-index:10;width:30px;height:30px;margin:0 10px;border-radius:50%;text-align:center;line-height:26px;font-size:30px;font-family:arial;color:#fff;background:rgba(255,255,255,.4);text-decoration:none;vertical-align:top}
a.gfplay{font-size:18px;line-height:30px}
.gfloading{display:inline-block;vertical-align:middle;width:80px;height:80px;margin:10px auto;border-width:30px;border-radius:50%;animation:spin 1s linear infinite;border-style:double;border-color:#ccc transparent;text-align:center}
.gfloading:before{content:"CARGANDO";font-weight:700;font-size:12px;line-height:80px;color:#c00}
@keyframes spin {100%{transform:rotate(359deg)}}
</style><br />
<div id='sliderpica'></div><script>
$(document).ready(function() {
$('#sliderpica').gfotosgal('113123294987767899361', 'Fotografía 2', 20, 3000);
//$('ID_CAJA_SALIDA').gfotosgal('ID_USUARIO', 'NOMBRE_ALBUM', NUM_IMAGENES, VELOCIDAD);
});
</script><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com4tag:blogger.com,1999:blog-7470192961806963601.post-2217394798570656832016-09-28T17:30:00.000+02:002016-11-13T15:19:56.598+01:00Botón para copiar URL en el portapapeles Hoy veremos una pequeña utilidad JavaScript para conseguir que al pulsar un determinado enlace (o botón), la dirección de la página que se esté visitando pase al portapapeles del lector. <br />
<br />
Con esto el visitante del sitio tendrá fácil posteriormente con un simple CTRL+V, pegar esa dirección dónde guste. Esto puede servirle para compartir manualmente la dirección de un post que le haya gustado en redes sociales, pasarlo a un bloc de notas, añadirlo a favoritos, etc.<br />
<br />
Tras ver el código básico, aplicaremos en él unas pequeñas modificaciones para conseguir algunos efectos adicionales y para finalizar indicaré cómo disponer el código para añadirlo a la colección de <a href="http://www.oloblogger.com/2014/07/botones-sociales-ligeros-peso.html">botones sociales ligeros de peso</a> que ya explicamos tiempo atrás.<a name='more'></a><br />
<br />
<div class="separator" style=" text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_PnucHCtp6BE6ihd4jOBok09rbQxFF__zRVTFAn3sUbguGe_8OFxfW8CE237EeeFqyfwSR2Cnr8NkKph4XZ-7wYnILlGnz-7pQLJUEHVc-oFoJHpbs5hsEPgaer8GFjV_zzMpZdTZ9Hk/s1600/copiar+url.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_PnucHCtp6BE6ihd4jOBok09rbQxFF__zRVTFAn3sUbguGe_8OFxfW8CE237EeeFqyfwSR2Cnr8NkKph4XZ-7wYnILlGnz-7pQLJUEHVc-oFoJHpbs5hsEPgaer8GFjV_zzMpZdTZ9Hk/s1600/copiar+url.jpg" /></a></div><br />
<br />
<h3>Código básico</h3><br />
El código básico es una función que añade a la página un nuevo elemento <span class="html">input</span> y lo rellena con el dato de la dirección que capta mediante <span class="html">window.location.href</span>. Posteriormente selecciona ese contenido, lo copia al portapapeles y por último elimina el <span class="html">input</span> creado para que no se vea.<br />
<br />
Una vez que tenemos montada esa función que he bautizado como <span class="cambiar">getlink()</span>, lo único que resta es crear un botón que ejecute esa función al hacer clic sobre él. <br />
<br />
Todo esto junto sería así, aunque si se va a usar con frecuencia lo mejor sería poner la parte JavaScript en plantilla:<br />
<div class="vercodigo"><a class="copi" href="javascript:getlink();">Copiar URL</a><br />
<br />
<script>//<![CDATA[<br />
function getlink() {<br />
var aux = document.createElement("input");<br />
aux.setAttribute("value",window.location.href);<br />
document.body.appendChild(aux);<br />
aux.select();<br />
document.execCommand("copy");<br />
document.body.removeChild(aux);<br />
}<br />
//]]></script></div><br />
Y el resultado sería este. Si pincháis en ese enlace y luego pegáis en cualquier sitio, os aparecerá la dirección de esta entrada.<br />
<br />
<a style="text-align:center;display:block;" href="javascript:getlinkb();">Copiar URL</a><script>//<![CDATA[
function getlinkb() {
var aux = document.createElement("input");
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
//]]></script><br />
<br />
<br />
Lo de añadirle una clase (en el ejemplo <span class="css">copi</span>), no es obligatorio, pero si conveniente si luego queremos que ese enlace simple se transforme en un botón añadiéndole CSS.<br />
<br />
<div class="vercodigo CSS">.copi {<br />
display: block;<br />
width: 120px;<br />
margin: 0 auto;<br />
padding: 10px;<br />
color: #ffffff;<br />
background: #990000;<br />
text-align: center;<br />
}</div><style>.copi2 {display: block;width: 120px;margin: 0 auto;padding: 10px;color: #ffffff;background: #990000;text-align: center;}</style><br />
<a class="copi2" href="javascript:getlinkb();">Copiar URL</a><br />
<br />
<h3>Un paso más. Eliminar algunos elementos de la dirección</h3><br />
La estructura de una URL es la siguiente:<br />
<br />
<div class="instrucciones"><span style="font-size: 80%;"><span style="color:blue;">[protocolo]</span>://<span style="color:red;">[dominio].[subdominio]</span>/<span style="color:green;">[ruta]/[recurso]</span>?<span style="color:orange;">[cadena de búsqueda]</span>#<span style="color:purple;">[hash]</span></span><br />
<br />
<span style="font-size: 80%;"><span style="color:blue;">http</span>://<span style="color:red;">www.oloblogger.com</span>/<span style="color:green">2010/02/generar-y-recuperar-cookies.html</span>?<span style="color:orange;">m=1</span>#<span style="color:purple;">c19290</span></span></div><br />
Como veis, en ella pueden aparecer algunos parámetros que modifican en algo el destino o incluso apuntan a una parte concreta del documento. Para el caso de que no nos interese que esos parámetros se compartan habría que añadir unos <span class="html">split</span> (resaltados) para recortar del dato capturado (URL completa) precisamente la cadena de búsqueda y el <i>hash</i> (en ese mismo orden en el ejemplo).<br />
<br />
<div class="vercodigo"><a class="copi" href="javascript:getlink();">Copiar URL</a><br />
<br />
<script>//<![CDATA[<br />
function getlink() {<br />
var aux = document.createElement("input");<br />
aux.setAttribute("value",window.location.href<span class="cambiar">.split('?')[0].split('#')[0]</span>);<br />
document.body.appendChild(aux);<br />
aux.select();<br />
document.execCommand("copy");<br />
document.body.removeChild(aux);<br />
}<br />
//]]></script></div><br />
<br />
<h3>Confirmar al usuario que ya tiene el enlace en su portapapeles</h3><br />
Para hacer más amigable el asunto y sobre todo, para que el usuario sepa que la información se ha transferido a su portapapeles ¿qué tal si añadimos un mensaje?<br />
<br />
La manera más sencilla es añadir un <span class="html">alert</span> que nos genere una ventana emergente. Lo pondríamos al final del todo añadiendo un mensaje de texto y la dirección que efectivamente se ha copiado:<br />
<br />
<div class="vercodigo"><a class="copi" href="javascript:getlink();">Copiar y avisar</a><br />
<br />
<script>//<![CDATA[<br />
function getlink() {<br />
var aux = document.createElement("input");<br />
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);<br />
document.body.appendChild(aux);<br />
aux.select();<br />
document.execCommand("copy");<br />
document.body.removeChild(aux);<br />
<span class="cambiar">alert("URL copiada al portapapeles\n\n" + window.location.href.split("?")[0].split("#")[0]);</span><br />
}<br />
//]]></script></div><br />
<a class="copi2" href="javascript:getlinka();">Copiar y avisar</a><script>//<![CDATA[
function getlinka() {
var aux = document.createElement("input");
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
alert("URL copiada al portapapeles\n\n" + window.location.href.split("?")[0].split("#")[0]);
}
//]]></script><br />
<br />
<br />
<br />
<h3>Toque final. Mensaje personalizado que desaparece pasado un tiempo</h3><br />
Esto ya va de hacer las cosas más monas. Lo anterior hace su función perfectamente pero las ventanas de JavaScript siempre recuerdan a los puñeteros <i>pop-up</i> no deseados, así que veamos como hacer una a nuestro estilo y que además desaparece sola automáticamente tras mostrarse lo suficiente.<br />
<br />
Con respecto al anterior código evidentemente eliminamos la línea antes añadida que contiene el <span class="html">alert</span>. De nuevo resalto lo que se ha añadido para este nuevo fin, que no es mas que instrucciones para crear un nuevo nodo con el CSS del mensaje y otro con el aviso propiamente dicho. La última línea sirve para que desaparezca pasados 2000 milisegundos, o sea, 2 segundos.<br />
<br />
<div class="vercodigo"><a href='javascript:getlink();'>Copiar URL</a><br />
<br />
<script>//<![CDATA[<br />
function getlink() {<br />
var aux = document.createElement("input");<br />
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);<br />
document.body.appendChild(aux);<br />
aux.select();<br />
document.execCommand("copy");<br />
document.body.removeChild(aux);<br />
<span class="cambiar">var css = document.createElement("style");<br />
var estilo = document.createTextNode("#aviso {position:fixed; z-index: 9999999; widht: 120px; top:30%;left:50%;margin-left: -60px;padding: 20px; background: gold;border-radius: 8px;font-size: 14px;font-family: sans-serif;}");<br />
css.appendChild(estilo);<br />
document.head.appendChild(css);<br />
var aviso = document.createElement("div");<br />
aviso.setAttribute("id", "aviso");<br />
var contenido = document.createTextNode("URL copiada");<br />
aviso.appendChild(contenido);<br />
document.body.appendChild(aviso);<br />
window.load = setTimeout("document.body.removeChild(aviso)", 2000);</span><br />
}<br />
//]]></script></div><br />
<br />
<a class="copi2" href="javascript:getlink3();">Copiar, avisar y desaparecer</a><br />
<br />
<script>//<![CDATA[
function getlink3() {
var aux = document.createElement("input");
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
var css = document.createElement("style");
var estilo = document.createTextNode("#aviso2 {position:fixed; z-index: 9999999; widht: 120px; top:30%;left:50%;margin-left: -60px;padding: 20px; background: gold;border-radius: 8px;font-size: 14px;font-family: sans-serif;}");
css.appendChild(estilo);
document.head.appendChild(css);
var aviso = document.createElement("div");
aviso.setAttribute("id", "aviso2");
var contenido = document.createTextNode("URL copiada");
aviso.appendChild(contenido);
document.body.appendChild(aviso);
window.load = setTimeout("document.body.removeChild(aviso2)", 2000);
}
//]]></script><br />
<br />
<br />
<h3>Opción: Todo el código en el propio botón</h3><br />
Para terminar, si queréis añadir este botón a los de la colección de <a href="http://www.oloblogger.com/2014/07/botones-sociales-ligeros-peso.html">botones sociales ligeros</a> sin necesidad de poner JavaScript aparte, sino todo dentro del enlace del botón tal y como hacíamos con los otros, esto será lo que tendréis que utilizar... exclusivamente.<br />
<br />
Con aviso básico (<span class="html">alert</span>)<br />
<div class="vercodigo"><!-- Copiar --><br />
<div class='copi'><br />
<a href='javascript:void();' onclick='var a=document.createElement(&quot;input&quot;);a.setAttribute(&quot;value&quot;,window.location.href.split(&quot;?&quot;)[0].split(&quot;#&quot;)[0]),document.body.appendChild(a),a.select(),document.execCommand(&quot;copy&quot;),document.body.removeChild(a);alert(&quot;URL copiada&quot;);'>Copy URL</a><br />
</div></div><br />
Con aviso que desaparece automáticamente<br />
<div class="vercodigo"><!-- Copiar --><br />
<div class='copi'><br />
<a href='javascript:void();' onclick='var a=document.createElement(&quot;input&quot;);a.setAttribute(&quot;value&quot;,window.location.href.split(&quot;?&quot;)[0].split(&quot;#&quot;)[0]),document.body.appendChild(a),a.select(),document.execCommand(&quot;copy&quot;),document.body.removeChild(a);var c=document.createElement(&quot;style&quot;),e=document.createTextNode(&quot;#av{position:fixed;z-index:999999;width:120px;top:30%;left:50%;margin-left:-60px;padding:20px;background:gold;border-radius:8px;font-size: 14px;font-family:sans-serif;text-align:center;}&quot;);c.appendChild(e),document.head.appendChild(c);var av=document.createElement(&quot;div&quot;);av.setAttribute(&quot;id&quot;,&quot;av&quot;);var c=document.createTextNode(&quot;URL copiada&quot;);av.appendChild(c),document.body.appendChild(av),window.load=setTimeout(&quot;document.body.removeChild(av)&quot;,2e3);'>Copy URL</a><br />
</div></div><br />
Para practicar podéis utilizar este <a href="http://codepen.io/oloman/pen/mAWPYx">CodePen</a>.<br />
<br />
<br />
<br />
<div class="actualizacion"><a href="http://www.oloblogger.com/2016/09/boton-para-copiar-url.html?showComment=1475333177243#c6933033803580432814">Jorge MG</a> llama mi atención sobre lo inútil del código para algunos navegadores, como por ejemplo Firefox. Bueno, el lo dice más educadamente pero lo cierto es que no sirve para todos los casos.<br />
<br />
Con su sugerencia he retocado el código y definitivamente este sería el que habría que usar en lugar del que está bajo el título "Toque final...".<br />
<br />
Nótese que el botón-enlace ya no tiene ninguna instrucción JavaScript y será un <span class="html">addEventListener</span>, asociado a un clic sobre el botón (<span class="html">mouseup</span>) el que detectará si se ha pinchado y lanzará la rutina. Esta forma de ordenar el comienzo es la que permite que el resto del código funcione en Firefox y otros.<br />
<br />
Además ahora el <span class="html">'copy'</span> se ejecuta dentro de un <span class="html">try</span>, para así detectar la eventualidad de que el sistema no funcione en el navegador y avise de ello. Lo demás prácticamente lo mismo, pero acortando un poco la inclusión de CSS para el aviso.<br />
<br />
<div class="vercodigo"><a class='copi' id='getlink' href='javascript:void();'>Copiar URL</a><br />
<br />
<script>//<![CDATA[<br />
var boton = document.getElementById('getlink');<br />
boton.addEventListener('click', function(e) {<br />
if(boton.id == 'getlink'){<br />
var aux = document.createElement('input');<br />
aux.setAttribute('value', window.location.href.split('?')[0].split('#')[0]);<br />
document.body.appendChild(aux);<br />
aux.select();<br />
try {<br />
document.execCommand('copy');<br />
var aviso = document.createElement('div');<br />
aviso.setAttribute('id', 'aviso');<br />
aviso.style.cssText = 'position:fixed; z-index: 9999999; top: 50%;left:50%;margin-left: -70px;padding: 20px; background: gold;border-radius: 8px;font-family: sans-serif;';<br />
aviso.innerHTML = 'URL copiada';<br />
document.body.appendChild(aviso);<br />
document.load = setTimeout('document.body.removeChild(aviso)', 2000);<br />
document.load = setTimeout('boton.id = "getlink"',2500);<br />
boton.id = '';<br />
} catch (e) {<br />
alert('Tu navegador no soporta la función de copiar');<br />
}<br />
document.body.removeChild(aux);<br />
}<br />
});<br />
//]]></script></div><br />
<br />
Y ahora sí, podéis probar incluso desde Firefox y funcionará bien el botón.<br />
<br />
<a class='copi2' id='getlink4' href='javascript:void();'>Copiar, avisar y desvanecer<br />
<i>Crossbrowser</i></a><script>//<![CDATA[
var botonb = document.getElementById('getlink4');
botonb.addEventListener('click', function(e) {
if(botonb.id == 'getlink4'){
var aux = document.createElement('input');
aux.setAttribute('value', window.location.href.split('?')[0].split('#')[0]);
document.body.appendChild(aux);
aux.select();
try {
document.execCommand('copy');
var aviso = document.createElement('div');
aviso.setAttribute('id', 'aviso');
aviso.style.cssText = 'position:fixed; z-index: 9999999; top: 50%;left:50%;margin-left: -70px;padding: 20px; background: gold;border-radius: 8px;font-family: sans-serif;';
aviso.innerHTML = 'URL copiada';
document.body.appendChild(aviso);
document.load = setTimeout('document.body.removeChild(aviso)', 2000);
document.load = setTimeout('botonb.id = "getlink4"',2500);
botonb.id = '';
} catch (e) {
alert('Tu navegador no soporta la función de copiar');
}
document.body.removeChild(aux);
}
});
//]]></script><br />
<br />
Para "todo el código dentro del propio botón", ahora sería exactamente igual que el anterior. Si acaso eliminando los espacios y saltos de línea que no son necesarios para que ocupe menos.<br />
<br />
El nuevo Codepen es <a href="http://codepen.io/oloman/pen/WGkrWp">http://codepen.io/oloman/pen/WGkrWp</a><br />
</div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com19tag:blogger.com,1999:blog-7470192961806963601.post-26332222756253469942016-08-23T18:15:00.000+02:002016-09-25T13:09:12.770+02:00Guía Blogger: Dónde incluir CSS, HTML y JavaScriptEsta es una cuestión que genera muchas dudas entre los usuarios no familiarizados con la programación web y especialmente en Blogger por sus particularidades. En este post os daremos unas pinceladas sobre la ubicación correcta para que este tipo de códigos funcionen como deben.<br />
<br />
El código se puede insertar en principio en todas partes (plantilla, gadgets y entradas-páginas estáticas), pero cada cual en su sitio y, en ocasiones, incluyendo algunas etiquetas especiales para el caso.<br />
<br />
<br />
Aunque luego lo iré repitiendo, en la plantilla Blogger se pueden distinguir varias partes en cuanto a estructura. Son estas:<br />
<br />
<ul><li><b>Cabecera</b>: Delimitada por las tags <span class="html"><head></span> y <span class="html"></head></span></li>
<ul><li><i>Primera zona cabecera</i>: Lo que hay entre las etiquetas <span class="html"><head></span> y <span class="html"><b:skin><![CDATA[/*</span></li>
<li><i>CSS</i>: Delimitada por las tags <span class="html"><b:skin><![CDATA[/*</span> y <span class="html">]]></b:skin></span></li>
<li><i>Segunda zona cabecera</i>: Deliminada por <span class="html">]]></b:skin></span> y <span class="html"></head></span></li>
</ul><li><b>Cuerpo</b>: Delimitado por las tags <span class="html"><body></span> y <span class="html"></body></span></li>
</ul><br />
<br />
En este esquema os anticipo dónde puede incluirse cada tipo de código y más adelante ya lo desarrollo.<a name='more'></a><br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-tmyQlgCBCIONmlhpSAi7XdxOLP-2k19-zQez8YDUcCwzjjVnBLoQJlTlOnNruUsJByilViJTCILeANjA-3bPSkpLrh2GrKn71Gh_RtKu4nWyXMXdLVKlr1c3bfgySH3-DVXhR_zqGQ/s1600/estructura+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Ubicación de los distintos tipos de código en Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-tmyQlgCBCIONmlhpSAi7XdxOLP-2k19-zQez8YDUcCwzjjVnBLoQJlTlOnNruUsJByilViJTCILeANjA-3bPSkpLrh2GrKn71Gh_RtKu4nWyXMXdLVKlr1c3bfgySH3-DVXhR_zqGQ/s1600/estructura+blogger.jpg" title="Ubicación de los distintos tipos de código en Blogger" /></a></div><br />
<br />
<h3>CSS</h3><br />
El CSS es lo que da formato a una página web, es decir, lo que configura su aspecto en cuanto a colores, fuentes, alineación, márgenes, etc.<br />
<br />
Aunque se puede añadir <i>inline</i> en las entradas, su inclusión en la plantilla ofrece la gran ventaja de que si en el futuro cambiamos algo (la tipografía, por ejemplo), no necesitaremos ir entrada por entrada para cambiar eso mismo en todas y cada una de las ya publicadas. Simplemente cambiaríamos las propiedades CSS pertinentes en la plantilla y automáticamente se cambiará el estilo para todas las entradas.<br />
<br />
Los sitios dónde podemos incluir este tipo de código son los siguientes.<br />
<br />
<h4>1</h4>El lugar natural para el código CSS en Blogger lo encontramos en la plantilla, entre las etiquetas <span class="html"><b:skin><![CDATA[/*</span> y la de cierre <span class="html">]]></b:skin></span>.<br />
<br />
Si editáis la plantilla (<span class="argot">Plantilla >> Edición HTML</span>) y miráis las tripas, comprobaréis que hay muchas cosas entre ambas. Todo eso es el CSS, lo que marca el aspecto de vuestro blog. <b>En esa zona no puede ir otro tipo de código</b>.<br />
<br />
<h4>2</h4>También se puede añadir CSS desde <span class="argot">Plantilla >> Personalizar >> Avanzado >> Añadir CSS</span>. Esta opción pudiera no funcionar en plantillas personalizadas si sus autores no previeron su uso mediante la aplicación de variables.<br />
<br />
<h4>3</h4>Si se quiere añadir CSS en otra sección de la plantilla que no sea entre las etiquetas <span class="argot">SKIN</span> antes mencionadas, entonces será necesario insertarlo entre los tags <span class="html"><style></span> y <span class="html"></style></span>. Ejemplo:<br />
<br />
<div class="vercodigo CSS"><style><br />
.caja {<br />
width: 100px;<br />
background-color: black;<br />
border: 1px solid red;<br />
}<br />
</style></div><br />
Con los tags <span class="argot">STYLE</span> se podría añadir CSS tanto en la primera zona de la cabecera, como en la segunda. También en el <span class="argot">BODY</span> y finalmente en un gadget HTML/JavaScript<br />
<br />
<h4>4</h4>Otra opción sería crear un fichero .css en texto plano con todas las reglas CSS (sin necesidad de las tags <span class="argot">STYLE</span>), alojarlo en algún hosting bajo vuestro control y luego añadirlo a la plantilla cargándolo mediante el tag <span class="argot">LINK</span> y la <span class="argot">URL</span> correspondiente al fichero. Ejemplo:<br />
<br />
<div class="vercodigo HTML"><link href="http://loquesea.com/estilo.css" rel="stylesheet" type="text/css"/></div><br />
Si se hace de esta manera, el lugar de la plantilla correcto sería en la primera zona de la cabecera, es decir, entre <span class="html"><head></span> y <span class="html"><b:skin><![CDATA[/*</span>.<br />
<br />
<h4>5</h4>En las entradas se puede usar CSS, pero siempre incorporándolo entre etiquetas <span class="html"><style></span>. Este CSS sólo se aplicará a la entrada concreta dónde lo grabemos.<br />
<br />
<br />
<br />
<h3>HTML</h3><br />
Cualquier instrucción HTML debe ir necesariamente en el BODY de la página. Para ello hay varias opciones.<br />
<br />
<h4>1</h4><span class="argot">Plantilla >> Edición HTML</span><br />
Entre las etiquetas <span class="html"><body></span> y <span class="html"></body></span>, cualquier código HTML funcionará sin problemas.<br />
<br />
<h4>2</h4><span class="argot">Diseño >> Añadir gadget >> Tipo HTML/JavaScript</span><br />
En este tipo de gadgets se puede añadir HTML sin ninguna restricción, ya que al incorporarse a la plantilla Blogger esta lo situará dentro de las antes mendionadas etiquetas <span class="argot">BODY</span>.<br />
<br />
<h4>3</h4>Igual ocurre con las entradas. Se puede teclear directamente HTML en las entradas y funcionará correctamente, ya que el cuerpo de las entradas (<span class="css">.post</span>) forma parte del <span class="argot">BODY</span>. Como ocurría con el CSS, el HTML que incorporemos a una entrada será sólo visible para esa entrada concreta.<br />
<br />
<div class="nota">Hay algunas tags HTML que se añaden a la primera zona de la cabecera, pero son contenidos que no forman parte de la estructura de la página, sino simplemente informativas. Por ejemplo, entre <span class="html"><head></span> y <span class="html"><b:skin><![CDATA[/*</span> es dónde se añaden las <span class="argot">META</span>, <span class="argot">LINK</span>, <span class="argot">TITLE</span> y otras de similar utilidad.</div><br />
<br />
<br />
<h3>JavaScript</h3><br />
El código JavaScript funciona en gadgets tipo HTML/JavaScript y en cualquier parte de la plantilla excepto en la natural reservada para el CSS. Es decir, <b>NO funcionará si lo insertamos entre las tags <span class="html"><b:skin><![CDATA[/*</span> y <span class="html">]]></b:skin></span></b>. En cualquier otra parte, sin problemas.<br />
<br />
Sin embargo <b>siempre es necesario teclearlo (o pegarlo) entre etiquetas <span class="html"><script></span> y <span class="html"></script></span></b>. Bueno, casi siempre porque también se puede cargar externamente. Las opciones por tanto son:<br />
<br />
<h4>1</h4>Se puede añadir JavaScript tanto en la primera zona del HEAD como en la segunda. Es decir, lo podemos añadir o bien entre <span class="html"><head></span> y <span class="html"><b:skin><![CDATA[/*</span> o bien entre <span class="html">]]></b:skin></span> y <span class="html"></head></span>, aunque lo recomendable es hacerlo en la segunda zona.<br />
<br />
<h4>2</h4>El BODY admite JavaScript sin restricciones (entre <span class="html"><body></span> y <span class="html"></body></span>)<br />
<br />
<h4>3</h4>También se puede añadir justo tras el <span class="argot">BODY</span>, o sea, entre <span class="html"></body></span> y <span class="html"></html></span>. Esto será necesario siempre que el JS tenga que actuar una vez se haya cargado toda la página, por ejemplo para modificar algo de lo "pintado" por el HTML.<br />
<br />
<h4>4</h4>Dentro de un gadget HTML/JavaScript (evidente ¿no?). Estos gadgets forman parte del <span class="argot">BODY</span> y por eso no hay tampoco problemas.<br />
<br />
<h4>5</h4>Las entradas también admiten JavaScript, aunque se debe teclear desde la pestaña HTML del editor sin pasar a la de <span class="argot">Redactar</span>. <br />
<br />
Si se hace desde <span class="argot">Redactar</span>, en ocasiones se generan saltos de línea que rompen parte del código e impiden su buen funcionamiento. Para evitar problemas se debe publicar el post sin pasar ni una sola vez por <span class="argot">Redactar</span>. Si no tienes más remedio, antes de publicar revisa que el JS no se ha alterado. Para ver cómo quedará el post usa <span class="argot">Vista Previa</span>, aunque según el tipo de código que utilices, podrías no ver sus resultados en ese tipo de Vista.<br />
<br />
Como con el HTML y el CSS, el JavaScript incorporado directamente a una entrada, sólo actuará para esa entrada. <br />
<br />
<h4>6</h4>Al igual que el CSS, el JavaScript se puede cargar desde un fichero externo. En ese caso habría que utilizar una de las siguientes estructuras. La podréis insertar en cualquiera de las zonas del blog antes mencionadas (1 a 5):<br />
<br />
<div class="vercodigo JS"><script src='http://loquesea.com/codigo.js'></script><br />
<script src='http://loquesea.com/codigo.js'/></div><br />
Si en alguna parte de la plantilla no os funciona la primera opción, probad con la segunda. Es que Blogger a veces es muy sensible :)<br />
<br />
<div class="nota">Salvo en el caso de ficheros externos, para los que no hace falta, si queréis que el código JavaScript os funcione SIEMPRE sin problemas en Blogger, tendréis que añadir unos caracteres especiales. Eso os permitirá usar JS de manera cómoda, sin tener que preocuparos por cosas como el uso de comillas dobles o simples o por los caracteres que se podrían confundir con otros de HTML como <span class="html"><</span> y <span class="html">></span>.<br />
<br />
Dichos caracteres son los marcados en negrita y deben quedar anidados dentro de las tags <span class="argot">SCRIPT</span><br />
<br />
<div class="vercodigo"><script><br />
<b>//<![CDATA[</b><br />
<span class="cambiar">CODIGO JAVASCRIPT</span><br />
<b>//]]></b><br />
</script></div></div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com18tag:blogger.com,1999:blog-7470192961806963601.post-86456260780951244582016-08-16T17:30:00.000+02:002016-08-16T17:30:27.927+02:00Nuevo sitemap para páginas estáticas Blogger. Solicitar indexación a GoogleOtra cosilla que aparece sin avisar. En esta ocasión se trata de un <i>sitemap</i> para las páginas estáticas.<br />
<br />
Si bien hace algún tiempo que se empezó a generar automáticamente <a href="http://www.oloblogger.com/2015/01/nuevo-sitemap-xml-para-blogger.html">uno para las entradas</a>, las páginas no estaban incluidas en él.<br />
<br />
El <i>sitemap</i> está disponible en la dirección <b>http://<span class="cambiar">URL_BLOG</span>/sitemap-pages.xml</b>. De esta manera para www.oloblogger.com, el <i>sitemap</i> será <a href="http://www.oloblogger.com/sitemap-pages.xml">http://www.oloblogger.com/sitemap-pages.xml</a>. En el enlace podréis ver el mío.<a name='more'></a><br />
<br />
A veces interesará tenerlo y otras no, ya que las páginas estáticas algunos las usamos como recurso para ciertos truquillos. Si os habéis fijado, en mi <i>sitemap</i> sale una página que nadie visita por su poca utilidad: <a href="http://www.oloblogger.com/p/mensaje-enviado.html">http://www.oloblogger.com/p/mensaje-enviado.html</a><br />
<br />
Exacto. Es una página que aparece tras rellenar un formulario que tengo por ahí y sólo sirve para avisar al visitante de que todo se ha enviado bien. Su contenido, como decía, no tiene ningún interés y seguramente no interese indexarla.<br />
<br />
<hr /><br />
Así las cosas, dependiendo del uso que cada cual le de sus páginas, interesará más o menos ayudar a que Google las indexe. Lo siguiente es para los primeros (para los que les interese más) y es un pequeño tutorial sobre cómo subir un sitemap de este tipo (.xml) a Search Console (antes Webmasters Tools).<br />
<br />
<br />
<div class="instrucciones"><ol><li>Acceder a Search Console: <a href="https://www.google.com/webmasters/tools/home">https://www.google.com/webmasters/tools/home</a>. Hacer <i>login</i> si es necesario<br />
<br />
</li>
<li>Si se tienen varios blogs dados de alta, escoger de la lista que aparecerá aquel para el que queremos subir el <i>sitemap</i><br />
<br />
</li>
<li>En el menú de la izquierda y dentro del apartado <span class="argot">Rastreo</span>, seleccionamos la opción <span class="argot">Sitemap</span><br />
<br />
</li>
<li>A continuación el contenido de la pantalla cambia. Buscamos arriba a la derecha el botón <span style="background-color: #c53727; color: white; display: inline-block; font-family: "arial" , "helvetica" , sans-serif; font-size: 11px; font-weight: bold; line-height: 27px; padding: 0px 5px; text-align: center; text-transform: uppercase;">AÑADIR O PROBAR SITEMAP</span>. Lo pinchamos.<br />
<br />
</li>
<li>Observaréis que se abre una pequeña ventana. La dirección del blog saldrá sola, así que lo único que hay que hacer es teclear <span class="cambiar">sitemap-pages.xml</span>.<br />
<br />
</li>
<li>Podemos hacer una prueba para ver cuántas páginas se leen, pero como confío en vosotros y sé que todo lo habéis hecho bien, directamente pinchad en <span style="background-color: #4d90fe; border-radius: 2px; color: white; display: inline-block; font-family: "arial" , "helvetica" , sans-serif; font-size: 11px; font-weight: bold; line-height: 27px; padding: 0px 10px;">Enviar</span><br />
<br />
</li>
<li>Sale un mensaje de confirmación... y eso es todo<br />
</li>
</ol></div><br />
<br />
A continuación un gráfico-resumen para los que tengan más desarrollada la capacidad visual que la lectora.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_nBy1g8gpumqPN7Hw0C-45araOoq8Rr4b0RYqTqqvQO9fpU32OD35Y8B9DNexsu9VJRp_Ha9kyYN03kgjTSBJrSpuOdOPjZYEZWx8-Ieql5G-h6CvuGwy7wTuOdCzrRw22QGjY_xetw/s1600/sitemap+search+console.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_nBy1g8gpumqPN7Hw0C-45araOoq8Rr4b0RYqTqqvQO9fpU32OD35Y8B9DNexsu9VJRp_Ha9kyYN03kgjTSBJrSpuOdOPjZYEZWx8-Ieql5G-h6CvuGwy7wTuOdCzrRw22QGjY_xetw/s1600/sitemap+search+console.jpg" /></a></div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com14tag:blogger.com,1999:blog-7470192961806963601.post-85210749734849627582016-08-08T16:45:00.000+02:002016-08-08T16:45:03.414+02:00Reordenando las cajas de la plantilla para que salgan todas las fechasPara ir montando las entradas y sus elementos, la estructura de la plantilla Blogger va anidando cajas HTML de manera natural, pero con un criterio algo extraño.<br />
<br />
La caja exterior con el nombre de clase <span class="css">date-outer</span> tiene como cajas hijo a la que contiene la fecha (<span class="css">date-header</span>) y a la <span class="css">date-posts</span>. Dentro de esta aparece la <span class="css">post-outer</span> que contiene ya directamente <span class="css">post</span> y las que corresponden al resto de componentes de las entradas (fecha, cabecera, cuerpo y pie).<br />
<br />
El caso es que la fecha se queda fuera y separada del resto, pero es porque Blogger incorpora una serie de condiciones que hacen que <b>si dos o más entradas tienen la misma fecha, todas ellas quedan dentro bajo una única fecha y caja(<span class="html">date-outer</span>).</b><a name='more'></a><br />
<br />
El dibujo de más abajo ilustra esto porque describirlo con palabras puede resultar algo lioso, pero para tenerlo más claro os remito a otra entrada que ya escribí hace un tiempo con el título <a href="http://www.oloblogger.com/2012/10/agrupar-desagrupar-posts-blogger.html">Blogger agrupa los posts por fecha; nosotros los desagrupamos</a>. Allí describí el asunto con más detalle incluyendo una serie de esquemas gráficos que creo ayudan bastante a entender el origen del problema y la alternativa que propongo.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmEYS9VQAw3O1jBDC8YmQTimDAbv1sMWi9BXi_m7CsUih2byMtrbeRtaOjMPgR9h84RPJSO-grP7Kq9jP3THkL9XIMreTERptmihk1P5NfJ5Y5qwWBKCh-q-bK5z4uTELkqvO8f07Wnw/s1600/estructura+html+entradas+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Estructua HTML de los posts en Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmEYS9VQAw3O1jBDC8YmQTimDAbv1sMWi9BXi_m7CsUih2byMtrbeRtaOjMPgR9h84RPJSO-grP7Kq9jP3THkL9XIMreTERptmihk1P5NfJ5Y5qwWBKCh-q-bK5z4uTELkqvO8f07Wnw/s1600/estructura+html+entradas+blogger.jpg" title="Estructua HTML de los posts en Blogger" /></a></div><br />
<br />
<br />
<b>La estructura original descrita es bastante incordiante</b> para, por ejemplo, cuando queremos maquetar una plantilla con sumarios y hacer que se muestren en filas de a dos, tres, etc. Para ello lo lógico sería configurar esos bloques con CSS atacando la clase exterior <span class="css">date-outer</span>, pero eso de que dos o más posts pudieran estar dentro de ella nos hace casi imposible la tarea. Si bajamos a la siguiente caja <span class="css">post-outer</span>, entonces nos pasará tres cuartos de lo mismo. Todo por culpa de que unas veces se agrupen las entradas y otras no.<br />
<br />
<br />
Por otra parte está el problemilla de que <b>la fecha sólo sale en en el primer post de cada conjunto de entradas publicadas el mismo día</b>. Podríamos pensar que con solucionar lo anterior lograríamos mostrar la fecha en todas las entradas, pero como Blogger sólo la almacena para el primer post de cada tanda, pues necesitamos algo más. Ya que estamos por esta parte de la plantilla añadiremos un pequeño JavaScript para mostrar la fecha en todos los casos y así terminamos de solucionar ambas cosas.<br />
<br />
<br />
En el artículo que enlacé al principio ya indiqué cómo hacer esto pero como el código de Blogger ha sufrido actualizaciones, también lo actualizamos por aquí, incorporando lo del JS.<br />
<br />
<br />
Para eliminar esas condiciones que generan la agrupación de posts y solucionar también lo de las fechas, <b>hay que localizar este trozo de código</b> en la plantilla (<span class="argot">Edición HTML</span>). Si no lo encontráis en la vuestra es simplemente porque este código es el de las plantillas estándar <i>Clásicas</i>... no las personalizadas con nombres de clases distintos, no las del <i>Nuevo Diseñador</i>, no las <i>Dinámicas</i>. A estas últimas la verdad es que les sigo teniendo manía, así que no preguntéis por ellas.<br />
<br />
<div class="vercodigo HTML"><pre><b:if cond='data:mobile == &quot;false&quot;'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<span>
<data:post.dateHeader/>
</span>
</h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
</div></pre></div><br />
<br />
Una vez lo tengáis localizado lo que vamos a hacer es quitar esas condiciones que comprueban si estamos (o no) en el primer post de una tanda de varios con la misma fecha y así todos tendrán la misma estructura.<br />
<br />
Adicionalmente pondremos un código JS que guardará la última fecha utilizada y en el caso de que el próximo post no tuviera fecha (lo que ocurre cuando hay más un de un post por día) acudiremos a la que hemos guardado anteriormente y la "pintaremos".<br />
<br />
Para poner todo esto lo único que hay que hacer es <b>sustituir todas esas líneas antes indicadas, por estas otras</b>. No olvides guardar una <u>copia de seguridad</u> de tu plantilla antes de hacer cambios de este tipo.<br />
<br />
<div class="vercodigo HTML"><pre><b:if cond='data:mobile == &quot;false&quot;'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<div class='date-outer'>
<span class="destacar"><b:if cond='data:post.dateHeader'>
<script type='text/javascript'>var ultfecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
<b:else/>
<h2 class='date-header'>
<script type='text/javascript'>document.write(ultfecha);</script>
</h2>
</b:if></span>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div></pre></div><br />
<br />
Y ya está. Dos problemas solucionados de una tacada Ahora saldrán todas las fechas de todas las entradas y para poder maquetar los posts para sumarios (o similar), sólo tendremos que actuar con CSS sobre la clase <span class="css">date-outer</span>.<br />
<br />
<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com2tag:blogger.com,1999:blog-7470192961806963601.post-44013430551599092452016-07-13T16:30:00.000+02:002016-07-13T19:57:23.304+02:00Más imágenes que se obtienen a partir de una solaHace ya mucho tiempo que hablé largo y tendido sobre una de las principales ventajas de usar Blogger y que no es otra que el tratamiento que esta plataforma le da a las imágenes. Creo que incluso he repetido discurso más de una vez.<br />
<br />
El caso es que cuando subimos una imagen, automáticamente <a href="http://www.oloblogger.com/2012/02/la-ventaja-de-subir-una-sola-imagen-y.html">quedan almacenadas infinidad de réplicas con distintos tamaños y formatos</a> (recortes en este último caso evidentemente). Bueno supongo que realmente no son réplicas sino la original, pero que podemos "llamar" para ser mostrada en web con unas dimensiones concretas -casi todas las que se nos antoje- simplemente cambiando algunos de sus parámetros.<a name='more'></a><br />
<br />
La clave está siempre en el último subdirectorio de la dirección de la imagen, el que está justo antes de su nombre. Sería esto que he destacado (<span class="cambiar"><b>s1600</b></span>) en la URL de la imagen original que usaré para los ejemplos de imágenes apaisadas:<br />
<br />
<div class="vercodigo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>s1600</b></span>/paths+crossing.jpg"/></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMxy8Clq2hpKmartOW6b_p4g_YQV9elqFb3gFrcoFeR8YxA-Rw_mYKrteWl51rDELx4st1q3Lee0ILLdu-XZkjfnbJcDjdt5tNpJ18tALzSKoyPhLiVidqUT9Y-Z10XTkYaAVc2cM9KxE/s1600/imagenes+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMxy8Clq2hpKmartOW6b_p4g_YQV9elqFb3gFrcoFeR8YxA-Rw_mYKrteWl51rDELx4st1q3Lee0ILLdu-XZkjfnbJcDjdt5tNpJ18tALzSKoyPhLiVidqUT9Y-Z10XTkYaAVc2cM9KxE/s640/imagenes+blogger.jpg" width="640" /></a></div><br />
<br />
<a href="http://www.oloblogger.com/2012/02/la-ventaja-de-subir-una-sola-imagen-y.html">Como vimos en su momento</a>, simplemente cambiando el número 1600 (tamaño original) de ese directorio por otro inferior, obtendremos una imagen más pequeña de ancho o alto (lo mayor) igual a ese nuevo número que usemos. Por ejemplo, con un s240 obtendremos una de ancho 240px y cuya altura se recalculará automáticamente para respetar sus proporciones originales y que no se deforme.<br />
<br />
<div class="vercodigo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>s240</b></span>/paths+crossing.jpg"/></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s1600/paths+crossing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s240/paths+crossing.jpg" width="240" /></a></div><br />
<br />
Dije que se le da prioridad a la medida mayor, así que si subimos una imagen más alta que ancha lo que ocurrirá con el parámetro <span class="cambiar"><b>s240</b></span> cuando lo apliquemos sobre ese tipo de imágenes, sucederá eso, que la imagen que se verá tendrá 240px de alto y el ancho se recalculará automáticamente.<br />
<br />
<br />
<div class="vercodigo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/<span class="cambiar"><b>s240</b></span>/comedy%2Bwildlife%2B8.jpg"/></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/s1600/comedy+wildlife+8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/s240/comedy+wildlife+8.jpg" /></a></div><br />
<hr/>A partir de ahí vimos <a href="http://www.oloblogger.com/2012/02/la-ventaja-de-subir-una-sola-imagen-y.html">otras opciones</a> como los recortes cuadrados y otro tipo de curiosos parámetros que ya no repetiré ahora. Sólo explicaré algunos "nuevos" que surgieron posteriormente a la publicación de aquel post. Esos nuevos seguramente provienen de la la fase previa a la <a href="http://googlephotos.blogspot.com.es/2016/02/moving-on-from-picasa.html">integración de Picasa en Google Fotos</a>. Son los siguientes:<br />
<br />
<br />
<h4>w300 | Prioridad siempre al ancho</h4><br />
La cifra marcará en cualquier caso el ancho de la imagen y la altura se recalculará automáticamente.<br />
<br />
<div class="vercodigo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>w300</b></span>/paths+crossing.jpg"/><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/<span class="cambiar"><b>w300</b></span>/comedy%2Bwildlife%2B8.jpg"/></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s1600/paths+crossing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/w300/paths+crossing.jpg" /></a></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/s1600/comedy+wildlife+8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/w300/comedy+wildlife+8.jpg" /></a></div><br />
<h4>h300 | Prioridad siempre a la altura </h4><br />
A la inversa. La cifra marcará en cualquier caso el ALTO de la imagen y el ANCHO se recalculará automáticamente.<br />
<br />
<div class="vercodigo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>h300</b></span>/paths+crossing.jpg"/><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/<span class="cambiar"><b>h300</b></span>/comedy%2Bwildlife%2B8.jpg"/></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s1600/paths+crossing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/h300/paths+crossing.jpg" /></a></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/s1600/comedy+wildlife+8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/h300/comedy+wildlife+8.jpg" /></a></div><br />
<br />
<h4>w300-h200 | Max-Width / Max-Height</h4><br />
Si definimos los dos parámetros la imagen tendrá un el valor de alto o ancho que permita no superar ninguno de los especificados. De esta manera, si un ancho de 300px supusiera un alto mayor de 200px, se tomaría este último como prioridad... y viceversa.<br />
<br />
<div class="vercodigo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>w300-h200</b></span>/paths+crossing.jpg"/><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/<span class="cambiar"><b>w300-h200</b></span>/comedy%2Bwildlife%2B8.jpg"/></div><br />
Las dos imágenes tendrán una altura de 200px porque si fueran de un ancho igual a 300px, el alto superaría el máximo establecido de 200px. <br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s1600/paths+crossing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/w300-h200/paths+crossing.jpg" /></a></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/s1600/comedy+wildlife+8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/w300-h200/comedy+wildlife+8.jpg" /></a></div><br />
<h4>w300-h250-c | Max-Width / Max-Height / Recorte</h4><br />
En este caso la imagen resultante será exactamente de las medidas indicadas por lo que, para que no se deforme, si es necesario se producirá un recorte de la parte central.<br />
<br />
<br />
<div class="vercodigo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>w300-h250-c</b></span>/paths+crossing.jpg"/><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/<span class="cambiar"><b>w300-h250-c</b></span>/comedy%2Bwildlife%2B8.jpg"/></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s1600/paths+crossing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/w300-c-h250/paths+crossing.jpg" /></a></div><br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/s1600/comedy+wildlife+8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiko_rUUKBwAFS4xU2VPOnZnYpywkRcVNYnmdzVcXF7F2VhQIRkSOyfC6eKWDrw7s7hRHUHCZzvlJ5k97XXCRO2zf7cC4gsPSt7O_GbasIxWb2mWDl1_Gg4G0edz8VnFpfktx4vDvYltGE/w300-c-h250/comedy+wildlife+8.jpg" /></a></div><br />
<br />
Si las dos medidas son iguales el efecto será el mismo que si usáramos <span class=cambiar"><b>sXXX-c</b></span>, es decir, un recorte cuadrado.<br />
<br />
<br />
<h4>s300-d | Descarga</h4><br />
Un parámetro para que la URL de una imagen no nos lleve a la propia imagen, sino que la descargue (download).<br />
<br />
<div class="vercodigo"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>w800-d</b></span>/paths+crossing.jpg"><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/<span class="cambiar"><b>s400-c</b></span>/paths+crossing.jpg" /><br />
</a></div><br />
La primera dirección (en el enlace) nos descargará una imagen de 800px de ancho y la segunda (en <span class="html">img</span>) mostrará una cuadrada de 400px. Pincha en ella para comprobarlo. <br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s800-d/paths+crossing.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqL6vYuSPsejAVzNco1EldIrO5EuyLv7pXgWOcUIlqY13FNeAN1Yz3NQYVpJ7rJhyXgtCk9mwngwMi42RBOYoKmQbfjyzwnvb37ZwJhPzZTYbH0iFmODHTQpBnxCtLtP8Bcllrw00iJ_pC/s400-c/paths+crossing.jpg" /></a></div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com12tag:blogger.com,1999:blog-7470192961806963601.post-3336679373644566942016-06-23T16:29:00.000+02:002016-06-23T16:29:02.678+02:00Sencillo botón externo play/stop para vídeos de YouTubeExiste una <a href="https://www.youtube.com/yt/dev/es/">API para manejar los vídeos de YouTube</a> a placer. Con ella se puede cargar cualquier vídeo o lista sólo contando con su identificador, cambiar el tamaño del artilugio, fijar el punto de inicio de reproducción, administrar el volumen, crear unos controles de reproducción externos, etc.<br />
<br />
Pero además de que hay que cargar una librería especial para poder hacer todo eso, tampoco es tarea sencilla manejar todo (<a href="https://developers.google.com/youtube/youtube_player_demo?hl=es">demo</a>), así que para poder hacer algo <i>nivel torpe</i>, se me ocurrió un sistema muy sencillo para generar al menos algo básico pero muchas veces útil: <b>un botón externo que arranca o para el vídeo</b>... o varios botones si hay varios vídeos.<a name='more'></a><br />
<br />
Como ya va siendo habitual tener <b>jQuery<b></b></b> el código está montado con un pequeño JavaScript aprovechando esta librería. El resto lo hace el CSS y con él el botón será como este que ve veis a la derecha y que podéis pinchar para ver como se arranca o reinicia el vídeo que está más abajo.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmu4shHt6sdr-gsje0Df8-TMp_XJxS_9EhC10EADVbENSIibDUePbc98WgEpMTf9c9sbVc2oPS8PUOIFyPORrjQ8VSrqvUyCWmyqhWNr3AY_1L9pvbimmbVOiRN9kHR4ChtDL13jG3uc/s1600/control+externo+youtube.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmu4shHt6sdr-gsje0Df8-TMp_XJxS_9EhC10EADVbENSIibDUePbc98WgEpMTf9c9sbVc2oPS8PUOIFyPORrjQ8VSrqvUyCWmyqhWNr3AY_1L9pvbimmbVOiRN9kHR4ChtDL13jG3uc/s640/control+externo+youtube.jpg" /></a></div><br />
<br />
El truco que usaré es muy simple. Se trata de crear automáticamente un botón que activa una función para <b>leer la dirección del vídeo, añadirle un <span class="argot">autoplay</span> y cambiarla por la original en el <span class="html">iframe</span></b>. De esa manera el vídeo empieza a correr al pulsar el botón. Si se pulsa por segunda vez se realiza la misma tarea pero quitando el <span class="argot">autoplay</span> para que el vídeo vuelva a su estado original, es decir, parado esperando instrucciones para comenzar.<br />
<br />
¿Funciona la pausa? No. ¿Funcionan otras cosas distintas del play/stop? No. Se trata de un código sencillo que sólo hace esto último.<br />
<br />
El código en cuestión es el siguiente y en Blogger puede ir todo seguido en la plantilla, justo antes de <span class="html"></head></span>.<br />
<br />
<div class="vercodigo CSS"><style><br />
.yt-play{position:fixed;top:50%;right:25%;z-index:99;font-family:arial;width:40px;height:30px;background:#cd201f;display:block;margin:5px;box-sizing:border-box;cursor:pointer;border-radius:50% / 10%;color:#fff;text-align:center;box-shadow:0 0 8px #fff}<br />
.yt-play:hover,.yt-play.yt-off:hover .yt-playpausa:after{background:#333;border-color:#333;border-left-color:#fff}<br />
.yt-play:after{content:'';position:absolute;top:10%;bottom:10%;right:-5%;left:-5%;background:inherit;border-radius:5% / 50%}<br />
.yt-play .yt-playpausa{position:absolute;top:6px;left:14px;width:16px;overflow:hidden;z-index:2}<br />
.yt-play.yt-off .yt-playpausa:after{content:"";display:block;border:8px solid #cd201f;border-left:16px solid #fff}<br />
.yt-play.yt-on .yt-playpausa:after{content:"II";position:relative;left:-2px;top:-1px;font-size:20px;line-height:20px;color:#fff;font-weight:700}<br />
iframe[src*="www.youtube.com/embed"]{background:#000}<br />
</style></div><br />
<div class="vercodigo"><script><br />
$(document).ready(function() {<br />
$(".post-body").append("<div class='yt-play yt-off'><div class='yt-playpausa'></div></div>");<br />
var datosvid = $(".pos-body iframe[src*='www.youtube.com/embed']")[0].src;<br />
$(".yt-play").on("click", function(ev) {<br />
ev.preventDefault();<br />
if ($(this).hasClass("yt-off")) {<br />
$("iframe")[0].src += "&autoplay=1";<br />
$(this).addClass("yt-on").removeClass("yt-off");<br />
} else {<br />
$("iframe")[0].src = datosvid;<br />
$(this).addClass("yt-off").removeClass("yt-on");<br />
}<br />
});<br />
});<br />
</script></div><br />
<div class="video-wrapper"><div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/qdbrIrFxas0?rel=0" frameborder="0" allowfullscreen></iframe></div></div><style>.yt-play{position:fixed;top:50%;right:25%;z-index:99;font-family:arial;width:40px;height:30px;background:#cd201f;display:block;margin:5px;box-sizing:border-box;cursor:pointer;border-radius:50% / 10%;color:#fff;text-align:center;box-shadow:0 0 8px #fff}
.yt-play:hover,.yt-play.yt-off:hover .yt-playpausa:after{background:#333;border-color:#333;border-left-color:#fff}
.yt-play:after{content:'';position:absolute;top:10%;bottom:10%;right:-5%;left:-5%;background:inherit;border-radius:5% / 50%}
.yt-play .yt-playpausa{position:absolute;top:6px;left:14px;width:16px;overflow:hidden;z-index:2}
.yt-play.yt-off .yt-playpausa:after{content:"";display:block;border:8px solid #cd201f;border-left:16px solid #fff}
.yt-play.yt-on .yt-playpausa:after{content:"II";position:relative;left:-2px;top:-1px;font-size:20px;line-height:20px;color:#fff;font-weight:700}
iframe[src*="www.youtube.com/embed"]{background:#000}</style><br />
<script>$(document).ready(function() {
$(".post-body").append("<div class='yt-play yt-off'><div class='yt-playpausa'></div></div>");
var datosvid = $(".post-body iframe[src*='www.youtube.com/embed']")[0].src;
$(".yt-play").on("click", function(ev) {
ev.preventDefault();
if ($(this).hasClass("yt-off")) {
$("iframe")[0].src += "&autoplay=1";
$(this).addClass("yt-on").removeClass("yt-off");
} else {
$("iframe")[0].src = datosvid;
$(this).addClass("yt-off").removeClass("yt-on");
}
});
});</script><br />
<br />
No hay que hacer nada más (salvo asegurarse de que jQuery está en la plantilla). Con lo anterior, cada vez que añadáis una vídeo en una entrada, automáticamente se generará el botón externo.<br />
<br />
Podéis configurar el CSS como queráis. Para prácticas, cambios y lo que sea menester, en este Codepen tenéis todo lo anterior: <a href="http://codepen.io/oloman/pen/MyGMXE">http://codepen.io/oloman/pen/MyGMXE</a>.<br />
<br />
<hr/><br />
Para el caso de que habitualmente uséis más de un vídeo por post, entonces podéis utilizar otro código un poco más largo, pero basado exactamente en el mismo truco.<br />
<br />
Incluye también más CSS que el anterior para, entre otras cosas, añadir un mensaje emergente cuando se pasa el puntero por encima de la botonera. "Run Pen" para verlo.<br />
<br />
<p data-height="405" data-theme-id="5178" data-slug-hash="yOPqgG" data-default-tab="result" data-user="oloman" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/oloman/pen/yOPqgG/">External automatic play/stop buttons for YT videos</a> by Oloman (<a href="http://codepen.io/oloman">@oloman</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
Funcionando en real lo tenéis en <a href="http://www.musicaememorandum.com">mi otro blog</a>.<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com12tag:blogger.com,1999:blog-7470192961806963601.post-57003583385779326802016-05-18T16:27:00.000+02:002016-05-18T18:59:35.669+02:00Convertir una lista de imágenes en una galería con miniaturas (jQuery)Todo el mundo tiene un pasado y hubo en tiempo en que en lugar de estar un pelín por encima de la media, estaba en lo más hondo por debajo de ella. Por aquel entonces publiqué un más que incómodo y poco configurable código para crear una <a href="http://www.oloblogger.com/2010/10/sencilla-galeria-de-imagenes-con.html">Sencilla galería de imágenes con miniaturas</a>. Algo después ya diseñé una que era <a href="http://www.oloblogger.com/2013/11/galeria-imagenes-css-rwd.html">adaptable y sólo con CSS</a>, pero tanto esta como la otra tenían carencias o inconvenientes en mayor o menor medida.<br />
<br />
¿Y qué tiene la de hoy de particular? Pues que simplemente <b>creando una lista de imágenes, ya se genera automáticamente una galería</b> con miniaturas que al pincharlas permiten ver la imagen ampliada.<a name='more'></a><br />
<br />
Además podréis incorporar <b>más de una galería de este tipo por página</b>, el conjunto es <b>adaptable (RWD)</b> y <b>no tiene limitaciones en cuanto a número de imágenes</b> o medidas de estas. <br />
<br />
No tiene limitaciones pero por razones estéticas quizás lo conveniente es que no sean más de 10 (simplemente para que no se vean demasiado pequeñas las miniaturas) y que tengan aproximadamente la misma proporción ancho/alto evitando mezclar formatos verticales y horizontales. Esto último sería para que no se vieran huecos.<br />
<br />
<br />
<h4>Demo</h4><br />
A continuación la versión con las miniaturas arriba y luego veremos otra con las miniaturas abajo. Podéis probarla.<br />
<br />
<ul class="obgaleria" id="gal-uno"><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8c0aBN96LWvhMWK9zrKa2PJ1QpGs0JtDvbLCCfRWHuHWHU7wMWb5wIIYtjnllmGHj6NWsUcztpzqqXLTLB1egg1_FQL_49Se5Vfsi4ZHMBwZUI_tzxBqU8DoYVC3KBniGyf9NQTRyxYQ/s1600/amazing-caves-9-1.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIQhMJgyXVXKpAESmw_NyDwXV_2lx44_Ao2Kfabf1oTwhyphenhyphenL0GZAmXFV4SmQy82DS1dnS6kiCi-anmDw-J3O9AckGwOD_rcLAV77Omme5j-hGsFMpAn7lagAZtIjY_orpOcCJR2liVTri0/s1600/amazing-caves-6-2.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCSGqtjUxtONqNmT8uNrHv-vKV99UxA111yC-2BmfQnDv2kFReKqw0UaPmtaTPYJqEI7VyEVNU0fMifiH0zvtKHm9XHT9FYdf4JSn5wyC2yIYt8YZbY2dnw2mydC085y-kBIQldE2WSI/s1600/amazing-caves-4-1.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp7F22mJOxqMTs8DI2xFi1Kn4L7ufiJPVu9SHsMDJL0wSRodhBnrN8hpKC_b1hzpnVdEdtoV5a-gcZibJHEzWiTPyEZ_Rbe8APHjBVqDP5JIEALntTAgyLQa_sp9LMbiEzexxQghmPAKg/s1600/amazing-caves-8-1.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif9Z4JUmcR00g0JR19Ok1JqfdWJSvM_sH1ri_Wsv34-iDcUtKrTita8I4mHJpcbASPMbt4T8vcbCJz8cp62jow9LkHNccIBI7zS1MO62rLOQ_BXWxWAw8of8AFv1AGqow58ci6FLz7D1A/s1600/amazing-caves-1-1.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwHW_O8GfAaCIxxWl93zEk-kCLoxOnFmNwRVcB6IQXou4XdGTsyDFUrpy-V06MAQJUvg6kC9xCCjTgb4o4PbBdm4C5KwznJjDsi5YOauEUFzGB8InYRQy031RQSNbgHcTM5gEQeDgFTCg/s1600/amazing-caves-2-2.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKIXRKTbM1EsizUYSHwQ-NO1k9IrDXyhZcPyoFfQGkcFuYGTg3MzzliFzpxfpOxrBaPP9lw0r3rr-ySS4lGlVh_geuOFF3Wf3qpXdJQ2O8ksj5TnRx1nrFW3EMSRfaq2K7YYT5UiepExs/s1600/amazing-caves-14-1.jpg"/></li>
</ul><style>ul.obgaleria{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;}
ul.obgaleria li{position: relative;display:inline-block;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;}
ul.obgaleria li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding:0;border:0;}
ul.obgaleria li:last-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100%;height: auto;}
ul.obgaleria li {border-left: 3px solid transparent;border-bottom: 3px solid transparent;box-sizing: border-box;}
ul.obgaleria li:first-child, ul.obgaleria li:last-child {border-left:0;}</style><br />
<style>.post-body ul.obgaleria li img {max-width: inherit !important;height: 150% !important;}
.post-body ul.obgaleria li:last-child img {height: auto !important;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>//<![CDATA[
var prop = 60.00; // proporción alto/ancho*100 imagen principal
$(document).ready(function() {
$("ul.obgaleria").each(function() {
var id = "#" + $(this).attr("id");
var ancho = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");
$(id + " li:first-child").clone().appendTo(id);
$(id + " li:last-child").css({
"width": "100%"
});
$(id + " li").click(function() {
$(id + " li:last-child").remove()
$(this).clone().appendTo(id).animate({
width: "100%"
}, 200);
});
});
});//]]></script><br />
<h4>Añadiendo el código necesario</h4><br />
Lo primero será asegurarse de que tenéis cargada la librería jQuery en vuestra plantilla. Si no es así, insertad la siguiente línea (en Blogger justo después de <span class="html">]]></b:skin></span>):<br />
<br />
<div class="vercodigo HTML"><pre><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></pre></div><br />
<br />
El estilo y el JavasScript lo podéis añadir tanto en un gadget como en la plantilla. Si va en la plantilla sería entre <span class="html">]]></b:skin></span> y <span class="html"></head></span> y en cualquier caso, siempre detrás de cargar jQuery. Sería el siguiente, uno a continuación de otro, para que se pueda eliminar con facilidad de una vez si en el futuro os aburrís del <i>plugin</i>.<br />
<br />
<div class="vercodigo CSS"><style><br />
ul.obgaleria{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;} <br />
ul.obgaleria li{position: relative;display:inline-block;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;} <br />
ul.obgaleria li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding:0;border:0;} <br />
ul.obgaleria li:last-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100%;height: auto;} <br />
ul.obgaleria li {border-left: 3px solid transparent;border-bottom: 3px solid transparent;box-sizing: border-box;} <br />
ul.obgaleria li:first-child, ul.obgaleria li:last-child {border-left:0;}<br />
</style></div><br />
<div class="vercodigo JS"><script type='text/javascript'>//<![CDATA[<br />
var prop = 60.00; // proporción alto/ancho*100 imagen principal<br />
$(document).ready(function() {<br />
$("ul.obgaleria").each(function() {<br />
var id = "#" + $(this).attr("id");<br />
var ancho = 100 / $(id + " li").length;<br />
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");<br />
$(id + " li:first-child").clone().appendTo(id);<br />
$(id + " li:last-child").css({<br />
"width": "100%"<br />
});<br />
$(id + " li").click(function() {<br />
$(id + " li:last-child").remove()<br />
$(this).clone().appendTo(id).animate({<br />
width: "100%"<br />
}, 200);<br />
});<br />
});<br />
});<br />
//]]></script></div><br />
La variable <span class="html">var prop = 60.00;</span> sirve para determinar la proporción de las imágenes que vais a utilizar. Sólo se trata de dividir el alto por el ancho y multiplicar por 100. Si por ejemplo son el doble de anchas que de altas, el valor os saldrá 50 y si son cuadradas, el valor os saldrá 100.<br />
<br />
Todo esto sólo es necesario añadirlo una vez.<br />
<br />
<br />
<h4>Creando la lista de imágenes</h4><br />
La estructura HTML, o sea, lo que tenéis que poner en un gadget o dentro de una entrada, será la lista de imágenes con la cantidad de ellas que queráis.<br />
<br />
<div class="vercodigo HTML"><pre><ul class="obgaleria" id="<span class="cambiar">galeria1</span>">
<li><img src="URL_IMAGEN1.jpg"/></li>
<li><img src="URL_IMAGEN2.jpg"/></li>
<li><img src="URL_IMAGEN3.jpg"/></li>
</ul></pre></div><br />
Siendo obligatoria la clase <span class="css">obgaleria</span>, por contra dentro de la <span class="html">id</span> podéis poner el valor que queráis. Sólo hay que tener en cuenta que si vais a poner más de una galería por página, esa id debe ser distinta para cada lista.<br />
<br />
Y listo. Cada vez que pongáis una lista de imágenes como la de antes con clase <span class="css">obgaleria</span>, esta se convertirá en una galería.<br />
<br />
<br />
<h4>¿Qué hace el JavasScript</h4><br />
El código principal lo que hace es buscar en la página todas las listas que tengan la clase <span class="css">obgaleria</span> (1). Para cada una de ellas localiza y graba su id (2) y a partir de ahí calcula cuantas imágenes tiene la lista para dividir el ancho total entre ese número (3).<br />
<br />
Luego utilizamos todos esos datos para formatear con CSS las dimensiones de las miniaturas y del espacio para la imagen grande, añadiendo el estilo necesario en el <span class="html">head</span> (4).<br />
<br />
Para que de inicio no se muestre vacío el hueco grande, clonamos la primera imagen y la añadimos al final de la lista (5). La que ahora será la última (hueco grande) la ampliamos hasta el máximo ancho disponible (6). Y esperamos un click (7).<br />
<br />
Ya sólo resta que cuando este se produzca borremos la última imagen (hueco grande) (8) y a continuación volvamos a clonar y a poner en ese mismo lugar la pinchada (9). Este paso incluye una pequeña animación jugando con el ancho.<br />
<br />
<div class="vercodigo JS">(x) var prop = 60.00; // proporción alto/ancho*100 imagen principal<br />
(x) $(document).ready(function() {<br />
(1) $("ul.obgaleria").each(function() {<br />
(2) var id = "#" + $(this).attr("id");<br />
(3) var ancho = 100 / $(id + " li").length;<br />
(4) $("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:last-child {padding-bottom: " + prop + "%;}</style>");<br />
(5) $(id + " li:first-child").clone().appendTo(id);<br />
(6) $(id + " li:last-child").css({"width": "100%"});<br />
(7) $(id + " li").click(function() {<br />
(8) $(id + " li:last-child").remove()<br />
(9) $(this).clone().appendTo(id).animate({width: "100%"}, 200);<br />
(x) });<br />
(x) });<br />
(x) });</div><br />
<h4>Variante con miniaturas abajo</h4><br />
Tanto el CSS como el JavaScript cambian un poco debido a que ahora la imagen grande será la primera y no la última. <br />
<br />
<ul class="obgaleria2" id="gal-dos"><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB5mFr15zxiOv5qAFZ13x2sktv6gCsWKNjuXbglRjUDtvifJUKTsxKQUiw4f8UN779hlCjI1jETQTd7_oe2LiiLZDQl4ywDj5AkGs_RMfFRDeISR5rLQC48v89blBMcnTngNhskK90vdk/s1600/comedy+wildlife+3.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjjvxOQWRER9UAdD1RWiprFvrSGaxs5LfGApSCOyfHSc7A9_5EcVhXGhj9lKYgWioVazfw0UnamKE4uNr7U2amFOB4p9ifE0jqQvQuoql0dtHKdxBO0vGNGTMAih6WosRjQs3WAQDUNA/s1600/comedy+wildlife+1.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlknkI9eDF8TlTo6WKxtk7tn8kyYM3CCGg6KOy6iIpKGu62ZWxpvAf5GHEhNEzNFslnnIgR829pAeoYMoY7RK8OuFNcm_wgi-rIhzvCfrJ6C_oPoI6zomlV7hdgO69aRx-f72LZZDVkc/s1600/comedy+wildlife+4.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNNoJSYfyl3vWgOVgYG_GXursk1vJEOdp7n_UxmxYqbom-_V-VV6U4xu2gSnkvs-VRko3D2DjhPc0ydAKWCQvLsgAYoV9cy3-wlsmjLhQGvrior6y_yZ1UBlNpWlXpHFc-QAEzqHQg2fM/s1600/comedy+wildlife+2.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdl-0HY4q8zom-5NO8uRwQMN5GcWD0LbfL6_IlX0v50yACj2SfxExBIGFgRNUGed4VCbBgIqErkqy-2OSfyMusweYrJGHaEgcSf6JkAWGPPAVjWTZHBztW9vTFEyNQB5qMnvTU8RkATo/s1600/comedy+wildlife+6.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekjZRgxQuTlpZY3MMAyjeoQebZsZ7IUg1GVKcHOhAOAkj7D6YTyQtyBpU7hjBIUfHlxxakJIrc6wbPY8qb6E6yCvtfc0qEb7co2hKUE5Mpyo5KvUXRSQpv2es6brNMIp19dFfHYnMlNc/s1600/comedy+wildlife+5.jpg"/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZf4_XYoKcRRWXKt9tM8Mcth04ZjGnssbM2DUCMSdqNhqLqcKaRYJ6glTVzxgf3sysI1_VKDuZc199Xh09qA4JRSo9QyKvpIGobGnBvVrxWjJTNoINHuh7djEiDx0uV_NbVV544KTsnLQ/s1600/comedy+wildlife+10.jpg"/></li>
</ul><style>ul.obgaleria2{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;}
ul.obgaleria2 li{position: relative;display:inline-block;width:100%;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;}
ul.obgaleria2 li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding: 0;border:0;}
ul.obgaleria2 li:first-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 0;height: auto;}
ul.obgaleria2 li {border-left: 3px solid transparent;border-top: 3px solid transparent;box-sizing: border-box;}
ul.obgaleria2 li:nth-child(2), ul.obgaleria2 li:first-child {border-left:0;border-bottom:0;}</style><style>.post-body ul.obgaleria2 li img {max-width: inherit !important;height: 150% !important;}
.post-body ul.obgaleria2 li:first-child img {height: auto !important;}</style><script type='text/javascript'>//<![CDATA[
$("ul.obgaleria2").each(function() {
var id = "#" + $(this).attr("id");
var ancho = 100 / $(id + " li").length;
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:first-child {width: 100%;padding-bottom: " + prop + "%;}</style>");
$(id + " li:first-child").clone().prependTo(id);
$(id + " li:first-child img").css({
"width": "100%"
});
$(id + " li").click(function() {
$(id + " li:first-child").remove()
$(this).clone().prependTo(id);
$(id + " li:first-child img").animate({
width: "100%"
}, 200);
});
});//]]></script><br />
<br />
<div class="vercodigo CSS">ul.obgaleria{width: 100%;height:0;overflow:hidden;margin: 30px auto;list-style: none;background:transparent;font-size:0;line-height:0;} <br />
ul.obgaleria li{position: relative;display:inline-block;width:100%;height:0;margin:0;list-style:none;cursor:pointer;vertical-align:top;overflow:hidden;} <br />
ul.obgaleria li img {position: absolute;top: -150%;bottom: -150%;left: -150%;right: -150%;width: auto;max-width: none;height: 150%;margin: auto;padding: 0;border:0;} <br />
ul.obgaleria li:first-child img {top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 0;height: auto;} <br />
ul.obgaleria li {border-left: 3px solid transparent;border-top: 3px solid transparent;box-sizing: border-box;} <br />
ul.obgaleria li:nth-child(2), ul.obgaleria li:first-child {border-left:0;}</div><br />
<div class="vercodigo JS"><script type='text/javascript'>//<![CDATA[<br />
var prop = 60.00; // proporción alto/ancho*100 imagen principal<br />
$("ul.obgaleria").each(function() {<br />
var id = "#" + $(this).attr("id");<br />
var ancho = 100 / $(id + " li").length;<br />
$("head").append("<style>" + id + "{padding: 0 0 " + (prop + ancho) + "% 0;} " + id + " li{width:" + ancho + "%;padding: 0 0 " + ancho + "% 0;} " + id + " li:first-child {width: 100%;padding-bottom: " + prop + "%;}</style>");<br />
$(id + " li:first-child").clone().prependTo(id);<br />
$(id + " li:first-child img").css({<br />
"width": "100%"<br />
});<br />
$(id + " li").click(function() {<br />
$(id + " li:first-child").remove()<br />
$(this).clone().prependTo(id);<br />
$(id + " li:first-child img").animate({<br />
width: "100%"<br />
}, 200);<br />
});<br />
});<br />
//]]></script></div><br />
<h4>Codepen dónde practicar</h4><br />
Miniaturas arriba: <a href="http://codepen.io/oloman/pen/VaqVww">http://codepen.io/oloman/pen/VaqVww</a><br />
Miniaturas abajo: <a href="http://codepen.io/oloman/pen/wGZKzM">http://codepen.io/oloman/pen/wGZKzM</a><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com32tag:blogger.com,1999:blog-7470192961806963601.post-27521152685040534062016-04-28T13:00:00.000+02:002016-04-28T13:00:07.787+02:00Operador Blogger para redimensionar imágenes: resizeImagePara construir <a href="http://www.oloblogger.com/2012/11/plantilla-blogger-elegante.html">imágenes cuadradas para sumarios</a>, <a href="http://www.oloblogger.com/2012/03/miniaturas-para-sumarios-mas-grandes.html">agrandar miniaturas</a> y para todo aquello en lo que nos venía bien cambiar las dimensiones de una imagen automáticamente, hasta la fecha no teníamos más remedio que usar JavaScript aprovechando la ventaja del sistema de almacenamiento de imágenes de la plataforma (aquello de <a href="http://www.oloblogger.com/2012/02/la-ventaja-de-subir-una-sola-imagen-y.html">subir una imagen y disponer de cientos</a>).<br />
<br />
No sé desde cuando está operativa, pero hoy día tenemos una utilidad nativa que he comprobado que funciona y sirve para hacer todo eso. Que venga "de serie" es ya de por sí ventajoso con respecto a usar JavaScript añadido, pero también tiene alguna que otra cosa más que nos vendrá bien, como la posibilidad de recortar la imagen con una proporción concreta.<br />
<a name='more'></a><br />
<br />
El nuevo operador se denomina <span class="html">resizeImage</span> y además de explicar cómo se utiliza y mostrar unos cuantos casos, al final veremos un ejemplo de utilización para generar cabeceras dinámicas... una distinta para cada entrada.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQpLDIkGxS-PS6JkVNko5CQi0cLyA7e6IlFcd9yBO77f2mrwRDddYYqa9fKNpOYfLNQ-skVUhH4y7iT-dlOEhg6FP99LWs84fxb9S13PmSxgdzuFW1_y6OAMPOvrm5iwLybE2lEAl3LQ/s1600/resizeimage+blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Nuevo operador Blogger para redimensionar imágenes: resizeImage" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQpLDIkGxS-PS6JkVNko5CQi0cLyA7e6IlFcd9yBO77f2mrwRDddYYqa9fKNpOYfLNQ-skVUhH4y7iT-dlOEhg6FP99LWs84fxb9S13PmSxgdzuFW1_y6OAMPOvrm5iwLybE2lEAl3LQ/s640/resizeimage+blogger.jpg" title="Nuevo operador Blogger para redimensionar imágenes: resizeImage" /></a></div><br />
<b><br />
Su sintaxis puede tener dos formas</b> y el resultado siempre es la dirección de una imagen:<br />
<br />
<div class="instrucciones"><span class="cambiar">url_imagen</span> <span class="html">resizeImage</span> <span class="cambiar">ancho_imagen</span> <span class="html">resizeImage</span> ["<span class="cambiar">ratio</span>"]</div><br />
<div class="instrucciones"><span class="html">resizeImage</span>(<span class="cambiar">url_imagen</span>,<span class="cambiar">ancho_imagen</span>[,"<span class="cambiar">ratio</span>"])</div><br />
<ul><li><span class="cambiar">url_imagen</span>: Corresponde a la dirección de la imagen original. Puede usarse una variable <span class="argot">data</span> válida como por ejemplo <span class="html">data:blog.postImageUrl</span>, <span class="html">data:blog.postImageThumbnailUrl</span>, <span class="html">data:postFirstImage</span>, <span class="html">data:posts[i].authorPhoto.url</span>... o cualquier otra que contenga la dirección de una imagen. Si queremos indicar directamente la URL de una imagen concreta fija, entonces esta deberá ir entre comillas. <br />
<br />
</li>
<li><span class="cambiar">ancho_imagen</span>: Este parámetro es simplemente un número entero que indicará el nuevo ancho de la imagen, es decir, el ancho de aquella que se verá en lugar de la original<br />
<br />
</li>
<li><span class="cambiar">ratio</span>: Mientras que los otros dos son obligatorios, este es opcional. Representa la proporción (<i>aspect ratio</i>) que debe tener el ancho y alto de la nueva imagen, 4:3, 16:9... o el que queráis. Esto lo que producirá será un recorte de la imagen con la proporción indicada y por ejemplo, 1:1 servirá para conseguir un cuadrado. Sólo admite valores enteros y debe ir entrecomillado.</li>
</ul><br />
<br />
Como su misión es modificar imágenes, tendrá que estar unido a una etiqueta <span class="html">img</span> y la formulación final según el tipo de sintaxis que elijamos será como en estos dos ejemplos:<br />
<br />
<div class="instrucciones"><img expr:src='data:postFirstImage resizeImage 600 resizeImage "4:3"' /></div><br />
<div class="instrucciones"><img expr:src='resizeImage(data:postFirstImage,600,"4:3") /></div><br />
<br />
<br />
¿Lo probamos? <br />
<span style="font-size: 80%;">(Esto es una simulacion. En realidad el operador sólo funciona en la plantilla)</span><style>.post-body img {padding:0;background:none;}</style><br />
<br />
Supongamos <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x7LugKPKtbwSq3JVRoyfq0exRbqjwdd_QhvQJCnGNHuBJOYOi8sB9HJK_bBLYIkIjw1eSKIURQNxEehSKW9I1tvrAFbzBY59pULN4XzGBAupwOvt7Ey-A8eTBzTfiUumRme__GsY3MI/s642/wawel.jpg">esta imagen</a> de 642x428 px cuya dirección abreviaré para los siguientes códigos de ejemplo como <span class="cambiar">https://imagen.jpg</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x7LugKPKtbwSq3JVRoyfq0exRbqjwdd_QhvQJCnGNHuBJOYOi8sB9HJK_bBLYIkIjw1eSKIURQNxEehSKW9I1tvrAFbzBY59pULN4XzGBAupwOvt7Ey-A8eTBzTfiUumRme__GsY3MI/s1600/wawel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Imagen original" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x7LugKPKtbwSq3JVRoyfq0exRbqjwdd_QhvQJCnGNHuBJOYOi8sB9HJK_bBLYIkIjw1eSKIURQNxEehSKW9I1tvrAFbzBY59pULN4XzGBAupwOvt7Ey-A8eTBzTfiUumRme__GsY3MI/s642/wawel.jpg" title="Imagen original" /></a></div><br />
<br />
Las imágenes que se verían en el blog según las siguientes combinaciones con el operador <span class="html">resizeImage</span>, serían:<br />
<br />
<span style="font-size: 80%;">(he puesto las dos fórmulas que se admite, pero obviamente sólo es necesario usar una de ellas)</span><br />
<div class="vercodigo"><img expr:src='resizeImage("https://imagen.jpg", 400)'/></div><div class="vercodigo"><img expr:src='"https://imagen.jpg" resizeImage 400'/></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Imagen reducida" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x7LugKPKtbwSq3JVRoyfq0exRbqjwdd_QhvQJCnGNHuBJOYOi8sB9HJK_bBLYIkIjw1eSKIURQNxEehSKW9I1tvrAFbzBY59pULN4XzGBAupwOvt7Ey-A8eTBzTfiUumRme__GsY3MI/s400/wawel.jpg" style="margin-left: auto; margin-right: auto;" title="Imagen reducida" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Imagen de 400x267 (s400) <br />
con igual proporción a la original</td></tr>
</tbody></table><br />
<div class="vercodigo"><img expr:src='resizeImage("https://imagen.jpg", 400,"2:1")'/></div><div class="vercodigo"><img expr:src='"https://imagen.jpg" resizeImage 400 resizeImage "2:1"'/></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Imagen reducida y recortada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x7LugKPKtbwSq3JVRoyfq0exRbqjwdd_QhvQJCnGNHuBJOYOi8sB9HJK_bBLYIkIjw1eSKIURQNxEehSKW9I1tvrAFbzBY59pULN4XzGBAupwOvt7Ey-A8eTBzTfiUumRme__GsY3MI/w400-h200-p/wawel.jpg" style="margin-left: auto; margin-right: auto;" title="Imagen reducida y recortada" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Imagen de 400x200 (w400-h200-p) <br />
recortada con proporción 2:1</td></tr>
</tbody></table><br />
<div class="vercodigo"><img expr:src='resizeImage("https://imagen.jpg", 300,"1:1")'/></div><div class="vercodigo"><img expr:src='"https://imagen.jpg" resizeImage 300 resizeImage "1:1"'/></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Imagen cuadrada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x7LugKPKtbwSq3JVRoyfq0exRbqjwdd_QhvQJCnGNHuBJOYOi8sB9HJK_bBLYIkIjw1eSKIURQNxEehSKW9I1tvrAFbzBY59pULN4XzGBAupwOvt7Ey-A8eTBzTfiUumRme__GsY3MI/w300-h300-p/wawel.jpg" style="margin-left: auto; margin-right: auto;" title="Imagen cuadrada" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Imagen de 300x300 px (w300-h300-p)<br />
cuadrada (también s300-c)</td></tr>
</tbody></table><br />
<br />
A destacar que esto sólo funcionará con imágenes "redimensionables de manera nativa", como son en principio todas las que subimos a Blogger y que terminan en Picasa o Google Fotos. No se trata de una función que agrande o reduzca esas imágenes visualmente como lo haría un simple <span class="css">width</span> CSS, sino que este sistema lo que hace es cargar la imagen original del tamaño indicado. Para el que no conozca esto reitero el enlace del principio: <a href="http://www.oloblogger.com/2012/02/la-ventaja-de-subir-una-sola-imagen-y.html">Subir una imagen y disponer de cientos</a>.<br />
<br />
Caso de que la imagen no sea redimensionable Blogger presentará la imagen original sin tratar, esto es, tal cual con sus dimensiones originales.<br />
<br />
<hr /><br />
La utilidad principal de <span class="html">resizeImage</span> es mejorar y facilitar ciertos efectos con las imágenes para la plantilla. <br />
<br />
Por ejemplo supongamos que queremos personalizar la cabecera de cada post incluyendo en ella la primera imagen del mismo en lugar de la cabecera fija. Para ello podemos usar <span class="html">resizeImage</span> con la variable <span class="html">data:post.firstImageUrl</span> de esta manera, incorporándola con una condición al gadget <span class="argot">Cabecera</span>.<br />
<br />
<div class="vercodigo"><pre><!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<span class="cambiar"><b:if cond='data:blog.pageType == &quot;item&quot;'>
<img expr:src='data:blog.postImageUrl'/></span>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</b:if>
</a>
</div></pre></div><br />
<br />
Presupongo que la cabecera será bastante más grande que el ancho de un post y en ese caso, si por ejemplo la imagen del post es de 640px, al llevarla a una cabecera de 1200px claramente pixelaría. La alternativa sería subirlas todas al post con 1200px directamente y marcar <span class="argot">tamaño original</span>, pero eso aumentaría el peso de la página innecesariamente. <br />
<br />
Pero también podemos usar esta utilidad para recuperar la imagen s1200 a partir de la que usemos para el post, independientemente de su tamaño y que en cabecera no pixele. Siguiendo con el anterior código y usando <span class="html">resizeImage</span>, este debería quedar así:<br />
<br />
<div class="vercodigo"><pre><!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class="cambiar"><img expr:src='resizeImage(data:blog.postImageUrl, 1200,"4:1")'/></span>
<b:else/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</b:if>
</a>
</div></pre></div><br />
De esa manera, el gadget cabecera cargaría en páginas de entradas una imagen igual que la primera de la entrada, pero con ancho 1200px y proporción 4:1, es decir, de 1200x300 px.<br />
<br />
<br />
Una chulada esta herramienta, oiga. Un montón de cosas se pueden hacer con ella.<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com33tag:blogger.com,1999:blog-7470192961806963601.post-56864015415859071312016-04-25T17:00:00.000+02:002016-04-25T17:00:02.208+02:00Blogger. Protocolo seguro https. Utilidad para detectar contenido mixtoTodos los que usáis Blogger deberíais ya conocer esto, pero desde hace unos 7 meses la plataforma da soporte al protocolo seguro <b>HTTPS de manera opcional</b> para el dominio blogspot.com. <br />
<br />
El motivo de esta entrada es que durante este mes de abril han surgido dos novedades al respecto y que son por un lado la <b>generalización de su uso</b> (ya no será opcional) y por otro que se ha habilitado <b>una utilidad para detectar contenido no seguro</b> en las entradas y cambiarlo por otro seguro.<br />
<br />
Como en su momento no comenté nada al respecto aprovecho esta entrada para hacerlo con algo de retrospección e intentar disipar de paso las dudas que os puedan surgir.<br />
<a name='more'></a><br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Yfr0mcPYA_XlD0jjiOt3bTHslJtq2yZ2Zv33hHkjJ8_jLOeYw6xUrAdH9MZAwz3e_fLyrv4NzFBo_ZblmPmEtxFMJvPm3dIHKGp02ZB5Dt12zmHhOMCrfRcYfsroSVI3QZCVwufYjyU/s1600/seguro.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="https en Blogger" border="0" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Yfr0mcPYA_XlD0jjiOt3bTHslJtq2yZ2Zv33hHkjJ8_jLOeYw6xUrAdH9MZAwz3e_fLyrv4NzFBo_ZblmPmEtxFMJvPm3dIHKGp02ZB5Dt12zmHhOMCrfRcYfsroSVI3QZCVwufYjyU/s640/seguro.jpg" title="https en Blogger" width="640" /></a></div><br />
<br />
El protocolo de transferencia de hipertexto o HTTP (Hipertext Transfer Protocol) es una aplicación normalizada que permite intercambiar información a través de la WWW (World Wide Web) entre los diversos sistemas que la integran.<br />
<br />
<b>HTTPS no es más que una evolución que permite intercambiar esos mismos datos de manera segura</b>, utilizando para ello un cifrado que crea un canal encriptado. Lo que se intenta con esto es que si alguien intercepta los datos que fluyen entre emisor y receptor, sólo pueda conseguir datos codificados y por tanto inintelegibles para él.<br />
<br />
Este protocolo lo han usado habitualmente, por razones obvias, entidades que manejan información especialmente sensible, como gobiernos, militares, bancos, medios de pago, etc. Cuando se accede a uno de estos canales seguros en el navegador podemos observar esa "s" añadida al HTTP (s de <i>seguro</i>) y normalmente también un fondo de color verde y/o un icono de un candado.<br />
<br />
Hasta ahora entre los comunes mortales no era habitual usar protocolos seguros, pero es evidente que proteger la información que circula por la Red es cada vez más necesario. El propio Google hace tiempo que sostiene su particular cruzada por la seguridad y algunas pruebas de ello podrían ser su iniciativa <i><a href="https://www.youtube.com/watch?v=cBhZ6S0PFCY">https everywhere</a></i> y el aviso de que va a tener en cuenta el <a href="https://webmasters.googleblog.com/2014/08/https-as-ranking-signal.html">uso de protocolos seguros para la clasificación</a> en sus resultados de búsqueda.<br />
<br />
<hr /><br />
La mayoría de los productos de Google ya funcionan bajo entornos seguros y este es el momento en el que se incorpora Blogger a esa lista de manera definitiva.<br />
<br />
Este es el significado del mensaje que os está saliendo desde primeros de mes al acceder al escritorio Blogger. En él se nos informa de que <b>aunque no hayamos activado el HTTPS, nuestro blog funcionará en modo seguro a partir de finales de abril</b>.<br />
<br />
Todos los blogs con dominio .blogspot.com (esto no afecta a los dominios personalizados) pasarán directamente a tener una versión HTTPS, por lo que no tendréis que hacer ningún cambio en vuestras plantillas para que se aplique. Tampoco tenéis que avisar a vuestros lectores habituales sobre ningún cambio de dirección, pues tanto el acceso con HTTP como el acceso por HTTPS estarán operativos.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTHRgc2ybEh5t_jLzx8VNpk8XuTnIjRHq2KiqV4GgKUIh8bpw_70z4vNtvpnBrNoM8hF_XK4SQNOLanXCSRZ-w4a740TtncJfLI4f5-SV5WcNS8e7rJR_SyOEo1uDDZRd5cfx-LB-U3U/s1600/blogger+https+abril.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Aviso de Blogger sobre el cambio de protocolo a https" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTHRgc2ybEh5t_jLzx8VNpk8XuTnIjRHq2KiqV4GgKUIh8bpw_70z4vNtvpnBrNoM8hF_XK4SQNOLanXCSRZ-w4a740TtncJfLI4f5-SV5WcNS8e7rJR_SyOEo1uDDZRd5cfx-LB-U3U/s640/blogger+https+abril.jpg" title="Aviso de Blogger sobre el cambio de protocolo a https" /></a></div><br />
Algunas ventajas que emanan del uso del protocolo HTTPS son por ejemplo que se evita que tus visitantes sean redirigidos a sitios maliciosos (esto ocurre a veces cuando añadimos gadgets de terceros con malware) y también que ayuda a detectar intentos de manipulación de la información de los visitantes o que se haga seguimiento de tus actividades.<br />
<br />
<br />
<br />
Cuando un blog pasa a interpretarse <b>bajo un modo seguro, puede que algunas de sus utilidades no funcionen</b>. Esto puede ser por el contenido de la plantilla, algún gadget o incluso el de una entrada concreta. Ese tipo de errores se conocen como de <i><a href="https://developer.mozilla.org/es/docs/Seguridad/MixedContent">contenido mixto</a></i> y eso quiere decir que estamos incorporando contenido HTTP provocando que la página tenga elementos no seguros, elementos que por lo general no se cargarán para mantener la integridad dentro del entorno seguro.<br />
<br />
A veces una simple imagen que cargamos con HTTP es la causante de ese error y para detectar ese tipo de casos desde hace poco tenemos disponible en Blogger una utilidad en el editor de entradas.<br />
<br />
Si en el momento de guardar nuestra entrada esta contiene contenido no seguro (nótese que la dirección de la imagen en la siguiente captura está con HTTP), nos aparecerá un aviso como este:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4jSAaPS-m1aUFZLr9qLe6hntNcBgF6d-iw-riivcBcvFSnTjQbcNTGubvVO7-9xKWb2pwQuqk370TorosX_NRlnkjahUIDEmG3KDicvsLoKePifDHgVVIURHn7z5x-1rKZfwysbzPkSg/s1600/seguro1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Herramienta de detección de contenido mixto" border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4jSAaPS-m1aUFZLr9qLe6hntNcBgF6d-iw-riivcBcvFSnTjQbcNTGubvVO7-9xKWb2pwQuqk370TorosX_NRlnkjahUIDEmG3KDicvsLoKePifDHgVVIURHn7z5x-1rKZfwysbzPkSg/s640/seguro1.jpg" title="Herramienta de detección de contenido mixto" width="640" /></a></div><br />
Al final del mensaje se detallan todas las direcciones que pudieran existir con HTTP y si elegimos <span class="argot">Ignorar</span> se guardará sin más cambios, pero nos exponemos a que toda o parte de la entrada no cargue una vez publicada.<br />
<br />
Sin embargo, si pinchamos en <span class="argot">Solucionar</span>, el enlace cambiará a HTTPS y el contenido será completamente seguro. El aviso dejará de salir una vez que todos los HTTP hayan sido cambiados.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMByG-ecGmcfGaBwKgZWc58wikoeXQxG9kiuiYoOvvmePSSVdlPmYYyM74IhpMC_qAkgHrEF5Bc8Mno1Obeo1GTYwMYXhT78Ak2FEK9bok6eU7xfez9wuLmFDX2nUE36DVcwQJRZVYJo/s1600/seguro2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Contenido actualizado con https" border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMByG-ecGmcfGaBwKgZWc58wikoeXQxG9kiuiYoOvvmePSSVdlPmYYyM74IhpMC_qAkgHrEF5Bc8Mno1Obeo1GTYwMYXhT78Ak2FEK9bok6eU7xfez9wuLmFDX2nUE36DVcwQJRZVYJo/s640/seguro2.jpg" title="Contenido actualizado con https" width="640" /></a></div><br />
Las imágenes subidas a servicios de Google y algunas como la del ejemplo (imgur), siempre tienen una versión segura, pero no todos los servicios la tienen y en algún caso pudiera no ser suficiente con ese simple cambio.<br />
<br />
Evidentemente, añadir una "s" es algo que podríamos hacer mano, pero si nos facilitan la tarea con algo automático, mejor que mejor.<br />
<br />
<br />
Otra cosa serán las plantillas y gadgets, pues de momento no existe nada automático para detectar y cambiar este mismo tipo de contenido. Aquí ya se trata de revisar lo que no funcione y buscar las llamadas HTTP. Puede ser la dirección de una imagen, un script, un iframe... En <a href="https://support.google.com/blogger/answer/6286127?p=mixed_content&rd=1">este documento</a> encontrarás unas pautas para ayudarte a resolver los problemas que te surjan sobre este asunto. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauon-IJx7V_4Xfnt8ZsNbogT7ussrBJKczouTtVMFK9tZJtM1RoNFULCA45OUwFFPOaapZ6haIfhc7Z1VIVe0opiODd2cARdrGslGWRG8q0iukAW7jWDNYM7ErY_EunpCpSAcscjvNTY/s1600/contenido+mixto+plantillas.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Aviso en plantillas" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauon-IJx7V_4Xfnt8ZsNbogT7ussrBJKczouTtVMFK9tZJtM1RoNFULCA45OUwFFPOaapZ6haIfhc7Z1VIVe0opiODd2cARdrGslGWRG8q0iukAW7jWDNYM7ErY_EunpCpSAcscjvNTY/s640/contenido+mixto+plantillas.jpg" title="Aviso en plantillas" /></a></div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com30tag:blogger.com,1999:blog-7470192961806963601.post-91343864996004568482016-04-20T17:00:00.000+02:002016-04-20T17:00:24.397+02:00Enlaces flotantes de navegación con los títulos de las entradasEste es un sistema para dar un formato distinto al habitual a los enlaces de navegación de Blogger, esos que nos permiten pasar al post siguiente o anteriormente publicado al que estamos viendo.<br />
<br />
Está basado en algo que ya vimos anteriormente y que consiste en sustituir mediante jQuery las leyendas "Entrada antigua" y "Entrada más reciente", <a href="http://www.oloblogger.com/2013/03/sustituir-enlaces-navegacion-titulos.html">por el título de la correspondiente entrada</a> y la novedad esta vez es que le hemos añadido el CSS necesario para que cada uno de esos enlaces aparezcan flotando en los extremos izquierdo y derecho de la página.<a name='more'></a><br />
<br />
Parece que actualmente es tendencia, sobre todo en periódicos digitales, lo de poner así este tipo de enlaces. Este sería aproximadamente el resultado:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZhxTc2h3frmVmr4FrGSH-2Kxdyz6VZRbNTov0DoakKy1CusSPvdKzF-LV-2KS-PDgwaTGqMEgzZH7Sqs26qx3CU19i2J8KPMYEl4vQdJfq9hL4-VcJy8kc714kWxMkXDaHWYiah2Mcs/s1600/recientes+antiguas.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Títulos flotantes para enlaces de navegación" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZhxTc2h3frmVmr4FrGSH-2Kxdyz6VZRbNTov0DoakKy1CusSPvdKzF-LV-2KS-PDgwaTGqMEgzZH7Sqs26qx3CU19i2J8KPMYEl4vQdJfq9hL4-VcJy8kc714kWxMkXDaHWYiah2Mcs/s640/recientes+antiguas.jpg" title="Títulos flotantes para enlaces de navegación" /></a></div><br />
<br />
Siempre con el ánimo de simplificaros el trabajo y pensando en los más torpes, he montado todo el código de manera que sólo haya que copiarlo e insertarlo en un único paso. El lugar dónde pegarlo será en la plantilla, accediendo a <span class="argot">Edición HTML</span> e insertándolo entre <span class="html">}]]></b:skin></span> y <span class="html"></head></span>.<br />
<br />
Si actualmente no estáis usando jQuery, lo mejor es que sea justo después de <span class="html">}]]></b:skin></span>. Sin embargo, si ya tenéis jQuery, la primera línea que es la carga la librería tendréis que eliminarla y el resto del código añadirlo tras la línea equivalente que vosotros tengáis para cargar jQuery.<br />
<br />
<div class="vercodigo"><span class="cambiar"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></span><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
$(document).ready(function(){<br />
var masreciente = $('a.blog-pager-newer-link').attr('href');<br />
$('a.blog-pager-newer-link').load(masreciente + ' .post-title:first', function() {<br />
var titulomasreciente = $("a.blog-pager-newer-link:first").text();<br />
$('a.blog-pager-newer-link').text(titulomasreciente);<br />
});<br />
var masantiguo = $('a.blog-pager-older-link').attr('href');<br />
$('a.blog-pager-older-link').load(masantiguo + ' .post-title:first', function() {<br />
var titulomasantiguo = $('a.blog-pager-older-link').text();<br />
$('a.blog-pager-older-link').text(titulomasantiguo);<br />
});<br />
});<br />
//]]></script><br />
<style><br />
#blog-pager{width:100%;margin:0;padding:0;position:fixed;top:50%;font-size:0;left:0;text-align:left;line-height:0}<br />
.blog-pager span{position:relative;display:inline-block;vertical-align:top;width:120px;height:120px;overflow:hidden;margin:0;padding:0;text-transform:none;box-sizing:border-box}<br />
.blog-pager span:before{display:inline-block;vertical-align:middle;content:"";height:100%;width:0}<br />
.blog-pager a{float:none!important;display:inline-block;vertical-align:middle;width:100%;height: auto;min-height:40px;color:#eee;text-align:center;padding:15px 15px 15px 30px;box-sizing:border-box;line-height:1.1em;font-size:14px;font-family:arial;background:rgba(0,0,0,.4);border-radius:0 10px 10px 0}<br />
#blog-pager-older-link a{float:right;padding:10px 25px 10px 10px;border-radius:10px 0 0 10px}<br />
.blog-pager a:hover{background:#000}<br />
a.home-link{display:none;padding:0}<br />
.blog-pager span:after{content:"\2039";position:absolute;left:0;font-family:Trebuchet,serif;font-size:70px;line-height:70px;top:50%;margin-top:-40px;color:#ccc;text-align:center}<br />
.blog-pager span#blog-pager-older-link:after{content:"\203A";left:auto;right:0}<br />
@media (max-width: 640px) {<br />
#blog-pager{position:relative}<br />
.blog-pager span{display:block;width:100%;height:auto;margin-top:10px}<br />
.blog-pager a {border-radius: 10px !important;}<br />
}<br />
</style><br />
</b:if></div><br />
Todo el código está dentro de una condición para que sólo se ejecute en las páginas correspondientes a entradas (<span class="argot">item</span>), ya que en portada o páginas de etiquetas, al mostrarse más de un post, no es lógico calcular cuál es el siguiente o el anterior.<br />
<br />
La explicación de qué es lo que hace la parte JavaScript la podéis ver en el <a href="http://www.oloblogger.com/2013/03/sustituir-enlaces-navegacion-titulos.html">post</a> que mencioné al principio de esta entrada y con respecto a los colores y formas, como siempre, sólo hay que cambiarlos en la parte de estilo para dejarlos como a cada cual le cuadre.<br />
<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com20tag:blogger.com,1999:blog-7470192961806963601.post-46739256110634700552016-04-17T17:00:00.000+02:002016-11-29T23:26:46.586+01:00Botón para ofrecer suscripción a feed mediante FeedlyComo ando más liado que la pierna de un romano y también por volver un poco a los orígenes (<a href="http://www.oloblogger.com/search/label/BPT">BPT</a>), hoy toca una cosa muy sencilla pero de esas que siempre hay alguien que no sabe cómo hacer o tan siquiera que se pueden hacer: poner <b>un botón para facilitar que nuestros lectores puedan ver nuestro blog en su lector de feeds</b>.<br />
<br />
Los feeds son ficheros en los que automáticamente se recopila de forma estructurada la información esencial de una página web con publicaciones periódicas. Esa normalización ayuda a que luego podamos leer esa información con aplicaciones desarrolladas para ello y con dichas aplicaciones lo que conseguimos es poder "escanear" rápidamente los contenidos de todos los blogs que nos interesan.<a name='more'></a><br />
<br />
Si nuestro blog está en el lector de feeds de alguien, ese alguien verá nuestros titulares cada vez que lo consulte y de ahí la importancia de facilitar que nos añadan a su lector. Más info sobre <a href="http://www.oloblogger.com/2009/09/feed-que-es-y-para-que-sirve.html">qué es un feed</a>.<br />
<br />
<br />
Y una de las herramientas para leer feeds más populares actualmente (que no la única) es <a href="http://www.feedly.com/">Feedly</a>. Como en su página hay disponible una utilidad que nos facilita el código necesario para añadir sus botones de suscripción, vamos a seguirla que será lo más fácil.<br />
<br />
Si accedemos a su página de gadgets <a href="http://www.feedly.com/factory.html">www.feedly.com/factory.html</a>, nos encontraremos con lo siguiente:<br />
<br />
<br />
<h4>Paso 1: Selecciona tu diseño</h4><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiek_Dnfi6iM_-aIW-XzFjeFhB8xYOTYE-EF7M0GrTJXSLXmPOatX8VpZlpqEEj5w3K0FapZtwW47qbcGBFm2zShLNdfoZsgX0JpaTRnXuWS95C-xAOaGP03lG3PZi1yrTvSkWTzABIVa4/s1600/feedly1.jpg" imageanchor="1"><img alt="Primer paso para añadir un botón de Feedly" border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiek_Dnfi6iM_-aIW-XzFjeFhB8xYOTYE-EF7M0GrTJXSLXmPOatX8VpZlpqEEj5w3K0FapZtwW47qbcGBFm2zShLNdfoZsgX0JpaTRnXuWS95C-xAOaGP03lG3PZi1yrTvSkWTzABIVa4/s640/feedly1.jpg" title="Primer paso para añadir un botón de Feedly" width="640" /></a></div><br />
De entre todos los que ves, pincha en el botón que más cuadre con tu blog. Antes piensa si lo vas a colocar en la barra lateral o quizás integrado con otros botones sociales para que el tamaño/color sea el más adecuado.<br />
<br />
<br />
<h4>Paso 2: Teclea la dirección de tu feed</h4><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6SXNiLYnWb_KYwipDmsPt310owi_6aNnP5DZqyRxtpyddAuI2Xuxp5IxVMGmLExiH6bS7qoHStGp90Cr2yl1TqIBNnO62g6fz_XRK8OCPnvdsveP_gumTvfqrYWSOy7s2PI3uEeu6qc/s1600/feedly2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Aquí tendrás que teclear la dirección del feed de tu blog" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6SXNiLYnWb_KYwipDmsPt310owi_6aNnP5DZqyRxtpyddAuI2Xuxp5IxVMGmLExiH6bS7qoHStGp90Cr2yl1TqIBNnO62g6fz_XRK8OCPnvdsveP_gumTvfqrYWSOy7s2PI3uEeu6qc/s640/feedly2.jpg" title="Aquí tendrás que teclear la dirección del feed de tu blog" width="640" /></a></div><br />
Cada plataforma tiene su propio formato para la dirección. En Blogger es tal cual ves en la anterior captura. Con respecto al ejemplo tendrás que cambiar la palabra "NOMBRE" por el nombre de tu blog.<br />
<br />
Si tienes un dominio personalizado entonces lo que hay que cambiar es "www.NOMBRE.blogspot.com" por tu dominio.<br />
<br />
<br />
<h4>Paso 3: Copia e inserta el código HTML</h4><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsqAZ27V_lZ_pSX15FlgAcazTa1YEnYPL2-jn-4Zec_W35YgpkWL7zK7y0qZN1JA-jWhDnTBCDnz2cUliE2YgZF3fdKI7zJM5ash7EnDaMDoyzOnbgnyLH44AX7GGk9jKouU_N-f4zBoM/s1600/feedly3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Último paso: Código para insertar" border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsqAZ27V_lZ_pSX15FlgAcazTa1YEnYPL2-jn-4Zec_W35YgpkWL7zK7y0qZN1JA-jWhDnTBCDnz2cUliE2YgZF3fdKI7zJM5ash7EnDaMDoyzOnbgnyLH44AX7GGk9jKouU_N-f4zBoM/s640/feedly3.jpg" title="Último paso: Código para insertar" width="640" /></a></div><br />
Lo que salga ahí será el código que tendrás que copiar y pegar.<br />
<br />
Si el botón es para la barra lateral ve a <span class="argot">Diseño</span> y en el bloque de la sidebar pincha <span class="argot">Añadir gadget</span>. Luego escoge el del tipo <span class="argot">HTML/JavaScript</span> y una vez se abra el recuadro correspondiente copia dentro de él ese código. Guardas y listo.<br />
<br />
Si por el contrario lo quieres poner por ejemplo al pie de cada post (junto a otros botones sociales que pudieras tener... o no), entonces el camino será <span class="argot">Plantilla</span>, <span class="argot">Edición HTML</span>... y aquí ya cada uno tendrá un sitio distinto de la plantilla dónde insertarlo. Lo más normal es que sea dentro del <span class="html">div</span> con clase <span class="html">post-footer</span> o dentro de algunos de sus hijos <span class="html">post-footer-line-<span class="cambiar">X</span></span>. Ojo que en la plantilla estos códigos aparecen dos veces, una en la parte de la plantilla de escritorio y otra en la parte para móviles. Si no lo tenéis claro, lo ponéis en los dos.<br />
<br />
Y con sólo eso ya tendréis un botón para que vuestros lectores puedan seguir vuestros artículos por Feedly. Un botón al estilo de este:<br />
<br />
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.oloblogger.com%2Ffeeds%2Fposts%2Fdefault" style="display: block; margin: 0 auto; width: 131px;" target="blank"><img alt="Síguenos en Feedly" src="http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png" height="56" id="feedlyFollow" style="background: transparent; box-shadow: none; height: 56px; max-width: 100%; padding: 0px; width: 131px;" width="131" /></a><br />
<br />
Ya estáis tardando en suscribiros ;)<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com11tag:blogger.com,1999:blog-7470192961806963601.post-10388942809720434942016-02-16T18:00:00.000+01:002017-04-15T13:59:11.840+02:00Blogger. Índice por etiquetas que muestra TODAS las entradas publicadas¿Tienes un código para construir el índice de tu blog pero no carga todas las entradas? Pues bien, esto será lo normal si tienes más de 150 publicadas porque esa es la cifra que se puede cargar actualmente en una llamada única a un feed de Blogger.<br />
<br />
Justo en <a href="http://www.oloblogger.com/2016/02/feed-blogger-json-con-mas-150-posts.html">el post anterior</a> a este ya hablé sobre el asunto, así como que con cargar de 150 en 150 en lugar de tandas de a 500 entradas, la cosa se solucionaba en la mayoría de casos.<br />
<br />
Sin embargo hay algunos códigos que requieren cargar todas las entradas para después ordenarlas o agruparlas de determinada manera que hacen inviable la solución anterior. Es el caso del que veremos hoy que muestra las entradas clasificadas por etiquetas.<a name='more'></a><br />
<br />
Otros códigos publicados con anterioridad no preveían esta eventualidad pero ahora, siguiendo con el mismo algoritmo de la otra vez, conseguiremos hacer que funcione.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_X1e1ElMNs-f37WSCPNolEo_-0vanG_HmtmTslHQvLcOtdn6SYCbpYaHZPVjKmdQSQ7GVfxs5M9BTb4TLe_CS05tODxvfNvXQ4K5wXeHjwFhUcfa8aH1HLBKVRk-CfHpo3ffYjgIo90/s1600/indice+etiquetas.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Índice por etiquetas para Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge_X1e1ElMNs-f37WSCPNolEo_-0vanG_HmtmTslHQvLcOtdn6SYCbpYaHZPVjKmdQSQ7GVfxs5M9BTb4TLe_CS05tODxvfNvXQ4K5wXeHjwFhUcfa8aH1HLBKVRk-CfHpo3ffYjgIo90/s640/indice+etiquetas.jpg" title="Índice por etiquetas para Blogger" /></a></div><br />
<br />
Para instalarlo editamos nuestra plantilla y casi al final del todo y justo antes <span class="html"></body></span>, añadimos esto:<br />
<br />
<div class="vercodigo HTML"><span class="cambiar"><b:if cond='data:blog.pageType == &quot;static_page&quot;'></span><br />
<span class="cambiar"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/></span><br />
<!-- INDICE POR ETIQUETAS --><br />
<style><br />
ul.bsitemap, ul.bsitemap ul, ul.bsitemap li {width: 100%;margin: 0;padding: 0 ;list-style:none;font-family: arial;}<br />
ul.bsitemap li a {display: block;margin: 0 0 2px 0;padding:0 10px;background: #666;color: #fff;text-decoration: none;font-size: 20x;line-height: 28px;text-transform: uppercase;}<br />
ul.bsitemap li li a {background: transparent;color:#333;line-height:22px;}<br />
ul.bsitemap li a:hover {background: #333;}<br />
/* Símbolo elemento no desplegable */<br />
ul.bsitemap li a:before {content: "\25CF\00A0";width: 28px;display: inline-block;vertical-align: top;}<br />
/* Símbolo elemento desplegable cerrado */<br />
ul.bsitemap li.desplegable a:before {content: "\25BA\00A0";}<br />
/* Símbolo elemento desplegable abierto */<br />
ul.bsitemap li.desplegable.activa a:before {content: "\25BC\00A0";}<br />
ul.bsitemap li.desplegable ul li a:before, ul.bsitemap li.desplegable.activa ul li a:before {content: none}<br />
ul.bsitemap ul {display: none;}<br />
ul.bsitemap ul a {padding-left: 40px;text-transform: none;}<br />
ul.bsitemap li li a:hover {background: transparent;text-decoration: underline;}<br />
/* Estilo marca NUEVO (último mes) */<br />
.bnuevo {color: red;font-style: italic;font-weight: bold;}<br />
.bnuevo:after {content:" Nuevo";margin-left: 10px;padding: 2px 8px;color: white;background:red;font-style: italic;font-weight: bold;font-size: 80%;border-radius: 4px;}<br />
/* Símbolo animado cargador */<br />
.bloading {display: block;width: 80px;height: 80px;margin: 10px auto;font-size: 10px;text-align: center;border-width: 30px;border-radius: 50%;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-style: double;border-color: #666 transparent;}<br />
.bloading:before {content: "CARGANDO";font-weight: bold;line-height: 80px;color: #990000;}<br />
@-webkit-keyframes spin {100% {-webkit-transform: rotate(359deg);}}<br />
@keyframes spin {100% {transform: rotate(359deg);}}<br />
</style><br />
<script type='text/javascript'>//<![CDATA[<br />
var feed="http://<span class="cambiar">TUBLOG.blogspot.com</span>/feeds/posts/default",exclusion=["etiqueta1","etiqueta2","etiqueta3","etc"],cajasalida=$("#feed");$(document).ready(function(){var e=150,a=1e4,t=new Array;$.getJSON(feed+"?alt=json&callback=?").done(function(l){function s(t){var l=i*e+1,s=e;i==n-1&&(s=a-e*i);var r=feed+"?orderby=published&start-index="+l+"&max-results="+s+"&alt=json&callback=?";return $.getJSON(r)}var r=parseInt(l.feed.openSearch$totalResults.$t);r>a&&(r=a),Math.ceil(r/e)<2&&(e=r-1);var n=Math.ceil(r/e),o=[];for(i=0;i<n;i++)o.push(s(i));$.when.apply($,o).done(function(e){for(var a=[],l=0,i=0;i<arguments.length;i++)a.push(arguments[i][0]);for(i=0;i<arguments.length;i++)$.each(a[i].feed.entry||[],function(e,a){if(a.category)for(var i=0;i<a.category.length;i++){for(var s=!0,r=0;r<exclusion.length;r++)if(a.category[i].term==exclusion[r]){s=!1;break}s&&(t[l]=new Array,t[l][0]=a.category[i].term,t[l][1]=new Date(a.published.$t||Date.now()),t[l][2]=a.title.$t||"",t[l][3]=(a.link||[]).slice(-1)[0].href,l++)}else t[l]=new Array,t[l][0]="Varios",t[l][1]=new Date(a.published.$t||Date.now()),t[l][2]=a.title.$t||"",t[l][3]=(a.link||[]).slice(-1)[0].href,l++});t.sort(function(e,a){return e[0]>a[0]?1:e[0]<a[0]?-1:e[2]>a[2]?1:e[2]<a[2]?-1:0});var s="",r="",n="",o="";cajasalida.append('<ul class="bsitemap"></ul>');for(var c=0;c<t.length;c++){s=t[c][0],c>0&&(r=t[c-1][0],o="</ul></li>"),s!=r&&(n+=o+'<li><a href="javascript:void();">'+t[c][0]+"</a><ul>");var u=(new Date).getTime()-2592e6;u<=t[c][1]?clase="bnuevo":clase="bantiguo",n+='<li><a class="'+clase+'" href="'+t[c][3]+'">'+t[c][2]+"</a></li>"}n+="</ul></li>",$(".bloading").remove(),$("ul.bsitemap").append(n),$("ul.bsitemap > li:has(ul)").addClass("desplegable"),$("ul.bsitemap > li a").click(function(){var e=$(this).next();$("ul.bsitemap li").removeClass("activa"),$(this).closest("li").addClass("activa"),e.is("ul")&&e.is(":visible")&&($(this).closest("li").removeClass("activa"),e.slideUp("normal")),e.is("ul")&&!e.is(":visible")&&($("ul.bsitemap ul:visible").slideUp("normal"),e.slideDown("normal"))})})})});<br />
//]]></script><br />
</b:if></div><br />
Atención a los dos líneas al principio marcadas en color. <br />
<br />
La primera de todas es una condición para que todo ese código sólo se ejecute en páginas estáticas y así no ralentice el resto (Inicio y Entradas). Se supone que lo más indicado para incluir un índice es una página estática y por eso lo puse así. <br />
<br />
Si tenéis ya publicada la página en concreto dónde lo vais a poner, también dispondréis de su dirección y en ese caso se puede limitar aún más la carga cambiando la condición genérica que os indiqué por otra de este tipo:<br />
<br />
<div class="vercodigo"><b:if cond='data:blog.url == "<span class="cambiar">DIRECCION_DE_LA_PAGINA</span>"'></div><br />
Con respecto a la segunda línea, si ya tenéis jQuery para otro fines, directamente se puede (y se debe) eliminar del código.<br />
<br />
<div class="instrucciones">Todo lo anterior se podría poner directamente sin la condición dentro de una página estática usando la pestaña HTML del editor, pero entonces debéis tener cuidado si en el futuro la editáis. En la primera ocasión que guardéis todo funcionará correctamente pero justo cuando se edita la entrada se generan algunos saltos de línea dónde no los debería haber y os tocará eliminarlos. Es fácil saltarse alguno, así que hay que ser meticulosos.</div><br />
Podréis comprobar fácilmente que la primera mitad del anterior código es CSS (todo lo que figura entre las etiquetas <span class="html">style</span>) y ahí es dónde podréis manipular para cambiar el aspecto del índice.<br />
<br />
<br />
Una vez tengamos lo anterior en plantilla ya sólo resta acudir a la página dónde queremos que salga el índice y allí añadir esto otro:<br />
<br />
<div class="vercodigo"><div class="bloading"></div><br />
<div id="feed"></div><br />
<script>var feed = 'http://<span class="cambiar">DIRECCION_DEL_BLOG</span>/feeds/posts/default';<br />
var exclusion = ['etiqueta1','etiqueta2'];<br />
var cajasalida = $('#feed');</script></div><br />
En la variable <span class="html">feed</span>es dónde tenéis que poner la dirección del feed de vuestro blog. Este tiene el formato de la dirección de ejemplo que puse, así que sólo tendréis que poner la dirección de la página de inicio en lugar de <span class="cambiar">DIRECCION_DEL_BLOG</span>.<br />
<br />
La siguiente variable configurable es la que llamé <span class="html">exclusion</span>. Dentro de ella, entre apóstrofes y separadas por comas, podéis poner aquellas etiquetas que por el motivo que fuere no queréis que salgan en el índice. Podrían ser etiquetas antiguas ya no utilizadas, que sí que uséis pero sólo para fines de maquetación del blog o bien para conseguir que funcionen otros gadgets...<br />
<br />
Por último y por si el nombre de la caja con <span class="html">id="feed"</span> os diera algún problema, este se puede cambiar si además se cambia también dentro de <span class="html">cajasalida</span>.<br />
<br />
<br />
Y para comprobar cómo funciona, a continuación la demo con el índice completo de este blog (más de 800 entradas actualmente) desde Codepen, dónde como siempre podréis hacer <a href="http://codepen.io/oloman/pen/mVQwpJ">vuestras propias pruebas</a>. Para verlo "en real" en un blog, <a href="http://www.musicaememorandum.com/p/indice-tematico.html">aquí tenéis dónde lo apliqué</a> hace apenas dos días.<br />
<br />
<p data-height="535" data-theme-id="5178" data-slug-hash="mVQwpJ" data-default-tab="result" data-user="oloman" data-preview="true" class='codepen'>See the Pen <a href='http://codepen.io/oloman/pen/mVQwpJ/'>Índice Blogger por etiquetas (desplegable)</a> by Oloman (<a href='http://codepen.io/oloman'>@oloman</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
<br />
El CSS y el JavaScript podría ser más corto si no hubiera añadido el efecto acordeón, pero es que mostrar toda esa información absolutamente desplegada, me parece excesivo.<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com127tag:blogger.com,1999:blog-7470192961806963601.post-1157050310812506052016-02-02T16:00:00.000+01:002016-02-02T17:49:49.320+01:00Leer y mostrar un feed completo de Blogger sin limitaciones. Índice total.No hace mucho Blogger redujo la capacidad de lectura de sus feeds mediante <a href="https://es.wikipedia.org/wiki/JSON">JSON</a>, de 500 a sólo 150 entradas por petición y eso ha causado algún que otro inconveniente con los gadgets que se basan en la lectura de un feed para mostrar el contenido de un blog.<br />
<br />
Por ejemplo, esto ha generado problemas en los que se utilizan para crear índices de las entradas publicadas (<a href="http://www.oloblogger.com/2008/09/indice-automtico-para-tus-posts.html">1</a>) (<a href="http://www.oloblogger.com/2008/09/indice-automtico-para-tus-posts.html">2</a>), pues si las peticiones están programados para sacarlas de 500 en 500 o, en cualquier caso, en tandas de más de 150, no se extraerán bien todas las entradas.<a name='more'></a><br />
<br />
También se han visto afectados los <i>sitemaps</i> que podemos añadir a <a href="http://www.oloblogger.com/2015/01/nuevo-sitemap-xml-para-blogger.html">WebMasters Tools</a> con este tipo de feeds.<br />
<br />
Pero para ambos casos, como las entradas se pueden cargar repitiendo la petición mediante <span class="html">start-index</span> y <span class="html">max-results</span>, la solución sencilla pasa por cargar de 150 en 150 (como máximo) en lugar de hacerlo en bloques de 500:<br />
<br />
<div class="vercodigo">http://tudireccion.blogspot.com/feeds/posts/default?alt=json-in-script<span class="cambiar">&start-index=1&max-results=150</span>&callback=funcion<br />
http://tudireccion.blogspot.com/feeds/posts/default?alt=json-in-script<span class="cambiar">&start-index=151&max-results=150</span>&callback=funcion<br />
http://tudireccion.blogspot.com/feeds/posts/default?alt=json-in-script<span class="cambiar">&start-index=301&max-results=150</span>&callback=funcion<br />
etc.</div><br />
Sin embargo este método no es suficiente para otros artilugios que necesitan cargar <b>todas las entradas</b> (o más de 150) previamente, para luego realizar una selección filtrada y/o ordenada, como por ejemplo ocurre con los índices por etiquetas (<a href="http://www.oloblogger.com/2009/11/indice-por-categorias-tipo-sitemap.html">1</a>) (<a href="http://www.oloblogger.com/2009/11/indice-por-categorias.html">2</a>) (<a href="http://www.oloblogger.com/2014/12/indice-categorias-compacto-desplegable.html">3</a>).<br />
<br />
Para estos casos -y para casi para todos realmente- he creado este script que lee de una sola vez todas las entradas que necesitemos, independientemente del límite por feed que existe actualmente o que pueda existir en el futuro.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTsUzlYZ-e4yyBFF9YJcyNVQHpBzUidpG5O9FX0KPiU2sz6FhtY2j8evRzaFHhnuMxVk9EsLudd1jbTCNKDnIIYVINju1LorgaALGz6v3t5yiygfOxVYZpg4llws2TPROtYyFoXpU7XY/s1600/Leer+un+feed+completo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTsUzlYZ-e4yyBFF9YJcyNVQHpBzUidpG5O9FX0KPiU2sz6FhtY2j8evRzaFHhnuMxVk9EsLudd1jbTCNKDnIIYVINju1LorgaALGz6v3t5yiygfOxVYZpg4llws2TPROtYyFoXpU7XY/s640/Leer+un+feed+completo.jpg" width="640" /></a></div><br />
<br />
El algoritmo básico es averiguar el total de entradas publicadas y luego con esa cifra crear automáticamente tantas peticiones como sea necesario, en función del máximo que se admita por petición.<br />
<br />
Esas distintas peticiones las gestionaremos indicando un punto de comienzo distinto cada vez (<span class="html">start-index</span>) y el resultado de leer cada "subfeed" se irá añadiendo a un <span class="argot">array</span> de feeds. Luego ya será sólo cuestión de recorrer ese <span class="argot">array</span> para extraer lo que necesitemos en cada caso.<br />
<br />
<br />
Como me gusta dar casos generales y así cada cual podrá adaptarlo a sus necesidades, el siguiente código lee todos los datos del feed de Blogger (incluso la miniatura correspondiente al avatar del autor de cada entrada). Pero para no mostrar todo si no es necesario, también he incluido unas variables configurables que podéis ver al principio y mediante las que podréis seleccionar qué elementos mostrar (<span class="argot">true</span>) y cuáles no (<span class="argot">false</span>).<br />
<br />
<br />
Esta sería la parte que tendríamos que insertar en plantilla (entre <span class="html">]]></b:skin></span> y <span class="html"></head></span> para no tener que estar repitiéndola si la vamos a usar para varias utilidades (eliminar línea al principio que carga jQuery si ya tenemos esa librería para otra cosa):<br />
<br />
<div class="vercodigo"><!-- Lector de feeds total www.oloblogger.com --><br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/><br />
<script type='text/javascript'>//<![CDATA[<br />
// Parámetros configurables<br />
var web = 'http://www.oloblogger.com'; // Dirección del sitio. Evitar barra "/" al final<br />
var vertotal = true; // Ver número total de entradas publicadas true/false<br />
var total = $('#total'); // Nombre caja para total entradas publicadas <br />
var cajasalida = $('#feed'); // Nombre caja para insertar posts<br />
var postsxfeed = 150; // Como mucho el tope entradas que admite el feed<br />
var leermaximo = 1; // Máximo de entradas que queremos leer/mostrar<br />
var verimagen = true; // Imagen true/false<br />
var anchoimagen = 100; // Ancho/alto de la miniatura<br />
var sinimagen = 'http://2.bp.blogspot.com/_0eC4K-qZ7AM/SEhilrttvvI/AAAAAAAADAo/h1birc8e7O0/s400/cooltext90744301.jpg'; // Miniatura por defecto<br />
var vercontador = true; // Ver Ordinal de los posts mostrados<br />
var verfecha = true; // Ver fecha true/false<br />
var veretiquetas = true; // Ver las etiquetas true/false<br />
var separadoreti = '- '; // Símbolo de separación etiquetas<br />
var verautor = true; // Ver autor de la entrada<br />
var vernumcom = true // Ver número comentarios<br />
var vertitulo = true; // Ver título entrada true/false<br />
var vertexto = true; // Ver sumario true/false<br />
var maxcaracteres = 200; // Número caracteres por sumario<br />
// Parte ejecución<br />
var feed=web+'/feeds/posts/default';var contposts=-1;var reimg=/[\/=][sw][0123456789].+[\/o]/g;var reimg2=/\/s[012345679].+\/$/g;$.getJSON(feed+'?alt=json&callback=?').done(function(data){var longfeed=data.feed.openSearch$totalResults.$t;if(vertotal){$(total).append('Total entradas publicadas: '+longfeed)}if(longfeed>leermaximo){longfeed=leermaximo;$(total).append('. Mostrando '+leermaximo)}else{$(total).append('. Mostrando '+longfeed)}var peticiones=Math.ceil(longfeed/postsxfeed);var ajax=[];for(i=0;i<peticiones;i++){if(peticiones===1){ajax.push(leerfeeds(i),'');ajax.push('')}else{ajax.push(leerfeeds(i))}}function leerfeeds(id){var startindex=(i*postsxfeed)+1;var maxresults=postsxfeed;if(i==(peticiones-1)){maxresults=leermaximo-(postsxfeed*i)}var url=feed+'?orderby=published&start-index='+startindex+'&max-results='+maxresults+'&alt=json&callback=?';return $.getJSON(url)}$.when.apply($,ajax).done(function(data){var obj=[];for(var i=0;i<arguments.length;i++){obj.push(arguments[i][0])}for(i=0;i<arguments.length;i++){contposts++;$.each(obj[i].feed.entry||[],function(i,e){var salida='<div class="itempost">';var url=(e.link||[]).pop().href;if(verimagen){var thumbnail;if(e.media$thumbnail){thumbnail=(e.media$thumbnail.url||'')}else{thumbnail=sinimagen}thumbnail=thumbnail.replace(reimg,'/s'+anchoimagen+'-c/');thumbnail=thumbnail.replace(reimg2,'=s'+anchoimagen);salida+='<a class="itemimagen" href="'+url+'"><img src="'+thumbnail+'"/></a>'}if(vercontador){salida+='<div class="itemcontador">'+((contposts*postsxfeed)+i+1)+'</div>'}if(verfecha){var fecha=new Date(e.published.$t||Date.now());fecha=(new Date(fecha)).toLocaleDateString('es-es',{month:'2-digit',day:'2-digit',year:'2-digit'});salida+='<div class="itemfecha">'+fecha+'</div>'}if(verautor){var autor=(e.author[0].name.$t||'');salida+='<div class="itemautor"><a href="'+e.author[0].uri.$t+'">'+autor+'</a><div class="itemautorimg"><a href="'+e.author[0].uri.$t+'"><img src="'+e.author[0].gd$image.src+'"/></a></div></div>'}if(vernumcom){var numcom=(e.thr$total.$t||'');salida+='<div class="itemnumcom"><a href="'+url+'#comments">'+numcom+' comentarios</a></div>'}if(veretiquetas){var etiquetas=[];if(e.category){for(var k=0;k<e.category.length;k++){etiquetas+='<a href="'+web+'/search/?q=label:'+e.category[k].term+'">'+e.category[k].term+'</a>';if(k<e.category.length-1){etiquetas+=separadoreti}}}else{etiquetas+='Sin etiquetas'}salida+='<div class="itemetiquetas">'+etiquetas+'</div>'}if(vertitulo){var titulo=(e.title.$t||'');salida+='<div class="itemtitulo"><a href="'+url+'">'+titulo+'</a></div>'}if(vertexto){var sumario;if('content'in e){sumario=e.content.$t;var reghtml=/<\S[^>]*>/g;sumario=sumario.replace(reghtml,'');if(sumario.length>maxcaracteres){sumario=sumario.substring(0,maxcaracteres)+'...'}}else if('summary'in e){sumario=e.summary.$t+'...'}salida+='<div class="itemsumario">'+sumario+'</div>'}salida+='</div>';$('.loading').remove();cajasalida.append(salida)})}})});//]]></script></div><br />
<br />
A continuación para que salgan las entradas leídas y ya en una entrada o en un gadget, lo que habrá que escribir será lo siguiente:<br />
<br />
<div class="vercodigo HTML"><div id="total"></div><br />
<div class="loading"></div><br />
<div id="feed"></div><br />
<script type='text/javascript'>//<![CDATA[<br />
// Parámetros configurables<br />
var web = 'http://www.oloblogger.com'; // Dirección del sitio. Evitar barra "/" al final<br />
var vertotal = true; // Ver número total de entradas publicadas true/false<br />
var total = $('#total'); // Nombre caja para total entradas publicadas <br />
var cajasalida = $('#feed'); // Nombre caja para insertar posts<br />
var postsxfeed = 150; // Como mucho será el tope de entradas que admite el feed <br />
var leermaximo = 1; // Máximo de entradas que queremos leer/mostrar<br />
var verimagen = true; // Imagen true/false<br />
var anchoimagen = 100; // Ancho/alto de la miniatura<br />
var sinimagen = 'http://2.bp.blogspot.com/_0eC4K-qZ7AM/SEhilrttvvI/AAAAAAAADAo/h1birc8e7O0/s400/cooltext90744301.jpg'; // Miniatura por defecto<br />
var vercontador = true; // Ver Ordinal de los posts mostrados<br />
var verfecha = true; // Ver fecha true/false<br />
var veretiquetas = true; // Ver las etiquetas true/false<br />
var separadoreti = '- '; // Símbolo de separación etiquetas<br />
var verautor = true; // Ver autor de la entrada<br />
var vernumcom = true // Ver número comentarios<br />
var vertitulo = true; // Ver título entrada true/false<br />
var vertexto = true; // Ver sumario true/false<br />
var maxcaracteres = 200; // Número caracteres por sumario<br />
//]]></script></div><br />
Si los parámetros originales no los vais a cambiar, podéis no repetirlos aquí. Bastará con que pongáis aquellos que cambien con respecto a los que incluí en el script que dije de insertar en plantilla.<br />
<br />
Mención importante para la variable <span class="html">leermaximo</span>, que es el tope de entradas que leeremos. Esto lo puse así porque si no necesitamos realmente leer todas las entradas publicadas, evitaremos demoras innecesarias. Las lecturas de feeds son lentas, así que sólo debemos pasar por el número de entradas que sea necesario, ni más, ni menos.<br />
<br />
En la plantilla puse esa variable con el valor 1 y así no se ejecutará con otro mayor salvo cuando se le ordene directamente desde el gadget o entrada <br />
<br />
El resultado sería este y en él podréis descubrir cómo de lenta puede ser la carga de unas 800 entradas (clic sobre el siguiente bloque para ejecutar o sobre <a href="http://codepen.io/oloman/pen/NxjpvP">este enlace</a> para ver funcionando en Codepen). Desde allí podréis hacer pruebas para ver qué ocurre si cambiáis las distintas variables.<br />
<br />
<p data-height="268" data-theme-id="5178" data-slug-hash="NxjpvP" data-default-tab="result" data-user="oloman" data-preview="true" class='codepen'>See the Pen <a href='http://codepen.io/oloman/pen/NxjpvP/'>Lector de feed completo. Blogger</a> by Oloman (<a href='http://codepen.io/oloman'>@oloman</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><br />
<br />
El estilo lo podéis cambiar fácilmente porque todos los elementos salen con su propia clase, pero para que tengáis una base sobre la que poder modificar, este es el que he usado en la demo. Al igual que antes, desde Codepen podéis hacer alterar fácilmente el CSS para ir viendo cómo podría quedar la cosa y adaptar la salida a vuestra propia estética.<br />
<br />
<div class="vercodigo CSS">#total{display:block;font-size:22px;line-height:24px;margin-bottom:10px;padding:10px;border:2px solid #000;box-sizing:border-box;text-align:center;color:#eee;background:#333}<br />
.itempost{display:block;padding:10px;clear:both;box-sizing:border-box;overflow:hidden}<br />
.itempost:nth-of-type(odd){background:#EFD689}<br />
a.itemimagen{float:left;margin:0 20px 0 0}<br />
.itemimagen img{border:1px solid #999;box-sizing:border-box}<br />
.itemcontador{display:inline;margin:0 10px 0 0;font-size:80%}<br />
.itemfecha{display:inline;margin:0 10px 0 0;font-size:80%}<br />
.itemautor{position:relative;display:inline;margin:0 10px 0 0;font-size:80%}<br />
.itemautorimg{display:none;position:absolute;top:14px;left:0}<br />
.itemautorimg img{width:32px;height:32px}<br />
.itemautor:hover .itemautorimg{display:block}<br />
.itemnumcom{display:inline;margin:0 10px 0 0;font-size:80%}<br />
.itemetiquetas{display:inline;font-size:80%}<br />
.itemetiquetas a{display:inline-block;margin:0 5px 0 0;background:#eee;padding:0 5px;box-sizing:border-box}<br />
.itemautor a,.itemnumcom a,.itemetiquetas a{color:#B38D1C;text-decoration:none}<br />
.itemnumcom a:hover{text-decoration:underline}<br />
.itemtitulo a{display:block;margin:10px 0;font-size:20px;color:#B38D1C;text-decoration:none}<br />
.loading{display:block;width:80px;height:80px;margin:10px auto;border-width:30px;border-radius:50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border-style:double;border-color:#666 transparent}<br />
.loading:before{content:"CARGANDO";font-weight:700;line-height:80px;color:#900}<br />
@-webkit-keyframes spin {100%{-webkit-transform:rotate(359deg)}}<br />
@keyframes spin {100%{transform:rotate(359deg)}}</div><br />
<br />
Y bien, con todo lo anterior ya podéis montar un índice integral que muestre todas las entradas publicadas en un blog Blogger. Si tenéis algún gadget que os funciona actualmente de manera deficiente por este tema, comentadlo e intentaré sacar algo de tiempo para reconstruirlo con esta utilidad. De momento ando ya trabajando con el "<a href="http://www.oloblogger.com/2014/12/indice-categorias-compacto-desplegable.html">índice por etiquetas</a>".<br />
<br />
Seguramente, con el <a href="http://www.oloblogger.com/2015/01/nuevo-sitemap-xml-para-blogger.html">nuevo sitemap de serie</a> podríamos hacer algo más básico para mostrar sólo título de cada entrada y su enlace, pero eso también será en otra ocasión.<br />
<br />
Y por supuesto, si encontráis cualquier cosa que se pueda optimizar en el código, con gusto recogeré la sugerencia.<br />
<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com47tag:blogger.com,1999:blog-7470192961806963601.post-38828014474686925622015-12-22T17:00:00.000+01:002015-12-22T17:00:06.532+01:00Sistema #css para ocultar/mostrar contenido con clic. Menú desplegableAquí ya se han publicado muchos artículos en los cuales se conseguía algún tipo de efecto cuando se pasaba el puntero por encima de un elemento. Esto es algo relativamente sencillo de hacer porque sólo se trata de aplicar un estilo CSS para el estado normal del elemento y otro distinto para ese mismo elemento en estado <span class="css">:hover</span>. <br />
<br />
Sin embargo, desde que los dispositivos táctiles llegaron a nuestra vida y, sobre todo, desde que se han hecho un gran hueco en Internet, el <span class="css">:hover</span> en algunas ocasiones se nos queda corto, ya que este tipo de cacharritos generalmente responden a esa acción de posar nuestro dedo sobre algo sólo como sinónimo de hacer clic, haciendo prácticamente inútil atacar el selector con <span class="css">:hover</span>.<a name='more'></a><br />
<br />
Por eso hoy veremos una manera utilizando sólo CSS de mostrar algo oculto con un clic. Lo haremos usando un botón radio (<span class="html">input</span>) como elemento auxiliar y aprovechando su posible estado <span class="css">:checked</span> (seleccionado) para el segundo juego de propiedades. <br />
<br />
Al final del artículo podréis ver como ejemplo de uso un menú abatible con enlaces a redes sociales.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpf6ci7f1lmN-SUZ6ABsAxciC-JKdeN8dh3eMuQwiEgwPaqZxHQQAco4vo3BSfdN6A-c48TJJBfRX6dXmK1uu8ZPHtT0rCK8C9X5KfHVCBXYOQfhXJ-8lOX9XXoX5tZbwjkvWcvE9BLI/s1600/solapa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menú desplegable" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLpf6ci7f1lmN-SUZ6ABsAxciC-JKdeN8dh3eMuQwiEgwPaqZxHQQAco4vo3BSfdN6A-c48TJJBfRX6dXmK1uu8ZPHtT0rCK8C9X5KfHVCBXYOQfhXJ-8lOX9XXoX5tZbwjkvWcvE9BLI/s640/solapa.jpg" title="Menú desplegable" /></a></div><br />
<br />
Para hacer esto necesitamos un botón radio y su correspondiente etiqueta. La idea general es ocultar el <span class="html">input</span> que lo forma para que estéticamente no moleste y dejar sólo su etiqueta (<span class="html">label</span>) como botón de activación, ya que ambos reaccionan igualmente al clic como un todo y con la etiqueta es más fácil crear con CSS un formato personalizado.<br />
<br />
<br />
Aquí podeís ver el código básico para lo de ocultar/mostrar con un <i>checkbox</i>:<br />
<code class="HTML"><pre><input id="activar" name="activar" type="checkbox">
<label class="inputlabel" for="activar"><span class="cambiar">Clic para ver contenido</span></label>
<div class="desplegable">
<span class="cambiar">Aquí podría ir cualquier tipo de elemento</span>
</div></pre></code><br />
<code class="CSS">#activar ~ .desplegable {display: none;overflow: hidden;} <br />
#activar:checked ~ .desplegable {display: block;}</code><br />
<br />
Es importante que el <span class="html">input</span> y su correspondiente <span class="html">label</span>, tengan el mismo nombre (<span class="css">activar</span> en el ejemplo), entre otras cuestiones porque ambos elementos pueden ir separados sin problema intercalados por otro código cualquiera y esa es la clave que permite relacionar uno con otro. Además de esos dos lo único que necesitamos es una caja con el contenido que pretendemos activar con el botón. <br />
<br />
En el CSS lo que hemos hecho es usar el selector correspondiente al botón (<span class="css">#activar</span>) e indicar que su hermano (~) que es la caja con el contenido (<span class="css">.desplegable</span>), inicialmente se oculte. Luego utilizamos el estado <span class="css">:checked</span> para que cuando se pincha en el <span class="html">input</span>, la caja y su contenido se haga visible.<br />
<br />
Este sería el resultado. <br />
<span style="font-size: 80%;">(Nótese que es indiferente pinchar en el botón o en su etiqueta "Clic para ver contenido")</span><br />
<br />
<div class="demo"><input id="activard1" name="activard1" type="checkbox"><label class="inputlabeld" for="activard1"><span class="cambiar">Clic para ver contenido</span></label> <div class="desplegabled">Aquí podría ir cualquier tipo de elemento</div></div><style>.demo {width: 80%;height: 3em;border: 1px dotted #333;margin: 0 auto;text-align: center;} #activard1 ~ .desplegabled {display: none;overflow: hidden;} #activard1:checked ~ .desplegabled {display: block;}</style><br />
<br />
<br />
Ahora vamos a jugar un poquito con el estilo para que esto tenga una pinta más mona.<br />
<br />
Usaremos el mismo HTML pero sin ninguna leyenda dentro del <span class="html">label</span>. Las nuevas reglas CSS que veréis después, en este mismo orden...<br />
<ul><li>Esconden el <i>checkbox</i> para que sólo se vea su etiqueta</li>
<li>Cambian el aspecto de la etiqueta para que se asemeje más a un botón</li>
<li>Añaden un texto ("Abrir") a la etiqueta en el estado normal del <i>checkbox</i></li>
<li>Esconden el contenido oculto y le dan un poquito de forma y color</li>
<li>Muestran el contenido oculto cuando se activa el <i>checkbox</i></li>
<li>Añaden un texto distinto ("Cerrar") a la etiqueta cuando el <i>checkbox</i> está activado</li>
</ul><br />
<code class="CSS">#activar {display: none;}<br />
.inputlabel {display: inline-block;height: 20px;line-height: 20px;padding: 5px 10px;background: #000;color: #fff;}<br />
#activar ~ .inputlabel:before {content: "ABRIR"}<br />
#activar ~ .desplegable {display: none;overflow: hidden;padding: 10px 20px; background: #000;color: #fff;}<br />
#activar:checked ~ .desplegable {display: block;}<br />
#activar:checked ~ .inputlabel:before {content: "CERRAR"}</code><br />
<br />
Y con todo eso obtenemos:<br />
<br />
<div class="demo2"><input id="activar" name="activar" type="checkbox"><div class="desplegable"><img src="http://lorempixel.com/300/50/sports/1"/></div><label class="inputlabel" for="activar"></label></div><style>.demo2 {width: 80%;height: 80px;margin: 0 auto;text-align: center;border-top:2px solid #000;}
.desplegable img {max-width: 100%;height: auto;padding: 0;}
#activar {display: none;}
.inputlabel {display: inline-block;height: 20px;line-height: 20px;padding: 5px 10px; background: #000;color: #fff;}
#activar ~ .inputlabel:before {content: "ABRIR";}
#activar ~ .desplegable {display: none;overflow: hidden;padding: 10px 20px;background: #000;color: #fff;}
#activar:checked ~ .desplegable {display: block;}
#activar:checked ~ .inputlabel:before {content: "CERRAR"}</style><br />
<br />
<br />
<br />
En fin, el truco es ese y ya dependiendo del aspecto que le deis al conjunto, el lugar dónde lo situéis y el tipo de contenido que ocultéis, pues así será el resultado. Este que viene a continuación está orientado a relacionar las propias redes sociales, pero bien puede ser adaptado con poco trabajo para cualquier otro tipo de menú.<br />
<br />
Lo puse embebido desde Codepen, así que como en otras ocasiones, podéis trastear con él para probar cosillas.<br />
<br />
<p data-height="460" data-theme-id="5178" data-slug-hash="Gvosz" data-default-tab="result" data-user="oloman" class='codepen'>See the Pen <a href='http://codepen.io/oloman/pen/Gvosz/'>Solapa superior desplegable con clic #css</a> by Oloman (<a href='http://codepen.io/oloman'>@oloman</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com13tag:blogger.com,1999:blog-7470192961806963601.post-76536335017066042232015-11-30T17:00:00.000+01:002015-11-30T17:00:01.038+01:00Ticker para mostrar enlaces a entradas extraídos desde un feedUn <i>ticker</i> propiamente dicho es el código con el que las distintas compañías que cotizan en bolsa son identificadas con unas pocas letras de manera abreviada. <br />
<br />
Por extensión también se conoce como <i>ticker</i> al panel que en un espacio reducido va mostrando las distintas cotizaciones en un formato de carrusel, esto es, mostrando todos los valores de manera secuencial, desplazando los más recientemente mostrados a los anteriores.<br />
<br />
Este formato puede ser útil para mostrar información en nuestra web cuando queramos reducir el espacio destinado para ello.<br />
<br />
En este caso lo usaremos para exponer dentro los títulos de las entradas más recientes del propio blog (o de otro) y que obtendremos mediante su feed.<a name='more'></a><br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizR2ooeKKZjKfK_wFVxhqjn3iB6-6_V0q-rp2-0_t0-flo7zMwdkT3_1SwVJ0ow9Pvmamhnv5dCfrKKGPnjxGyZbBQxtia1Fmhm-t3Qlk8f0opEWoaHDCGmUGcpErHOgNw5QPj3_xBfWE/s1600/ticker.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="RSS Ticker" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizR2ooeKKZjKfK_wFVxhqjn3iB6-6_V0q-rp2-0_t0-flo7zMwdkT3_1SwVJ0ow9Pvmamhnv5dCfrKKGPnjxGyZbBQxtia1Fmhm-t3Qlk8f0opEWoaHDCGmUGcpErHOgNw5QPj3_xBfWE/s640/ticker.gif" title="RSS Ticker" /></a></div><br />
<br />
El artilugio está hecho con JavaScript, pero a diferencia de otras ocasiones no requiere de ninguna librería adicional (no es necesario jQuery, por ejemplo).<br />
<br />
Para otras cosas ya he publicado y explicado códigos similares, así que como este está ya preparado para sólo copiar y pegar en un gadget, explicaré lo justo.<br />
<br />
<br />
Podéis ver una función que se llama <span class="html">rssticker</span> y a la que mediante un <span class="html">callback</span> le hacemos llegar la dirección de un <i>feed</i>. Esa función lee el contenido del feed y de él guarda en un <i>array</i> lo que necesitamos, el título y el enlace de las últimas entradas.<br />
<br />
Luego esos datos se mandan a <span class="html">startrssticker</span> que aunque es una función algo más larga (y recursiva), lo único que hace es el efecto de ir mostrando los caracteres de cada título uno a uno y casi lo mismo para hacer ver sólo un título cada vez. Es lo que podéis ver en el gif animado del arriba y en la demo que figura al final de esta entrada.<br />
<br />
Este sería el código completo, aunque bien se puede incluir el JavaScript y el CSS en la plantilla y sólo el <span class="html">callback</span> en el gadget. Los parámetros configurables los he marcado de otro color junto con un comentario de su utilidad y, como siempre, el CSS puede ser cambiado para adaptarlo al formato de vuestro propio sitio.<br />
<br />
<div class="vercodigo"><script style='text/javascript'><br />
function rssticker(t){for(var a=0;a<numeroposts;a++){entradas=t.feed.entry[a],titulosposts[a]=entradas.title.$t;for(var e=0;e<entradas.link.length;e++)if("alternate"==entradas.link[e].rel){enlaceposts[a]=entradas.link[e].href;break}}startrssticker()}function startrssticker(){postactual=-1,largoactual=0,enlaces=document.getElementById("enlace"),runticker()}function runticker(){var t;0==largoactual&&(postactual++,postactual%=numeroposts,titulo=titulosposts[postactual].replace(/&quot;/g,'"'),enlace=enlaceposts[postactual],enlaces.href=enlace),enlaces.innerHTML=titulo.substring(0,largoactual),largoactual!=titulo.length?(largoactual++,t=retardocaracter):(largoactual=0,t=retardopost),setTimeout("runticker()",t)}<br />
var numeroposts = <span class="cambiar">6</span>; //Entradas a mostrar<br />
var retardocaracter = <span class="cambiar">30</span>; //Cadencia entre caracteres<br />
var retardopost = <span class="cambiar">4000</span>; //Cadencia entre entradas<br />
var titulosposts = new Array();<br />
var enlaceposts = new Array();<br />
var entradas = "";<br />
</script><br />
<div class='rssticker'><br />
<span class="encabezado">LO ÚLTIMO</span><br />
<a id='enlace'></a><br />
<!-- Aqui la dirección del feed --><br />
<script src='http://<span class="cambiar">DIRECCION_BLOG</span>/feeds/posts/default?alt=json-in-script&callback=rssticker' style='text/javascript'></script><br />
</div><br />
<style><br />
.rssticker{position:relative!important;width:100%;height:40px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;margin:10px auto;color:#fff;background:#333;font-size:14px;font-family:Arial;line-height:40px;}<br />
.encabezado{display:inline-block;margin:0 10px 0 0;padding:0 10px;line-height:40px;background:#cd2122;box-sizing:border-box;}<br />
.rssticker a{color:#fff;text-decoration:none;}<br />
.rssticker a:hover{text-decoration:none;color:#ccc;}<br />
</style></div><br />
No olvidéis cambiar <span class="cambiar">DIRECCION_BLOG</span> por la dirección del blog a mostrar.<br />
<br />
Si queréis mostrar la de otro blog distinto al propio sin problemas y si queréis mostrar sólo las entradas de una etiqueta en concreto, entonces para Blogger la dirección será del tipo http://<span class="cambiar">DIRECCION_BLOG</span>/feeds/posts/default/-/<span class="cambiar">NOMBRE_ETIQUETA</span><br />
<br />
<br />
Y esta es la demostración de cómo funciona. También hice un Codepen para que podáis trastear con parámetros y estilos: <a href="http://codepen.io/oloman/pen/dYBaKm">http://codepen.io/oloman/pen/dYBaKm</a><br />
<br />
<style>
.rssticker{position:relative!important;width:100%;height:40px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;margin:10px auto;color:#fff;background:#333;font-size:14px;font-family:Arial;line-height:40px;}
.encabezado{display:inline-block;margin:0 10px 0 0;padding:0 10px;line-height:40px;background:#cd2122;box-sizing:border-box;}
.rssticker a{color:#fff;text-decoration:none;}
.rssticker a:hover{text-decoration:none;color:#ccc;}
</style><br />
<script>
function rssticker(t){for(var a=0;a<numeroposts;a++){entradas=t.feed.entry[a],titulosposts[a]=entradas.title.$t;for(var e=0;e<entradas.link.length;e++)if("alternate"==entradas.link[e].rel){enlaceposts[a]=entradas.link[e].href;break}}startrssticker()}function startrssticker(){postactual=-1,largoactual=0,enlaces=document.getElementById("enlace"),runticker()}function runticker(){var t;0==largoactual&&(postactual++,postactual%=numeroposts,titulo=titulosposts[postactual].replace(/"/g,'"'),enlace=enlaceposts[postactual],enlaces.href=enlace),enlaces.innerHTML=titulo.substring(0,largoactual),largoactual!=titulo.length?(largoactual++,t=retardocaracter):(largoactual=0,t=retardopost),setTimeout("runticker()",t)}
var numeroposts = 6; //Entradas a mostrar
var retardocaracter = 30; //Cadencia entre caracteres
var retardopost = 4000; //Cadencia entre entradas
var titulosposts = new Array();
var enlaceposts = new Array();
var entradas = "";
</script>
<div class="rssticker">
<span class="encabezado">LO ÚLTIMO</span>
<a href="https://www.blogger.com/null" id="enlace"></a>
<!-- Aqui la dirección del feed -->
<script src="http://www.oloblogger.com/feeds/posts/default?alt=json-in-script&callback=rssticker"></script></div><br />
<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com42tag:blogger.com,1999:blog-7470192961806963601.post-40364132409896050822015-11-28T19:45:00.000+01:002015-11-28T20:33:34.499+01:00Arrastrar y soltar para subir imágenes. Nueva utilidad en BloggerPara los que se quejan de que Blogger no se actualiza, aquí tenéis una nueva función para el editor de entradas. Una más que se une al buen puñado que se han ido incorporando este año y que me siguen haciendo pensar que por fin alguien se puso las pilas con este producto de Google.<br />
<br />
Por cierto que un pajarito -y no el de Twitter- apunta rumores de que nos esperan algunas más y quizás importantes para antes de fin de año, así que <i>permanezcan atentos a sus pantallas</i> ;)<br />
<br />
<br />
La que presento hoy y que está operativa desde hace un par de días, es que ahora podéis subir subir imágenes a vuestras entradas con tan sólo arrastrarlas desde vuestro ordenador y soltarlas en el editor de entradas. La imagen se cargará automáticamente en el almacén de Blogger y se mostrará en el blog en el punto previamente seleccionado con el puntero.<a name='more'></a><br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7z-mWD9naELkLfBZ3gUvTBitOTa27C5oleezv3LY98Ax2ZRn_pK46TWqJqGl-Frfh4IYa2V1mCFLfSVabYDo87czKEdnZ5BonMGMkYb18PvZV1Gas3EyeLjUxW12BvYZh_HS3bLd_rU/s1600/arrastrar-imagen-blogger.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Arrastrar y soltar para subir imágenes" border="0" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7z-mWD9naELkLfBZ3gUvTBitOTa27C5oleezv3LY98Ax2ZRn_pK46TWqJqGl-Frfh4IYa2V1mCFLfSVabYDo87czKEdnZ5BonMGMkYb18PvZV1Gas3EyeLjUxW12BvYZh_HS3bLd_rU/s640/arrastrar-imagen-blogger.gif" title="Arrastrar y soltar para subir imágenes" width="640" /></a></div><br />
De momento esta utilidad sólo está disponible si accedéis a Blogger desde el escritorio-banco de pruebas llamado <i>Draft</i> ("Blogger en borrador", <a href="http://draft.blogger.com/">http://draft.blogger.com</a>), pero seguramente se habilitará para "Blogger normal" (<a href="http://www.blogger.com/">http://www.blogger.com</a>) en unos días, tan pronto comprueben que todo funciona correctamente.<br />
<br />
Esta nueva función se ha habilitado sólo para la pestaña del editor <span class="argot">Redactar</span>, por lo que desde la de <span class="argot">HTML</span> no es de aplicación. El botón-icono para subir una imagen seguirá funcionando de manera normal. Se trata por tanto de una utilidad adicional a las ya existentes.<br />
<br />
Ahora mismo salta un mensaje informativo la primera vez que intentáis subir una imagen mediante el método tradicional, es decir, mediante el botón de <span class="argot">Insertar imagen.</span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9tHp_bPt1qOipAj4iJwy6m3palgLpLRt7pLuxq8qu0Wwai6-pn1Ofk7f6FxsE5-TozxX3jzvGvfq0qOmsYhrNYnhgmhpMUQPX5dw-Mhq6VsItkal2YAKt-rfIWFhi1x06VfpbIDNg58w/s1600/arrastrar+y+soltar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Drag & Drop" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9tHp_bPt1qOipAj4iJwy6m3palgLpLRt7pLuxq8qu0Wwai6-pn1Ofk7f6FxsE5-TozxX3jzvGvfq0qOmsYhrNYnhgmhpMUQPX5dw-Mhq6VsItkal2YAKt-rfIWFhi1x06VfpbIDNg58w/s640/arrastrar+y+soltar.jpg" title="Drag & Drop" /></a></div><div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com18tag:blogger.com,1999:blog-7470192961806963601.post-62841731222206934892015-11-10T17:00:00.000+01:002015-11-10T17:00:01.687+01:00Insertar un anuncio tras un párrafo cualquiera... o lo que quieras Una vez más, y parece que va siendo una costumbre últimamente, vamos a utilizar JavaScript para solucionar una tarea que con sólo CSS no parece posible. <br />
<br />
Se trata de insertar <b>en la parte que queramos de una entrada </b> (con cierto límite) un elemento cualquiera y además hacerlo de manera automática para que nos salga en todas las entradas de igual manera. En el título cito un anuncio porque suele ser lo más solicitado, pero también podría ser una botonera social como la que veis actualmente en mis posts, o bien cualquier otro contenido. Hasta un vídeo, vaya.<br />
<br />
Lo de los límites es porque no vamos a usar ningún marcado HTML extra, pero con una caja con una clase o ID creada al efecto e insertada a mano en un punto exacto del post, el siguiente sistema sería tan preciso como quisiéramos.<a name='more'></a><br />
<br />
Sin embargo lo que intento es que no haya que estar metiendo manualmente nada de código extra en las entradas, así que simplemente elegiremos si lo hacemos tras un párrafo, tras dos o tras los que sea necesarios.<br />
<br />
<div class="separator" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMe3F-neXM1f1WJqlKhzkX_arvfXQc2f3THXf19qJpECHadFenHVsxFBU6exLzvp8oUktC0PdGpl6wfJrKWakputcuKnLunjH6MUq5dazlY1yQDHBSQX2y1LJT0pSqmDKy_kug2p2sotY/s1600/insertar+adsense.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Inserta Adsense en la parte que quieras de un post" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMe3F-neXM1f1WJqlKhzkX_arvfXQc2f3THXf19qJpECHadFenHVsxFBU6exLzvp8oUktC0PdGpl6wfJrKWakputcuKnLunjH6MUq5dazlY1yQDHBSQX2y1LJT0pSqmDKy_kug2p2sotY/s640/insertar+adsense.jpg" title="Inserta Adsense en la parte que quieras de un post" /></a></div><br />
<br />
Lo primero que hay que hacer es construir la caja con lo que queremos mostrar y darle algo de estilo. <br />
<br />
En este primer ejemplo será un anuncio de Adsense por lo que simplemente pegaremos el código que nos facilita ese servicio. Eso sí, todo ese código lo meteremos dentro de una caja con un id que podamos utilizar posteriormente para identificarlo; <span class="html">adsense1</span> en este caso.<br />
<br />
Como queremos que esto salga en todas las entradas lo incluiremos en la plantilla y para que no tengáis que buscar otro lugar, quizás más eficiente pero tan personalizado que sería distinto en cada caso, lo que vamos a hacer es colocarlo justo antes del cierre <span class="html"></body></span>, lugar dónde a todos os debería funcionar bien.<br />
<br />
<div class="vercodigo"><div id='adsense1'><br />
<span class="cambiar"><script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script><br />
<!-- Bloque adaptable comodin --><br />
<ins class='adsbygoogle'<br />
style='display:block'<br />
data-ad-client='ca-pub-XXXXXXXXXXXXXXXX'<br />
data-ad-slot='XXXXXXXXXX'<br />
data-ad-format='auto'></ins><br />
<script><br />
(adsbygoogle = window.adsbygoogle || []).push({});<br />
</script></span><br />
</div></div><br />
Lo siguiente -y que también pondremos a continuación de lo anterior en la plantilla- será formatear la caja contenedora con CSS. Como es un anuncio de 300x250 px pues ese será su tamaño. Lo pondremos flotando a la izquierda con respecto al texto y los márgenes serán para que no se pegue demasiado a este. Inicialmente le ponemos un <span class="css">display: none;</span> para que no se vea ni siquiera al final de la página. Con el JavaScript ya lo haremos visible cuando corresponda.<br />
<br />
<div class="vercodigo"><style><br />
#adsense1 {<br />
display: none;<br />
float: left;<br />
width: 300px;<br />
height: 250px;<br />
margin: 0 20px 10px 0 ;<br />
overflow: hidden;<br />
background: #ccc;<br />
}<br />
</style></div><br />
Y por último -también para incluir a continuación de lo anterior- la parte JavaScript. <br />
<br />
<div class="aviso"><span style="font-size: 80%;">He usado jQuery así que si no tenéis esa librería en vuestra plantilla no olvidéis hacerlo ahora. Sólo hay que incluir una línea como esta. En Blogger sería justo después de <span class="html">]]></b:skin></span>: <br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/></span></div><br />
Partiendo de la base de que los saltos de línea separan párrafos, lo que hace es sencillo: busca el segundo salto de línea (<span class="html"><br/></span>)que hayáis incluido en el contenido de cada entrada y justo después inserta el bloque <span class="css">#adsense1</span> antes generado. Adicionalmente lo hace visible con ese <span class="css">inline-block</span> que veis.<br />
<br />
<div class="vercodigo"><script type="text/javascript">//<![CDATA[<br />
$(document).ready(function() {<br />
$('#adsense1').insertAfter($('br:eq(1)')).css('display','inline-block');<br />
});<br />
//]]></script></div><br />
En algunos casos hará falta que ese valor 1 que hay dentro de los paréntesis de <span class="html">eq()</span> sea 0, cosa que dependerá de si vuestro editor de entradas inserta uno o dos saltos de línea para separar párrafos. Es cuestión de probar.<br />
<br />
Para hacerlo tras el segundo, tercer o posteriores párrafos sólo habrá que incrementar ese número, pero por si tenéis entradas cortas intercaladas con otras generalmente más largas, lo mejor será que no uséis un número muy alto.<br />
<br />
Sólo tenéis que tener una precaución y es que no haya saltos de línea al principio de vuestros artículos para evitar que la caja <span class="css">#adsense1</span> se inserte dónde no queréis.<br />
<br />
<hr/><br />
Para otro bloque distinto de anuncios en otra parte, simplemente se crea otra caja con otro id distinto (<span class="css">#adsense2</span>, por ejemplo), se crea el estilo necesario y se añade otra línea idéntica a la que hay tras el <span class="html">$(document).ready(function() {</span>, pero con ese otro id y el número de saltos de línea necesarios.<br />
<br />
Y ahora siguiendo el mismo sistema ¿qué tal si metemos una botonera social al principio de las entradas en lugar de un anuncio?<br />
<br />
<div class="vercodigo"><style><br />
#redes {<br />
display: none;<br />
float: right;<br />
width: 76px;<br />
margin: 0 0 10px 10px;<br />
padding: 5px;<br />
border: 1px solid #ccc;<br />
border-radius: 5px;<br />
background: #eee;<br />
text-align: center;<br />
}<br />
</style><br />
<div id='redes'><br />
<!--Twitter --><br />
<div class='bottwi'><br />
<a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script><br />
</div><br />
<!--Facebook--><br />
<div class='botfac'><br />
<iframe src='//www.facebook.com/plugins/like.php?width&amp;layout=box_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=65' scrolling='no' frameborder='0' style='border:none; overflow:hidden; height:65px;' allowTransparency='true'></iframe><br />
</div><br />
<!-- Google +1 --><br />
<div class='botgoo'><br />
<div class='g-plusone'/><br />
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script><br />
</div><br />
</div><br />
<script type="text/javascript">//<![CDATA[<br />
$(document).ready(function() {<br />
$('#redes').insertAfter($('br:eq(3)')).css('display','inline-block');<br />
});<br />
//]]></script></div><br />
<hr/><br />
Me consta que no todos llegáis al final de todos los posts que escribo, pero para los que sí, <a href="http://codepen.io/oloman/pen/cupgw">este enlace</a> os llevará a un CodePen dónde podéis practicar y ver una variante para poner la botonera justo al principio de la entrada usando como referencia el <span class="css">post-body</span> que todas las entradas de Blogger incluyen.<div class="blogger-post-footer"><hr/><a href="http://www.oloblogger.com">Oloblogger</a></div>Olomanhttp://www.blogger.com/profile/01957235221463243588noreply@blogger.com51