Glass: Un servicio distinto |
Una vez que nos registramos gratuitamente, tenemos que agregar la extensión ya sea para Firefox como para Chrome y a partir de allí, se nos agregará un botón al navegador. Desde cualquier sitio, haciendo click en él, se abrirá un panel donde, por ejemplo, si elegimos New Slide, podremos dejar mensajes, agregar enlaces, imágenes o incluso videos agregando las direcciones URL de estos que luego, podrán ser vistos por cualquiera que use el servicio o sól opor aquellos que nosotros hayamos elegido.


Navegando entradas de una etiqueta usando JSON |
A partir de la navegación por entradas usando JSON, otra posibilidad es hacer algo similar con las etiquetas pero, usando algún otro dato que también nos dan los feeds y el resultado, será algo parecido a esta entrada pero, agregándole la posibilidad de avanzar y retroceder en la lista sin necesidad de salir de la página, cargándolas de manera dinámica.
Esta vez, en lugar de contar las entradas y paginarlas, vamos a usar el dato de página anterior y página siguiente que puede ser leido en el feed ya que las páginas son enlaces que tienen un atributo rel específico pero, hay varios enlaces generales así que las buscamos de esta manera:
var urlanterior = "";
var urlsiguiente = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
// si existe, guardamos la dirección a la página anterior
urlanterior = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
// si existe, guardamos la dirección a la página siguiente
urlsiguiente = json.feed.link[k].href;
}
}http://www.blogger.com/feeds/33571139/posts/default/-/iconos/-/iconos?alt=json-in-script&start-index=6&max-results=5&orderby=published
así que usaremos JavaScript para modificarla un poco eliminando una parte y que se adapte al formato que uno conoce.
Entonces, como en todos los casos anteriores, primero el JavaScript que ponemos antes de </head>:
<script type='text/javascript'> //<![CDATA[ ... aquí ponemos el contenido del script //]]> </script>
<script type='text/javascript' src='URL_archivo.js' />// estos son los datos que deben definirse var entradasporpagina = 5; // establecer la cantidad de entradas a mostrar var urlsitio = "http://miblog.blogspot.com"; // cambiar por el nombre del sitio var imgxdefecto = "http://xxxxxxxxxxx"; // establecer la dirección de la imagen por defecto a ser utilizada var cualetiqueta = "nombreetiqueta"; // definir la etiqueta a mostrar var flagfirst = 0; var cantidadposts = 0; var urlanterior, urlsiguiente; // esta es la función genérica que elimina las etiqueas y crea el resumen function eliminartags(cual,longitud){ var resumen = cual.split("<"); for(var i=0;i<resumen.length;i++){ if(resumen[i].indexOf(">")!=-1){ resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length); } } resumen = resumen.join(""); resumen = resumen.substring(0,longitud-1); return resumen; } // esta es la misma función de siempres con algunas variantes function showpageetiquetas(json) { var entry, posttitle, posturl, postimg, postcontent; var salida = ""; // vamos a buscar las direcciones para navegar la lista for (var k = 0; k < json.feed.link.length; k++) { if (json.feed.link[k].rel == 'previous') { // esta es la página anterior urlanterior = json.feed.link[k].href; } if (json.feed.link[k].rel == 'next') { // esta es la página siguiente urlsiguiente = json.feed.link[k].href; } } // leemos tantas entradas como definimos for (var i = 0; i < entradasporpagina; i++) { // si no hay más, terminamos el bucle if (i == json.feed.entry.length) { break; } entry = json.feed.entry[i]; // este es título de cada entrada posttitle = entry.title.$t; // buscamos la URL de la entrada for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { // la guardamos posturl = entry.link[k].href; break; } } // buscamos el contendio de la entrada y lo guardamos if ("content" in entry) { postcontent = entry.content.$t; } else if ("summary" in entry) { postcontent = entry.summary.$t; } else { postcontent = ""; } // buscamos la imagen o usamos una imagen por defecto if ("media$thumbnail" in entry) { postimg = entry.media$thumbnail.url; } else { postimg = imgxdefecto; } // terminada la lectura, vamos creando el código HTML salida += "<div class='paginaetiquetas'>"; salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>"; salida += "<p>" + eliminartags(postcontent,100) + " ...</p>"; salida += "</div>"; } // terminamos el bucle y escribimos el resultado que son las entradas encontradas document.getElementById("misetiquetas").innerHTML = salida; // vamos a crear la parte inferior con la navegación salida = ""; // si hay una página anterior, ponemos el elnace y sino, sólo un texto if(urlanterior) { salida += "<a href='javascript:navpaginaetiquetas(-1);' class='anterior'>anterior</a>"; } else { salida += "<span class='deshabilitado anterior'>anterior</span>"; } // si hay una página siguiente, ponemos el elnace y sino, sólo un texto if(urlsiguiente) { salida += "<a href='javascript:navpaginaetiquetas(1);' class='siguiente'>siguiente</a>"; } else { salida += "<span class='deshabilitado siguiente'>siguiente</span>"; } // le agregamos un enlace a la primera página salida += "<a href='javascript:navpaginaetiquetas(0);' class='inicio'>inicio</a>"; // escribimos el código document.getElementById("navegadionetiquetas").innerHTML = salida; } // esta es la funcion que creará la dirección del feed que vamos a leer function navpaginaetiquetas(direccion){ var p, parametros; if(direccion==-1) { // página anterior p = urlanterior.indexOf("?"); parametros = urlanterior.substring(p); } else if (direccion==1) { // página siguiente p = urlsiguiente.indexOf("?"); parametros = urlsiguiente.substring(p); } else { // página inicial parametros = "?start-index=1&max-results=" + entradasporpagina + "&orderby=published&alt=json-in-script" } parametros += "&callback=showpageetiquetas"; incluirscript(parametros); } // esta es la funcion que carga el script de manera dinámica function incluirscript(parametros) { // si no es la primera vez, borramos el script anterior if(flagfirst==1) {removerscript();} // borramos todo y ponemos un texto o una imagen de carga document.getElementById("misetiquetas").innerHTML = "<div id='loadingscript'></div>"; document.getElementById("navegadionetiquetas").innerHTML = ""; // este es el archivo con los feeds var archivofeeds = urlsitio + "/feeds/posts/default/-/" + cualetiqueta + parametros; // lo cargamos y ejecutamos var nuevo = document.createElement('script'); nuevo.setAttribute('type', 'text/javascript'); nuevo.setAttribute('src', archivofeeds); nuevo.setAttribute('id', 'OTROTEMPORAL'); document.getElementsByTagName('head')[0].appendChild(nuevo); flagfirst = 1; } // esta es la función que remueve el script cargado previamente function removerscript() { var el = document.getElementById("OTROTEMPORAL"); var padre = el.parentNode; padre.removeChild(el); } // cuando se cargue nuestro sitio, iniciamos las funciones onload=function() { navpaginaetiquetas(0); }
<style>
#misetiquetas { /* el contenedor */
margin: 0 auto;
width: 314px;
}
#loadingscript { /* el texto o imagen de carga */ }
.paginaetiquetas { /* cada una de las entradas */
border: 2px solid #101921;
height: 72px;
margin: 5px 0;
padding: 5px;
width: 300px;
}
.paginaetiquetas img { /* la miniatura */
float: left;
height: 72px;
padding-right: 5px;
width: 72px;
}
.paginaetiquetas h6, .paginaetiquetas h6 a { /* los títulos de las entradas */
font-size: 11px;
font-weight: normal;
margin: 0;
}
.paginaetiquetas p { /* los resúmenes */
font-size: 11px;
margin: 5px 0;
}
#navegadionetiquetas { /* el contenedor con los enlaces para navegar */
border: 1px solid #404951;
color: #BBB;
font-size: 18px;
text-align: center;
margin:0 auto;
width:314px;
}
#navegadionetiquetas a { /* los enlaces para navegar */
color: #BBB;
display:block;
font-size: 18px;
padding: 5px 10px;
}
#navegadionetiquetas span { /* los textos deshabilitados */
color: #666;
padding: 5px 10px;
}
/* las posiciones de los enlaces para navegar */
#navegadionetiquetas .siguiente {float: right;}
#navegadionetiquetas .anterior {float: left;}
#navegadionetiquetas .inicio {text-align: center;}
</style><div id="misetiquetas"></div> <div id="navegadionetiquetas"></div>
Agregar un botón de Enviar para Facebook |
El nuevo botón sólo puede ser agregado utiliando lenguaje XFMBL por lo tanto, si no tenemos incorporada esta posibilidad a nuestro sitio, primero que nada debemos colocar lo siguiente justo después de <body>:
<div id='fb-root'></div> <script src='http://connect.facebook.net/es_ES/all.js#appId=APP_ID&xfbml=1'></script>
<fb:send href='URL'></fb:send>En Blogger si queremos que la URL apunte a cada entrada en particular, deberíamos condicionar el botón de tal forma que sólo se muestre en las entradas individuales y utilizar las expresiones de Blogegr para indicar esa dirección:
<b:if cond='data:blog.pageType == "item"'> <fb:send expr:src='data:post.url'></fb:send> </b:if>
<fb:like src='http://miblog.blogspot.com' send='true' width='450' show_faces='true'></fb:like><b:if cond='data:blog.pageType == "item"'> <fb:like expr:src='data:post.url' send='true' width='450' show_faces='true'></fb:like> </b:if>

