Ventana Remota para Blogger - Resumen de Entradas

:-) ... buenos días, tardes, noches.

Con el frio que hace no apatece mucho salir de casa y puede ser buen momento para jugar con el diverso "codigo blogger" que tengo hace tiempo abandonado en mi baul de los recuerdos ... asi que para empezar ...

Vamos a poner de moda la Ventana Remota para Blogger de "chatarras club"

... en la que montaremos un indice como Resumen de Entradas para el blog.

... que posiblemente sea el primero operando en este formato de ventana remota.

... y que con tu imaginación es totalmente modificable y por supuesto que mejorable.

Salu2, tommy ;-)

Se parte del articulo publicado en su día por Vagabundia sobre indices para el blog ... Resumen de entradas con paginación usando JSON ... y en donde se pueden ver ... los resultados del estupendo articulo

Por mi parte sólo se han cambiado dos lineas del codigo original y se han creado las funciones necesarias para lanzar, ejecutar y controlar el indice en una ventana remota independiente.

La clave está en construir "al vuelo" una ventana popup ( una que vengo utilizando hace tiempo para usos varios ) ... que en este caso es de 660 x 600 pixels ... y en donde metemos todo el codigo necesario y hacemos que se ejecute.

El sistema funciona detectando desde que ventana padre se lanza la ventana remota hija y desde esta lanza los datos a la ventana padre que la abrio ... ver referencias en ... Creating window remote controls

Practicamente con cambiar los datos para generar indices de este tipo para Blogger y manteniendo la idea del sistema desde una ventana remota ( con algun retoque puntual ) se podria cambiar el diseño del indice por otro de los diversos que hay por la red.

Estoy seguro que los bloggeros mas avanzados en "codigo blogger" no tendran muchos problemas en adaptar y modificar este juguete a su gusto.

Tras diversas pruebas el resultado visualmente fue satisfactorio tanto en "Internet Explorer" como en "Mozilla Firefox" y tambien en "Google Chrome" aunque en este la ventana no se me dimensiono correctamente. Tambien tiene algun que otro fallo que indico en el codigo fuente que está bastante documentado y desconozco si funcionara bien en todos los blogs.

Todo ésto se presenta tal cual para quién lo quiera desarrollar mas. No hay garantias.
La idea de hacerlo en una ventana remota queda aquí funcionando.
No dispongo de mucho tiempo para dar soporte al tema y tampoco me considero un experto en la materia. Estas cosas las hago como un hobby mas. Gracias.

... edit by tommy for "chatarras club" ...

[LANZA VENTANA INDICE BLOG]

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

*** COMO SE HACE ***

*** HOW TO ***

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

INICIO:

Lo ideal seria que hicieras ántes de empezar una copia de seguridad, tanto de tu blog como de tu plantilla.

En esta versión que publico lo haremos todo Dentro de una Entrada del blog y sera necesario trabajar en el modo de Edición HTML.

Leer detenidamente todo el presente articulo y cuando esteis decididos hay que crear una entrada en vuestro blog con un nombre cualquiera para montar el juguete.

PRIMERO:

Copia y pega el código del "BLOQUE 1" dentro de la entrada.

****** BLOQUE 1 ******