La propiedad cursor |
cursor: valor;
El valor por defecto es auto; el valor default muestra la fecha típica de selección y si usamos el valor none no se mostrará ninguno:
cursor: pointer;
Hay cuatro modelos disponibles:
cursor: grab; cursor: grabbing; cursor: zoom-in; cursor: zoom-out;
cursor: -moz-grab; cursor: -webkit-grab; cursor: -o-grab; cursor: grab; cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: grabbing; cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: -o-zoom-in; cursor: zoom-in; cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: -o-zoom-out; cursor: zoom-out;
cursor: count-down; cursor: count-up; cursor: count-up-down;
Botones multilínea con CSS3 |
El demo puede verse funcioanndo acá y la idea es crear botones que tengan varias líneas de texto.
En la página del autor hay varios ejemplos y este sólo es uno de ellos:
<style>
a.multi-line-button {
/* lo normal */
background-color: #60a3d8;
border-color: #2970a9;
border-left-color: #60a3d8;
border-top-color: #60a3d8;
border-style: solid;
border-width: 1px;
color:#EEE;
display: block;
margin: 0.2em auto;
padding: 12px 15px;
text-align: center;
text-decoration: none;
/* el CSS3 */
-moz-background-clip: padding;
-webkit-background-clip: padding;
-o-background-clip: padding-box;
-ms-background-clip: padding-box;
-khtml-background-clip: padding-box;
background-clip: padding-box;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #89BBE2), color-stop(50%, #60A3D8), color-stop(100%, #378BCE));
background-image: -moz-linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
background-image: linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#89bbe2', EndColorStr='#378BCE');
-moz-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
-webkit-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
-o-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
text-shadow: #2e7ebd 0 1px 2px;
}
a.multi-line-button .title {
color: #CFF;
display: block;
font-family: Times New Roman;
font-size: 24px;
opacity: 0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
a.multi-line-button .subtitle {
color: #DEF;
display: block;
font-family: Georgia;
font-size: 14px;
margin-top: 4px;
opacity: 0.7;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
a.multi-line-button:hover .title {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
a.multi-line-button:hover .subtitle {
opacity: 0.8;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
a.multi-line-button:active {
padding: 13px 15px 11px;
}
a.multi-line-button:hover, a.multi-line-button:focus {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #9DC7E7), color-stop(50%, #74AFDD), color-stop(100%, #378BCE));
background-image: -moz-linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
background-image: linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
}
a.multi-line-button:active, a.multi-line-button.depressed {
border-color: #2970a9;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5796C8), color-stop(100%, #6AA2CE));
background-image: -moz-linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
background-image: linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
</style><a class='multi-line-button' href='#' style='width:14em'> <span class='title'>MI EJEMPLO</span> <span class='subtitle'>el botón con una segunda línea de texto de cualquier longitud</span> </a>
Happy Easter |



El monstruo del cursor |
Los carteles que flotan |
Esa posición se establece indicando el valor de cuatro posibles propiedades: left top right y bottom donde top:0; left:0; es el ángulo superior izquierdo de la ventana del navegador y bottom:0; right:0; es el ángulo inferior derecho.
Dado que esa posición depende del tamaño de la ventana, es posible que en monitores con resoluciones de pantalla muy grandes, el cartel se muestre "muy lejos"; eso suele resolverse con JavaScript pero, si uno no quiere complicarse, basta establecer la posición utilizando porcentajes como left: 50%.
Su contenido puede ser cualquier cosa ya que sólo se trata de una etiqueta exactamente igual a las demás; puede tener textos, enlaces, imágenes, tablas, videos, lo que se nos ocurra pero, siempre es bueno que se le agregue alguna clase de enlace que permita "cerrarla".
Los detalles del ejemplo:
<style>
#fijo {
background-color: #678;
border: 1px solid #234;
bottom: 20px;
color: #FFF;
font-size: 16px;
outline: 1px solid #CCC;
padding: 10px;
position: fixed;
left: 50%;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 300px;
z-index: 1;
}
#fijo a { /* depende de la imagen a usar */
display: block;
float: right;
height: 35px;
width: 35px;
}
</style>
<div id="fijo">
<a href="javascript:void(0);" onclick="document.getElementById('fijo').style.display='none';">
<img src="URL_IMAGEN" />
</a>
<p> ....... el contenido ....... </p>
</div>
Resumen de entradas con paginación usando JSON |
La combinación de ambas limitaciones es el motivo fundamental por la cual debemos usar valores pequeños; leer sólo una cantidad de entradas y mostrar eso pero claro, uno siempre quiere más; entonces se hace imprescindible que tengamos alguna clase de paginación o navegación que nos permita ir mostrando pedacitos de información e irlas cargando a medida que el usuario las solicita.
Acá es cuando podemos hacer uso del parámetro start-index que es el que nos permite solicitar datos a partir de determinada entrada; por ejemplo, esto cargaría las últimas 10 entradas:
http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion
http://miblog.blogspot.com/feeds/posts/default?start-index=11&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion
http://miblog.blogspot.com/feeds/posts/default?start-index=21&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion http://miblog.blogspot.com/feeds/posts/default?start-index=31&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion
Muchos podrían decir que, sin embargo, hay decenas de sitios donde parece que esto de la paginaciòn funciona ya que podemos navegar por la información sin salir de la página, vemos alguna clase de imagen de carga y avanzamos o retrocedemos pero, ese tipo de sitios suele usar PHP o Ajax, dos cosas que en Blogger nos están vedadas así que hay que buscar una solución alternativa y una de ellas es utilizar la idea de cargar scripts de manera dinámica de tal forma que si eso lo combinamos con lo inverso y podemos remover el script, solucionaríamos el problema y podríamos cargar los datos, usarlos y deshacernos de ellos.
Entonces, vamos a tratar de usar eso para mostrar TODAS las entradas del blog en una misma página sin colapsarla, agregándole la posibilidad de navegar por ellas.

¿Cómo paginamos algo? Necesitamos tres datos: saber la cantidad total de entradas, determinar la cantidad de entradas por página que se mostrarán y saber en qué página estamos; lo primero es un dato que tiene el mismo feed así que podemos leerlo ya que hay muchos gadgets que muestran la cantidad de entradas publicadas:
postporpagina = 50; // es un dato que definimos nosotros cantidadposts = parseInt(json.feed.openSearch$totalResults.$t); // leemos la cantidad de entradas publicadas cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1; // y calculamos la cantidad total de páginas
// estos son los datos que debemos establecer
var postporpagina = 60; // la cantidad de entradas a mostrar por página
var urlsitio = "http://miblog.blogspot.com"; // la url de nuestro blog
var minpaginas = 5; // la cantidad mínima de páginas a mostrar
var maxpaginas = 10; // la cantidad máxima de páginas a mostrar
var imgxdefecto = "http://xxxxxxxxxxx"; // la dirección de la imagen por defecto a ser utilizada
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 una <a href="http://vagabundia.blogspot.com/2010/12/usar-json-para-mostrar-las-entradas-del.html" target="_blank">entrada anterior</a>
salida += "<div class='paginaposts'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + 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); }Faltaría darle alguna clase de estilo y allí, las posibildiades son muchas; en este ejemplo, usé algo así: Ver/Ocultar [+]
<style>
#resultados { /* es el rectángulo del DIV donde se mostrarán */ }
#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: 35px;
margin: 1px;
padding: 5px;
width: 197px;
}
.paginaposts a { /* los enlaces */
color: #DDD;
display: block;
font-size: 11px;
text-decoration: none;
}
.paginaposts img { /* la imagen miniatura */
float: left;
height: 36px;
width: 36px;
}
.paginaposts h6 { /* el título de las entradas */
float: right;
height: 45px;
margin: 0;
width: 145px;
}
.paginaposts:hover { /* un efecto hover */
background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);
background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));
filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');
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;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#paginacion span.actual { /* resaltamos la página actual */
color: #FFF;
padding: 0 5px;
-moz-box-shadow: 0 0 30px #DDD inset;
-webkit-box-shadow: 0 0 30px #DDD inset;
box-shadow: 0 0 30px #DDD inset;
}
#paginacion a:hover { /* efecto hover sobre los enlaces */
color: #FFF;
-moz-box-shadow: 0 0 20px #666 inset;
-webkit-box-shadow: 0 0 20px #666 inset;
box-shadow: 0 0 20px #666 inset;
}
#paginacion .antesdespues { border: none; }
#paginacion .antesdespues:hover {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#paginacion span.deshabilitado { /* los enlaces deshabilitados */
border: none;
color: #666;
}
/* la salida de la cantidad total */
#totales {text-align:center;}
</style><style> /* la reglas de estilo </style> <!-- cargo el script --> <script src="URL_miscript.js"></script> <!-- los divs contenedores --> <!-- aquí se mostrarán los posts --> <div id="resultados"> </div> <!-- elimino flotaciones --> <div style="clear:both;"> </div> <!-- aquí se mostrará la paginación --> <div id="paginacion"> </div> <!-- aquí se mostrará el texto con los totales --> <div id="totales"> </div>
Colocar texto alrededor de una imagen |
Es cierto que en algunas plantillas se ven cosas como float: center; pero eso tiene el mismo efecto que poner float: pepito; ya que, cuando el navegador no reconoce una propiedad, simplemente la ignora y sigue de largo sin hacer nada ni indicar que hay un error así que, cualquier valor colocado que no sea left, right o none no hará nada de nada.
¿Para qué hacer que algo flote? El uso más común es para "acomodar" cierto texto alrededor de una imagen:
<div><img style="float: left;" src="URL_imagen" /> el texto a mostrar </div>
Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.<div><img style="float: right;" src="URL_imagen" /> el texto a mostrar </div>
Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.Lo que si es posible es utilizar columnas donde tengamos una imagen centrada y dos textos, uno a su derecha y otro a su izquierda. La primera solución para eso es un esquema de este tipo:
<style>
#contenedor-center {
margin: 0 auto;
text-align: center;
width: 620px;
}
#texto-L, #texto-R { width: 200px; }
#texto-L { float: left; text-align:right; }
#texto-R { float: right; text-align:left; }
</style>
<div id="contenedor-center">
<div id="texto-L">
<p> el texto a mostrar </p>
</div>
<div id="texto-R">
<p> el texto a mostrar </p>
</div>
<img src="URL_imagen" />
</div>Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.
Aenean sollicitudin urna quis nibh ultricies rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec commodo ligula. Ut eleifend, justo elementum tempor pharetra, eros nunc rhoncus nibh, nec eleifend tellus mi vitae mauris. Curabitur a mauris varius est bibendum iaculis? Nam in felis mauris. Cras odio dui, fermentum ac tincidunt in; condimentum non nulla. Proin convallis; lectus sit amet sollicitudin rutrum, sapien quam porta purus, et feugiat felis lacus id dui. Cras sed pretium quam.

En css-tricks.com dan una solución aternativa utilziando el pseudo-elemento before para crear un "agujero" y allí poner la imagen:
<style>
#contenedor-center {
margin: 0 auto;
position: relative;
width: 620px;
}
#imagen-center {
position: absolute;
top: 0;
left:50%;
margin-left:-100px; /* el margen es la mitad del ancho de la imagen */
}
#texto-L, #texto-R { width: 49%; }
#texto-L { float: left; }
#texto-R { float: right; }
#texto-L:before, #texto-R:before {
content: "";
height: 300px; /* la altura es igual a la altura de la imagen */
width: 100px; /* el ancho es la mitad del ancho de la imagen */
}
#texto-L:before { float: right; }
#texto-R:before { float: left; }
</style>
<div id="contenedor-center">
<img id="imagen-center" src="URL_IMAGEN" />
<div id="texto-L">
<p> el texto a mostrar </p>
</div>
<div id="texto-R">
<p> el texto a mostrar </p>
</div>
</div>
Cras tincidunt auctor metus in interdum. Nam semper varius est, sed pulvinar tellus dignissim vel. Fusce lobortis congue interdum. Morbi lobortis gravida rutrum. Fusce scelerisque fringilla diam, vitae viverra justo rhoncus auctor. Nullam metus purus; sollicitudin sit amet pulvinar ut, euismod at odio. Duis bibendum lacus nec velit posuere pulvinar. Praesent tristique elit a felis tincidunt eu dictum diam ultrices. Donec accumsan posuere accumsan? Maecenas condimentum vulputate ante ac egestas. Suspendisse et enim est, interdum dapibus metus. Nullam venenatis molestie rutrum.
Aenean sollicitudin urna quis nibh ultricies rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec commodo ligula. Ut eleifend, justo elementum tempor pharetra, eros nunc rhoncus nibh, nec eleifend tellus mi vitae mauris. Curabitur a mauris varius est bibendum iaculis? Nam in felis mauris. Cras odio dui, fermentum ac tincidunt in; condimentum non nulla. Proin convallis; lectus sit amet sollicitudin rutrum, sapien quam porta purus, et feugiat felis lacus id dui. Cras sed pretium quam.
Transiciones, sliders y slideshows |
En un primer ejemplo, armamos una especie de lista con imágenes del mismo tamaño que funcionará de manera similar a un slider:
<div id="demoANIM1">
<div id="demoANIM1imagenes">
<img src="URL_IMAGEN1" />
<img src="URL_IMAGEN2" />
<img src="URL_IMAGEN3" />
<-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
<img src="URL_IMAGEN7" />
</div>
</div>No importa, ahora le agregaremos algunos enlaces para "navegar" ya sea arriba o abajo de lo anterior:
<div id="demoANIM1links"> <a onclick="srcdemoANIM1(0);" href="javascript:void(0);">1</a> <a onclick="srcdemoANIM1(1);" href="javascript:void(0);">2</a> <a onclick="srcdemoANIM1(2);" href="javascript:void(0);">3</a> <-- agregamos un enlace para cada una de las imágenes --> <a onclick="srcdemoANIM1(6);" href="javascript:void(0);">7</a> </div>
<style>
#demoANIM1 { /* es el DIV contenedor */
/* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
height: 375px;
width: 500px;
margin: 0 auto; /* lo centro */
overflow: hidden; /* impido que se deborde */
position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
}
#demoANIM1imagenes { /* es el contendor interno donde están las imágenes */
/* lo fijo arriba */
position:absolute;
left: 0;
top: 0;
/* le digo que su ancho es igual a la suma del ancho de todas imágenes */
width: 3500px; /* 500 * 7 = 3500 */
/* y le digo que cualquier cambio sea animado */
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s.ease-in-out;
-o-transition:all 1s.ease-in-out;
transition:all 1s ease-in-out;
}
#demoANIM1imagenes img { /* fuerzo a que las imágenes se vean todas iguales */
height: 375px;
width: 500px;
}
/* y le pongo un poc de estilo a los numeritos que sirven de enlace */
#demoANIM1links {
border-bottom: 1px solid #345;
margin: 0 auto;
padding: 10px 0;
text-align: center;
width: 500px;
}
#demoANIM1links a {
background-color: #345;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 4px #ABC inset;
margin: 0 2px;
padding: 4px 8px;
}
#demoANIM1links a:hover {
box-shadow: 0 0 8px #ABC inset;
color: #FFF;
}
</style>Para eso necesito un script que es lo que se ve en el atributo onclick de los enlaces.
<script>
//<![CDATA[
function srcdemoANIM1(num) {
var mover = num * 500;
document.getElementById("demoANIM1imagenes").style.left = -mover + "px";
}
//]]>
</script>