<!-- ********************************************************** Estoy copiando el codigo en una entrada de Blogger tal como lo explican en "chatarras club" Cuando hayas terminado, Guardada y Publicada la entrada, el código fuente introducido estará aquí debajo oculto y sin ocupar apenas espacio visible. *********************************************************** --> <!-- ... ini codigo Ventana chatarrasclubIndex01Popup ... --> <script type="text/javascript"> // <![CDATA[ // ............................................... // ... Ventana Generica Tipo Popup Usos Varios // ... Idea y desarrollo inicial ... Abril 2010 // ... edit by tommy for "chatarras club" // ... http://chatarrasclub.blogspot.com/ // ............................................... // ... inicialmente creada para Usos Varios. // ............................................... // ... pendiente de depurar todo el codigo // ... aunque esta funcionando bien. // ... Gracias. // ............................................... var ccIndex01Popup = null; function chatarrasclubIndex01Popup( codigoIndex01, anchoVentana, altoVentana ) { // ... si Ventana existe Y esta abierta Y no esta cerrada ... entonces debe cerrarla y salir. if ( ccIndex01Popup && ccIndex01Popup.open && !ccIndex01Popup.closed ) { ccIndex01Popup.close(); return; } var anchoVentana = anchoVentana + 000; var altoVentana = altoVentana + 000; var izquierdaPosicion = (screen.width)?(screen.width-anchoVentana)/2:100; var arribaPosicion = (screen.height)?(screen.height-altoVentana)/2:100; var parametrosVentana = 'width=' + anchoVentana + ',height=' + altoVentana + ',top=' + arribaPosicion + ',left=' + izquierdaPosicion + ',scrollbars=1,location=0,directories=0,status=0,menubar=0,toolbar=0,resizable=0'; ccIndex01Popup = window.open("", "ccIndex01Popup", parametrosVentana); ccIndex01Popup.document.open(); ccIndex01Popup.document.write("<HTML>"); ccIndex01Popup.document.write("<HEAD>"); ccIndex01Popup.document.write("<!-- ... by tommy ... aka ymmot ( spanish ) ... Abril 2010 -->"); ccIndex01Popup.document.write("<TITLE>_ _ _ chatarrasclub.blogspot.com _ _ _</TITLE>"); ccIndex01Popup.document.write("</HEAD>"); ccIndex01Popup.document.write("<BODY STYLE='text-align: center; color: white; background-color: black;'>"); ccIndex01Popup.document.write( codigoIndex01 ); ccIndex01Popup.document.write("</BODY>"); ccIndex01Popup.document.write("</HTML>"); ccIndex01Popup.document.close(); ccIndex01Popup.document.focus(); // ... añadido para utilizar como Ventana Remota Index Blog. ccIndex01Popup.creator=self; // ... añadido para utilizar como Ventana Remota Index Blog. // ... ESTO ES UN APAÑO ... // ... PROBLEMS !!! // ... FORZAMOS LA RECARGA DE PAGINA VENTANA REMOTA // ... DEBIDO A ALGUNOS FALLOS ESPORADICOS QUE NO ENTIENDO. ccIndex01Popup.reload(); } // ]]> </script> <!-- ... end codigo Ventana chatarrasclubIndex01Popup ... -->
SEGUNDO:

Copia y pega el código del "BLOQUE 2" ( las TRES secciones A, B y C ) a continuación y dentro de la misma entrada.

****** BLOQUE 2 - Sección A ******

<!-- no hay error, solo tiene esa linea --> <textarea readonly="readonly" id="CODEINDEX01POPUP" style="width:000px; height:000px; display:none;">
****** BLOQUE 2 - Sección B ******