El atributo border=0 |
La teoría es la siguiente: por defecto, los navegadores crean un borde automático en toda etiqueta IMG que sea un enlace; ese borde tiene un pixel de ancho y es del mismo color que el texto de los enlaces y por lo tanto, si no queremos que se muestre ese borde, debenos agregar ese atributo.
Cuando subimos una imagen a Blogger, el código siempre es un enlace que permite abrir la imagen original y si bien nos muestra un código "excesivo", de todos modos, allí está el famoso atributo:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://......./s1600/........" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="xxx" src="http://......./sxxx/........" width="xxx" />
</a>
</div>Si pero no; esta es la misma imagen con el mismo código y sin embargo, tiene un borde:
En Blogger, todo eso suele estar definido al inicio; por ejemplo, en una plantilla minima dice esto:
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}a:link, a:visited {
color: #FF0;
outline: none;
text-decoration:none;
}
a:hover {
color: #F0F;
outline: none;
text-decoration:none;
}
a img {
border: none;
}.post img {
border:4px outset #940f04 ;
padding:4px;
}.separator {
.......
}
.separator img {
.......
}
.separator img:hover {
.......
}Usando el mismo código agregado por Blogger podemos crear reglas que lo modifiquen y estas reglas de estilo, tendrán prioridad sobre los atributos:
.separator img {
background-color: #EEE;
border: 5px solid #ABC;
height: 100px;
outline: 1px solid #DDD;
padding: 5px;
width: 100px;
}
Social Icon Set by oxanaart |
| Social Icon Set by oxanaart | |
| Contiene 120 íconos de 64x64, 128x128 y 256x256, en formato PNG.descargar | |
Charlie Chaplin Google Doodle |
MpppIt: Un buscador de archivos MP3 |
MpppIt es un buscador de archivos MP3 que se identifica a si mismo como Super Simple y realmente lo es; basta poner el nombre del tema o el intérprete o cualquier otra cosa que se nos ocurra para que aparezca una lista y un reproductor que ejecuta automáticamanete el primer resultado.Haciendo click en cualquier item de la lista, cambiamos de tema o seguimos buscando.