<script type="text/javascript"> // <![CDATA[ // ............................................... // ... Paso Clave para lanzar todos los enlaces // ... desde la Ventana Indice Remota Abierta // ... a la Ventana Principal del Blog Abierta. // ............................................... // ... edit by tommy for "chatarras club" // ... http://chatarrasclub.blogspot.com/ // ............................................... // // Importante: // // El sistema funciona detectando desde que ventana padre se lanza // la ventana remota hija y desde esta lanza los datos a la ventana // padre que la abrio. // // Si mientras trabajamos con la ventana remota se cierra // la ventana padre que es la principal del blog // el indice desde la ventana remota dejara de funcionar // hasta que volvamos a lanzar todo desde el propio blog. // // ............................................... function remoteLinkIndex01Popup( urlPostBlog ) { // ... debemos detectar si ventana padre del blog esta cerrada Y avisar Y cerrar ventana hija remota. // ... PROBLEMS !!! // ... en "Internet Explorer" OK detecta padre cerrada y avisa y cierra hija OK. // ... en otros navegadores el sistema funciona bien Pero a veces No detecta No avisa No cierra. if ( !window.opener || window.opener.closed ) { alert("Ventana Principal Blog Parece Estar Cerrada !!!\n\n... y No se puede Trabajar desde la Ventana Remota !!!\n\nSe debe cerrar la ventana remota y abrir el blog\n\n... para volver a lanzar todo desde alli.") ; window.self.close() ; return ; } else { // ... si todo va bien lanza links en ventana padre del blog. window.opener.location = urlPostBlog ; } } // ]]> </script> <!-- *********************************************** EL SIGUIENTE CODIGO FUE PUBLICADO POR http://vagabundia.blogspot.com/ *********************************************** ... edit by tommy for "chatarras club" ... http://chatarrasclub.blogspot.com/ SOLO SE HAN REALIZADO UNAS MINIMAS MODIFICACIONES DEL CODIGO ORIGINAL PARA LANZAR Y EJECUTAR EL INDICE EN MI VENTANA REMOTA. PRACTICAMENTE SOLO SE HAN CAMBIADO DOS LINEAS DEL CODIGO ORIGINAL Y SE HAN CREADO LAS FUNCIONES NECESARIAS PARA MI VENTANA REMOTA. ************************************************ --> <!-- RESUMEN DE ENTRADAS CON PAGINACION --> <style type='text/css'> /* ... CSS ORIGINAL ... ANULADO PARA HACER MIS PRUEBAS ... */ /* ... CSS MODIFICADO EN PARTE ... PARA MI VENTANA REMOTA ... */ /* es el rectángulo del DIV donde se mostrarán */ #resultados { height: 1000px; /* origen 1000 */ width: 660px; /* origen 660 me salen 3 columnas */ text-align: center; } #loadingscript { /* es el texto de "cargando" */ } /* estas son las reglas de estilo para las entradas */ .paginaposts { /* cada rectángulo */ border: 1px solid #555; float: left; height: 35x; /* origen 35 para salir 3 columnas */ margin: 1px; /* origen 1 */ padding: 5px; width: 197px; /* origen 197 para salir 3 columnas */ } .paginaposts a { /* los enlaces */ color: #DDD; display: block; font-size: 11px; /* origen 11 para salir 3 columnas */ text-decoration: none; } .paginaposts img { /* la imagen miniatura */ float: left; height: 36px; /* origen 36 para salir 3 columnas */ width: 36px; /* origen 36 para salir 3 columnas */ border: 0px; } .paginaposts h6 { /* el título de las entradas */ float: right; height: 40px; /* origen 45 para salir 3 columnas */ margin: 0; width: 140px; /* origen 145 para salir 3 columnas */ text-align: center; } .paginaposts:hover { /* un efecto hover */ border: 1px solid #33F; } /* estas son las reglas de estilo para la paginación inferior */ #paginacion { /* el rectángulo contenedor */ color: #BBB; font-family: Lucida Grande; font-size: 24px; font-weight: bold; height: 35px; line-height: 28px; padding: 20px 0; text-align: center; } #paginacion span, #paginacion a { /* cada número, texto o enlace */ border: 1px solid #444; color: #BBB; display: inline-block; font-family: Lucida Grande; font-size: 24px; font-weight: bold; margin: 0 2px; padding: 0 5px; } #paginacion span.actual { /* resaltamos la página actual */ color: #FFF; padding: 0 5px; } #paginacion a:hover { /* efecto hover sobre los enlaces */ color: #FFF; } #paginacion .antesdespues { border: none; } #paginacion .antesdespues:hover { } #paginacion span.deshabilitado { /* los enlaces deshabilitados */ border: none; color: #666; } /* la salida de la cantidad total */ #totales {text-align:center;} </style> <script type='text/javascript'> // <![CDATA[ // estos son los datos que debemos establecer var postporpagina = 60; // la cantidad de entradas a mostrar por página ... origen a 60 // la url de nuestro blog Sin Barra / Final tal como el ejemplo. // ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU BLOG. // ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU BLOG. // ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU BLOG. var urlsitio = "http://chatarrasclub.blogspot.com"; var minpaginas = 5; // la cantidad mínima de páginas a mostrar ... origen a 5 var maxpaginas = 10; // la cantidad máxima de páginas a mostrar ... origen a 10 // la dirección de la imagen por defecto a ser utilizada // ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU GRAFICO POR DEFECTO. // ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU GRAFICO POR DEFECTO. // ... DEBES MODIFICAR Y PONER LA DIRECCION DE TU GRAFICO POR DEFECTO. var imgxdefecto = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-yo2mXHpOZj81Cp22zW2mtEA2gHzMi5iejJIpEmNRJmn3PUWVAYNsyB0_ucQYoQROq4rwCd6Vcejl2bnUeMHriq2y4ZVhV8fNx_OfPaN3wChEp4gB6maqQoJy7aT8GsHbRQX5KKac-ju0/s0/ChatarraGrua04.jpg"; var firsttime = 0; // lo usamos para detectar la primera vez que se ejecuta var paginaactual = 1; // contendrá el número de página donde estemos var cantidadpaginas = 0; // contendrá el número total de páginas var cantidadposts = 0; // contendrá el número total de entradas // la función que interpreta los feeds y que siempre es más o menos la misma function showpageposts(json) { var entry, posttitle, posturl, postimg; var salida = ""; // la primera vez que se ejecuta la función, leemos la cantidad de entradas que hay y calculamos la cantidad de páginas if(cantidadpaginas==0) { cantidadposts = parseInt(json.feed.openSearch$totalResults.$t); cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1; } // leemos los datos que luego mostraremos for (var i = 0; i < postporpagina; i++) { if (i == json.feed.entry.length) { break; } // si no hay más, salimos entry = json.feed.entry[i]; // el título de las entradas posttitle = entry.title.$t; // buscamos la url de las entradas for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } // buscamos la imagen de las entradas o usamos la que establecimos por defecto if ("media$thumbnail" in entry) { postimg = entry.media$thumbnail.url; } else { postimg = imgxdefecto; } // armamos el código HTML de salida de manera similar a lo que se veía en el post // http://vagabundia.blogspot.com/2010/12/usar-json-para-mostrar-las-entradas-del.html salida += "<div class='paginaposts'>"; // en ORIGINAL Vagabundia asi estaba bien ... es el link de imagen. // salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; // ... // ... MODIFICADO ... by tommy for "chatarras club" ... salida += '<a href="javascript:remoteLinkIndex01Popup(' + "'" + posturl + "'" + ')"><img src=' + "'" + postimg + "'" + '/></a>'; // en ORIGINAL Vagabundia asi estaba bien ... es el link de texto. // salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>"; // ... // ... MODIFICADO ... by tommy for "chatarras club" ... salida += '<h6><a href="javascript:remoteLinkIndex01Popup(' + "'" + posturl + "'" + ')">' + posttitle + '</a></h6>'; salida += "</div>"; } // listo, ahora lo mostramos document.getElementById("resultados").innerHTML = salida; // y ejecutamos la función para paginar paginacion(); } // esta es la función que muestra la paginación function paginacion() { contadorP = 0; salida = ""; // dependiendo de donde estamos, ponemos un enlace para retroceder o no if(paginaactual>1) { salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>anterior</a>"; } else { salida += "<span class='deshabilitado'>anterior</span>"; } // se calcula y se muestran los números de las primeras páginas, una sepación y las últimas páginas if (cantidadpaginas<(maxpaginas+1)) { for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){ if (contadorP==paginaactual) { salida += "<span class='actual'>" + contadorP + "</span>"; } else { salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>"; } } } else if(cantidadpaginas>(maxpaginas-1)) { if(paginaactual<minpaginas) { for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){ if (contadorP == paginaactual) { salida += "<span class='actual'>" + contadorP + "</span>"; } else { salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>"; } } salida += " ... "; salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>"; salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>"; } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) { salida += "<a href='javascript:incluirscript(1)'>1</a>"; salida += "<a href='javascript:incluirscript(2)'>2</a>"; salida += " ... "; for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) { if (contadorP==paginaactual) { salida += "<span class='actual'>" + contadorP + "</span>"; } else { salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>"; } } salida += " ... "; salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>"; salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>"; } else { salida += "<a href='javascript:incluirscript(1)'>1</a>"; salida += "<a href='javascript:incluirscript(2)'>2</a>"; salida += " ... "; for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) { if (contadorP==paginaactual) { salida += "<span class='actual'>" + contadorP + "</span>"; } else { salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>"; } } } } // dependiendo de donde estamos, ponemos un enlace para avanzar o no if (paginaactual<contadorP-1) { salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>siguiente</a>"; } else { salida += "<span class='deshabilitado'>siguiente</span>"; } // mostramos el resultado document.getElementById("paginacion").innerHTML = salida; // y eventualmente, podemos mostrar la cantidad total var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1); var finalpagina = paginaactual * postporpagina; var totales = "Total de entradas publicadas: " + cantidadposts + " - Mostrando entradas " + iniciopagina + " a " + finalpagina; document.getElementById("totales").innerHTML = totales; } // esta es la función que escribe y ejecuta el script de manera dinámica function incluirscript(pagina) { // salvo que sea la primera vez, antes, borramos el script if(firsttime==1) {removerscript();} // borramos todo y mostramos algún mensaje de carga document.getElementById("resultados").innerHTML = "<div id='loadingscript'>cargando ...</div>"; document.getElementById("paginacion").innerHTML = ""; document.getElementById("totales").innerHTML = ""; // calculamos el valor a colocar en start-index var iniciopagina = (pagina * postporpagina) - (postporpagina - 1); // y armamos la url del feed var archivo = urlsitio + "/feeds/posts/default?start-index=" + iniciopagina; archivo += "&max-results=" + postporpagina; archivo += "&orderby=published&alt=json-in-script&callback=showpageposts"; // cargamos y ejecutamos el script de manera dinámica var nuevo = document.createElement('script'); nuevo.setAttribute('type', 'text/javascript'); nuevo.setAttribute('src', archivo); nuevo.setAttribute('id', 'TEMPORAL'); document.getElementsByTagName('head')[0].appendChild(nuevo); // establecemos los nuevos datos firsttime = 1; paginaactual = pagina; } // esta es la función que elimina un script previamente agregado utilizando su ID function removerscript() { var el = document.getElementById("TEMPORAL"); var padre = el.parentNode; padre.removeChild(el); } // ejecutamos la función por primera vez cuando se termina de cargar nuestro sitio onload=function() { incluirscript(1); } // ]]> </script> <!-- CODIGO HTML --> <div style="text-align:center;"> <!-- ini todo centrado --> <br/> <b>The Index Of "chatarras club" ~ Resumen de Entradas ~</b><br/> <br/> <!-- aquí se mostrarán los posts --> <div id="resultados"></div> <!-- elimino flotaciones --> <div style="clear:both;"></div> <br/> <!-- aquí se mostrará la paginación --> <div id="paginacion"></div> <!-- aquí se mostrará el texto con los totales --> <div id="totales"></div> <br/> <b>... edit by tommy for "chatarras club" ...</b><br/> </div> <!-- end todo centrado --> <br/>
****** BLOQUE 2 - Sección C ******

</textarea> <!-- no hay error, solo tiene esa linea -->
TERCERO:

Copia y pega el código del "BLOQUE 3" a continuación y dentro de la misma entrada.

****** BLOQUE 3 ******

<br/> <br/> <br/> <!-- ... ESTA ES LA CLAVE PARA LANZAR MI VENTANA REMOTA ... --> <div style="text-align:center;"><span style="cursor: pointer; font-family: courier new; font-size: 200%;" onclick="chatarrasclubIndex01Popup( (document.getElementById('CODEINDEX01POPUP').value), 660, 600 ); return false;" title="Lanza Ventana Indice Blogger"><b>[LANZA VENTANA INDICE BLOG]</b></span></div><br/> <!-- ... THE END ... LAS RECLAMACIONES AL MAESTRO ARMERO ... --> <br/> <br/> <br/>
FIN:

Guarda y Publica la entrada.

Una vez comprobado su funcionamiento podrás Editar tu entrada y cambiar los datos que se indican dentro del codigo fuente para que se apliquen a tu Blog.


... edit by tommy for "chatarras club" ...