Upload to Dropbox nos permitirá subir el tema directamente a nuestra cuenta para lo cual usa el sistema de autentificacion del mismo DropBox que es un método similar al que usa Twitetr para aceptar aplicaciones de terceros. Esto no lo he probado porque en general no me gusta autorizar accesos que a veces son un poco vagos en cuanto a sus condiciones. Para más información puede verse el blog del sitio aunque poco dicen.
Direct Link nos da el enlace directo así que con ese botón, podemos descargarlos y los subimos nosotros mismos.
CSS experimental: Un reloj |
No es puro CSS porque requiere de un pequeño script que es el que define la hora y que está realizado con JQuery aunque bien podría modificarse para no requerir ninguna librería.
Claro, no es algo que uno utilizaría pero si es un ejemplo más de las posibilidades del CSS.
css3.me: Una ayuda para generar estilos |
Lo interesante de este es que incluye las necesarias para que funcione en versiones de Internet Explorer anteriores a la 9 siempre y cuando puedan ser "traducidas" a filtros.

background-color:#ffffff;
border-width:2px;
border-color:transparent;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
/*IE DOES NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow:inset 0px 0px 20px #000000;
-webkit-box-shadow:inset 0px 0px 20px #000000;
box-shadow:inset 0px 0px 20px #000000;
/*Inner elements should not cover inner shadows*/
/*Chrome renders inset shadows incorrectly with border-radius*/
/*IE DOES NOT SUPPORT INSET SHADOWS*/
background: -moz-linear-gradient(left, #000000, #85a1ff);
background: -webkit-gradient(linear, left top, right top, from(#000000), to(#85a1ff));
background: -o-linear-gradient(left, #000000, #85a1ff);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#000000', endColorstr='#85a1ff')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background: linear-gradient(left, #000000, #85a1ff);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
/*All filters must be placed together*/
.miejemplo {
....... y aquí pegamos el código .......
}Faltaría recordar que para que ciertas propiedades tengan efecto, las etiquetas donde son agregadas deben ser dimensionadas mediante width y height.
Más transiciones, sliders y slideshows |
En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.
Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:
<div id="demoANIM2">
<div id="demoANIM2imagenes">
<img id="img_1" src="URL_IMAGEN1" class="visible" />
<img id="img_2" src="URL_IMAGEN2" class="novisible" />
<img id="img_3" src="URL_IMAGEN3" class="novisible" />
<-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
<img id="img_7" src="URL_IMAGEN7" class="novisible" />
</div>
</div>
<div id="demoANIM2links">
<a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a>
<a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a>
<a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a>
<-- agregamos un enlace para cada una de las imágenes -->
<a onclick="srcdemoANIM2(7);" href="javascript:void(0);">7</a>
</div>Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:
<style>
#demoANIM2 { /* es el DIV contenedor */
/* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
height: 375px;
width: 500px;
margin: 0 auto; /* lo centro */
overflow: hidden; /* impido que se deborde */
position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
}
#demoANIM2imagenes img { /* las imágenes */
/* lo fijo arriba */
position:absolute;
left: 0;
top: 0;
/* fuerzo a que las imágenes se vean todas iguales */
height: 375px;
width: 500px;
/* y le digo que cualquier cambio sea animado */
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s.ease-in-out;
-o-transition:all 1s.ease-in-out;
transition:all 1s ease-in-out;
}
#demoANIM2imagenes img.visible { /* la imagen es visible */
opacity:1;
filter: alpha(opacity=100);
}
#demoANIM2imagenes img.novisible { /* la imagen está oculta */
opacity:0;
filter: alpha(opacity=0);
}
/* y le pongo un poc de estilo a los numeritos que sirven de enlace */
#demoANIM2links {
border-bottom: 1px solid #345;
margin: 0 auto;
padding: 10px 0;
text-align: center;
width: 500px;
}
#demoANIM2links a {
background-color: #345;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 4px #ABC inset;
margin: 0 2px;
padding: 4px 8px;
}
#demoANIM2links a:hover {
box-shadow: 0 0 8px #ABC inset;
color: #FFF;
}
</style><script>
//<![CDATA[
// establezco cuál es la imagen visible inicial
var imgvisible = "img_1";
function srcdemoANIM2(num) {
// la imagen a ser mostrada
var id = "img_" + num;
var mostrar = document.getElementById(id);
// la que ahora esta visible
var actual = document.getElementById(imgvisible);
// si son la misma no hago nada
if(mostrar==actual) {return false;}
// permutos su clase ocultando la visible y mostrando otra
actual.className="novisible";
mostrar.className="visible";
// y guardo ese dato
imgvisible = id;
}
//]]>
</script>






Superponiendo cosas con CSS |
Justamente, esas excepciones son las que nos permite superponer los rectángulos y hacer que uno se muestre encima del otro. Básicamente, hay dos propiedades que controlan esos detalles: position y z-index.
Por defecto, la propiedad position, tiene el valor static pero, admite otros como relative y absolute. Usando esos dos valores podemos ubicar cualquier cosa en un lugar preciso. Lo más simple es que el contenedor tenga el valor relative y el contendio el valor absolute:
<div style="position: relative;"> <div style="position: absolute;"> HOLA </div> </div>
<div style="position: relative;"> <div style="position: absolute; left: 30px; top: 50px;"> HOLA </div> </div>
<div style="position: relative;"> <div style="position: absolute; right: 30px; bottom: 50px;"> HOLA </div> </div>
<div style="position: relative;"> <div style="position: absolute; left: 30px; top: 50px;"> CONTENIDO UNO </div> <div style="position: absolute; right: 30px; bottom: 50px;"> CONTENIDO DOS </div> </div>
Como no los hemos definido, basta ponerles un número, y el que tenga el número más alto, se mostrará por encima sin importar la forma en que esté escrito el código; en este ejemplo, el tercero no se muestra arriba de los otros porque forzamos a que sea el segundo el que esté arriba de todo, poniéndole un valor de z-index superior:
<div style="position: relative;"> <div style="position: absolute; left: 10px; top: 30px; z-index: 1;"> CONTENIDO UNO </div> <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CONTENIDO DOS </div> <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CONTENIDO TRES </div> </div>
<style>
#superponer {
position: relative;
text-align: center;}
#superponer h5 {
color: #D0D9E1;
font-family: Georgia;
font-size: 140px;
letter-spacing: -6px;
margin: 0;
opacity: .9;
padding: 0;
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
#superponer h6 {
color: #4682B4;
font-family: Verdana;
font-size: 60px;
left: 120px;
letter-spacing: 20px;
margin: 0;
padding: 0;
position: absolute;
top: 20px;
}
#superponer h6 span {
color: #F66;
font-family: Times New Roman;
font-size: 100px;
font-style: italic;
text-shadow: 3px 3px 1px #000;
}
#superponer:hover > h6 span {
-moz-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);zoom:2;
}
</style>
<div id="superponer">
<h5> un título </h5>
<h6> eje <span> m </span> plo </h6>
</div>un título
ejemplo
Apelaciones celestiales |
Social Media Icons by Digital Art Empire |


















