Más botones con CSS3 |
<style>
ul.demobotones a {
color: #FFF;
float: left;
font-size: 26px;
height: 40px;
line-height: 40px;
margin: 0 5px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 120px;
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px;
border-radius: 9px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65A5ED", endColorstr="#AEEAFF"); * Internet Explorer */
background: #65A5ED;
background: -moz-linear-gradient(center bottom,rgb(150,238,255) 11%,rgb(131,178,229) 41%,rgb(85,155,229) 54%,rgb(194,204,234) 94%); /* Firefox */
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.11, rgb(150,238,255)),color-stop(0.41, rgb(131,178,229)),color-stop(0.54, rgb(85,155,229)),color-stop(0.94, rgb(194,204,234))); /* Chrome y Safari */
background: linear-gradient(top, #65A5ED, #AEEAFF); /* W3C */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* Chrome y Safari */
box-shadow: 0 0 4px #000; /* W3C */
}
ul.demobotones a:hover{
border-color: #000062;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#DBDBDB”, endColorstr=”#FFFFFF”); * Internet Explorer */
background: #DCDCDC;
background: -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(214,214,214) 50%,rgb(235,235,235) 71%,rgb(248,248,248) 85%); /* Firefox */
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.5, rgb(214,214,214)),color-stop(0.71, rgb(235,235,235)),color-stop(0.85, rgb(248,248,248))); /* Chrome y Safari */
background: linear-gradient(top, #dbdbdb, #fff);-moz-box-shadow: 0 0 6px #000;-webkit-box-shadow: 0 0 6px #000;box-shadow: 0 0 6px #000; /* W3C */
}
ul.demobotones a:active{
-moz-box-shadow: 0 0 2px #000; /* Firefox */
-webkit-box-shadow: 0 0 2px #000; /* Chrome y Safari */
box-shadow: 0 0 2px #000; /* W3C */
}
</style>
<ul class="demobotones">
<li><a href="#">Blogger</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Contacto</a></li>
</ul>
Home Again ... experimentos que asombran |
Algunos ejemplo usando text-shadow |
<style>
#vintage {
background-color: #EEE;
color: #707070;
font-family: Times New Roman;
font-size: 160px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
}
</style>
<h1 id="vintage">retro</h1>
<style>
#neon {
background-color: #000;
color: #FFF;
font-family: Garamond;
font-size: 160px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FF00DE, 0 0 70px #FFF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #DD00DE;
}
</style>
<h1 id="neon">neon</h1>
<style>
#inset {
background-color: #474747;
color: #222;
font-family: Helvetica;
font-size: 200px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 0px 2px 3px #666;
}
</style>
<h1 id="neon">Inset</h1>
<style>
#anaglyphic {
background-color: #FFF;
color: rgba(0,168,255,0.5);
font-family: Arial;
font-size: 200px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
}
</style>
<h1 id="anaglyphic">Arial</h1>
<style>
#fire {
background: #000;
color: #FFF;
font-family: Courier;
font-size: 200px;
margin: 200px auto;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -60px 60px #CD4606, 0 -80px 70px #973716, 10px -90px 80px #451B0E;
}
</style>
<h1 id="fire">Fire</h1>
<style>
#boardgame {
background-color: #EEE;
color: #FFF;
font-family: Arial;
font-size: 170px;
margin: 200px auto;
padding: 10px 0 50px 35px;
text-align: left;
text-transform: uppercase;
text-shadow: 10px 10px 0 #FFD217, 20px 20px 0 #5AC7FF, 30px 30px 0 #FFD217, 40px 40px 0 #5AC7FF;
}
</style>
<h1 id="boardgame">Game</h1>
JSON y las etiquetas |
<script language="JavaScript"> //<![CDATA[ imgr = new Array(); var contarlabels = 0; // esto es lo que deberíamos configurar imgr[0] = "URL_imagenxdefecto"; // establecer la imagen por defectoq euse va a utilizar showRandomImg = true; // poner false si no se quiere que la imagen sea aleatoria summaryPost = 60; // cantidad de caracteres del resumen summaryTitle = 25; // cantidad de caracteres del título numposts = 5; // cantidad de entradas a ser mostradas // la lista de etiquetas que queremos mostrar; acá hay dos pero puede haber mas // siempre entre comillas y separadas por una coma labelname = new Array("iconos","Twitter"); // los nombres de las etiquetas a mostrar labeltitle = new Array("iconos","Twitter"); // los títulos a mostrar // esta es la función general que elimina las etiquetas HTML function removeHtmlTagEtiquetas(strx,chop){ var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } s = s.join(""); s = s.substring(0,chop-1); return s; } // esta es la función que analiza las entradas y las muestra function showrecentpostsetiquetas(json) { var salida = ""; var salidainner= ""; j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; if (i == json.feed.entry.length) break; // el titulo de la entrada var posttitle = entry.title.$t; // buscamos al url del post var posturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == "alternate") { posturl = entry.link[k].href; break; } } // buscamos el contenido del post if ("content" in entry) { var postcontent = entry.content.$t; } else if ("summary" in entry) { var postcontent = entry.summary.$t; } else var postcontent = ""; // aquí se busca entre las imágenes y se selecciona una if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; // terminada la lectura de cada post, se crea el HTML del contenido var trtd = ""; trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>'; trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagEtiquetas(posttitle,summaryTitle) + '</a><br/>'; trtd += removeHtmlTagEtiquetas(postcontent,summaryPost); trtd += ' ...<div class="botline"></div>'; // y continuamos con el siguiente salidainner += trtd; j++; } // una vez que se lee la cantidad de posts indicada en numposts, se crea el HTML del DIV y se muestra salida += '<div class="featured">'; salida += '<h3>' + labeltitle[contarlabels] + '</h3>'; salida += salidainner; salida += '<a class="morelabels" href="http://vagabundia.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">ver otras entradas de '+ labelname[contarlabels] +'</a>'; salida += '</div>'; document.write(salida); contarlabels ++; } //]]> </script>
<style>
.featured { /* es el rectángulo contendor de cada etiqueta */
float: left;
font-size: 11px;
height: 390px;
margin: 0 10px;
overflow: hidden;
padding: 10px;
width: 270px;
}
.featured h3 { /* el título general */
background-color: #555;
border-bottom: 1px solid #888;
color: #BBB;
margin: 0 0 10px;
padding: 5px 0;
text-align: center;
}
.featured img { /* las miniaturas */
background-color: #555;
float: left;
height: 50px;
margin: 0 8px 0 0;
padding: 2px;
width: 50px;
}
.featured .botline { /* la línea divisoria */
border-bottom: 1px dotted #555;
clear: both;
margin-bottom: 5px;
padding: 0 0 5px;
}
.featured a.tlabel { /* el título de cada post */
font-size: 11px;
display: block;
float: left;
max-width: 205px;
overflow: hidden;
white-space: pre;
}
.featured a.morelabels { /* el enlace final a las etiquetas */
background-color: transparent;
color: #AAA;
display: block;
padding: 4px 0;
text-align: center;
}
.featured a.morelabels:hover {background-color: #555;}
</style><div id="miejemplo"> <script src="http://miblog.blogspot.com/feeds/posts/default/-/UNA_ETIQUETA?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostsetiquetas"></script> <script src="http://miblog.blogspot.com/feeds/posts/default/-/OTRA_ETIQUETA?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostsetiquetas"></script> <!-- y seguimos agregando todos los que se nos ocurra mostrar --> </div> <div style="clear:both;"></div>
Feing: Atravesando los laberintos |
Navidad 2.0 |
Navidad 2010 |
CSS: Simplificar, complicar, optimizar |
body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', Helvetica, Arial, sans-serif;margin:10px 0}a { /* esto es un error */
color: #AAA
outline: none
text-decoration:underline
}
a { /* esto está bien aunque la utima no tenga punto y coma */
color: #AAA;
outline: none;
text-decoration: underline
}
a { /* esto está bien */
color: #AAA;
outline: none;
text-decoration: underline;
}div { /* esto es un error porque entre el cierre del paréntesis y la palabra no-repeat falta un espacio */
background: #AAA url()no-repeat left top;
}
div { /* esto está bien aunque no haya espacio entre los dos puntos y el color */
background:#AAA url() no-repeat left top;
}
div { /* esto está bien */
background: #AAA url() no-repeat left top;
}div { /* esto es un error */
<!-- comentario comentario comentario >
background: #AAA url()no-repeat left top;
}
div { /* esto está bien */
/* comentario comentario comentario */
background:#AAA url() no-repeat left top;
}
YouTube: Botones y widget de suscripción |
<iframe src="http://www.youtube.com/subscribe_widget?p=nombre_usuario?" style="overflow: hidden; height: 97px; width: 300px; border: 0;" scrolling="no" frameBorder="0" marginwidth="0" marginheight="0" allowtransparency="true" align="middle"></iframe>
Posts relacionados con miniaturas usando Json |
[1] [2]<script type='text/javascript'> //<![CDATA[ ... acá pegamos el contenido del archivo de texto ... //]]> </script>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'>,</b:if> <b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=leerpostetiquetas&max-results=50"' type='text/javascript'/> </b:if> </b:loop>
<div class='post-footer-line post-footer-line-X'>
.......
</div><b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<div id='postsrelacionados'>
<script type='text/javascript'>mostrarrelacionados();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if><b:if cond='data:blog.pageType == "item"'>
<style>
.relsposts {
float: left;
margin: 0 5px;
overflow: hidden;
padding: 5px;
text-align: center;
/* el tamaño dependerá de como diseñemos el contenido */
width: 130px;
height: 180px;
}
.relsposts:hover { /* si queremos algún efecto */ }
.relsposts a {
/* las propiedades de los textos, color, fuente, etc */
color: #EEE;
display: inline;
font-size: 11px;
line-height: 1;
}
.relsposts img {
/* las propiedades de las miniaturas */
height: 72px;
padding: 5px;
width: 72px;
}
.relsposts h6 {
/* las propiedades del título */
display: table-cell;
height: 5em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relsposts p {
/* las propiedades de los resúmenes */
color: #AAA;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0;
text-align: left;
}
</style>
</b:if>
// empieza definiendo una serie de datos var reltitulos = new Array(); var relurls = new Array(); var relresumen = new Array(); var relimagen = new Array(); var reltituloscantidad = 0; // establecemos la cantidad de entradas relacioandas a ser mostradas var relmaxamostrar = 4; // establecemos la longitud de los resúmenes var relmaxlen = 100; // establecemos la imagen por defecto a utilizar var relimagenpodefecto = "URL_imagen"; // esta es la función que lee los feeds y guarda esos datos que luego analizaremos y mostraremos function leerpostetiquetas(json) { var entry, postimg, postcontent, cat; for (var i = 0; i < json.feed.entry.length; i++) { // los datos de cada entrada se guardan en la variable entry entry = json.feed.entry[i]; // como puede ser que no haya tantas entradas como solicitamos, si ya no hay más, terminamos if (i==json.feed.entry.length) { break; } // el título de la entrada lo leemos leyendo entry.title.$t reltitulos[reltituloscantidad] = entry.title.$t; // lo guardamos // buscamos el contenido de la entrada que puede estar completa o no postcontent = ""; if ("content" in entry) { postcontent = entry.content.$t; // el contenido HTML de la entrada con un feed completo } else if ("summary" in entry) { postcontent = entry.summary.$t; // el contenido HTML de la entrada con feed corto } // usamos una función para eliminar el código HTML y crear un resumen con una cantidad de caracteres relresumen[reltituloscantidad] = eliminattags(postcontent,relmaxlen); // buscamos la miniatura de la imagen de la entrada if ("media$thumbnail" in entry) { postimg = entry.media$thumbnail.url; // si hay una imagen la guardamos } else { // si no hay una imagen, usaremos una imagen por defecto postimg = relimagenpodefecto; // podríamos establecer diferentes imágenes por defecto para cada etiqueta } relimagen[reltituloscantidad] = postimg; // buscamos la dirección URL de la entrada ya que hay varias // una contiene la URL del blog, otra la de la entrada, otra la de los archivos adjuntos, etc for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relurls[reltituloscantidad] = entry.link[k].href; // esta es la url así que la guardamos break; } } reltituloscantidad++; // vamos contando cuantas entradas se encontraron } } // esta es la función que mostrará las entradas relacionadas function mostrarrelacionados() { // la primera parte es similar a la usada hasta ahora y sólo agregamos los nuevos datos, el resumen y la imagen // como una entrada puede tener varias etiquetas, eliminamos los duplicados var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); var tmp4 = new Array(0); for(var i = 0; i < relurls.length; i++) { if(!contains(tmp, relurls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relurls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulos[i]; tmp3.length += 1; tmp3[tmp3.length - 1] = relresumen[i]; tmp4.length += 1; tmp4[tmp4.length - 1] = relimagen[i]; } } reltitulos = tmp2; relurls = tmp; relresumen = tmp3; relimagen = tmp4; // los mezclamos para que no se muestre siempre los mismos for(var i = 0; i < reltitulos.length; i++){ var indice = Math.floor((reltitulos.length - 1) * Math.random()); var tempTitle = reltitulos[i]; var tempUrls = relurls[i]; var tempResumen = relresumen[i]; var tempImagen = relimagen[i]; reltitulos[i] = reltitulos[indice]; relurls[i] = relurls[indice]; relresumen[i] = relresumen[indice]; relimagen[i] = relimagen[indice]; reltitulos[indice] = tempTitle; relurls[indice] = tempUrls; relresumen[indice] = tempResumen; relimagen[indice] = tempImagen; } // y ahora vamos a mostrarlos var cuantosPosts = 0; var r = Math.floor((reltitulos.length - 1) * Math.random()); // elegimos un post al azar var rini = r; // este es el primer post relacionado a mostrar var salida; var dirURL = document.URL; // hacemos un bucle hasta que encontramos la cantidad definida en relmaxamostrar // y vamos armando el código HTML while (cuantosPosts < relmaxamostrar) { if (relurls[r] != dirURL) { // si el post no es el que estamos viendo, lo mostramos salida = "<div class='relsposts'>"; salida += "<a href='" + relurls[r] + "' rel='nofollow' target='_blank' title='" + reltitulos[r] + "'><img src='" + relimagen[r] + "' /></a>"; salida += "<h6><a href='" + relurls[r] + "' target='_blank'>" + reltitulos[r] + "</a></h6>"; salida += "<p>" + relresumen[r] + " ... </p>"; salida += "</div>"; document.write(salida); // y vamos contando hasta llegar al total cuantosPosts++; if (cuantosPosts == relmaxamostrar) { break; } } if (r < reltitulos.length - 1) { // habiamos empezado desde cualquier parte de la lista y este es el siguiente post r++; } else { // si es el último, empezamos desde el primero de la lista r = 0; } // si ya dimos toda la vuelta en al lista y no encontramos la cantidad, significa que no hay suficientes entradas y terminamos if(r==rini) { break; } } }
cat = entry.category[0].term;
postimg = relimagenpodefecto; // siempre definimos una por las dudas if(cat=="MIETIQUETA"){postimg = "URL_etiqueta1"} if(cat=="OTRAETIQUETA"){postimg = "URL_etiqueta2"} // agregamos todas las que se nos ocurra
Blogger | JavaScript | json
Plantillas de Blogger para móviles |
<b:includable id='mobile-nextprev'> ....... </b:includable> <b:includable id='mobile-index-post' var='post'> ....... </b:includable>
Keriyo Emoticons |
Mejor un mal backup que un blog perdido |
Usar JSON para mostrar las entradas del blog |
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "URL_imagen_por_defecto";
}<script type='text/javascript'>
//<![CDATA[
// esta función devolverá el texto de la entrada, eliminando las etiquetas
// la llamamos indicando la cantidad de caracteres a mostrar para crear una especie de resumen
function eliminattags(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;
}
function mostrarentradasconthumb(json) {
// defino la cantidad de entradas que mostraremos
var numposts = 4;
// defino la imagen por defecto que voy a utilizar
var imagenpodefecto = "URL_imagen";
// defino la longitud de los resúmenes
var lenresumen = 100;
var entry, posttitle, posturl, postimg, postcontent, salida;
// el bucle que leerá las entradas
for (var i = 0; i < numposts; i++) {
// leo y guardo el dato
entry = json.feed.entry[i];
// este es el título de la entrada
posttitle = entry.title.$t;
// busco la dirección URL de la entrada
if (i == json.feed.entry.length) { break; }
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
// esta es la dirección de la entrada
posturl = entry.link[k].href;
break;
}
}
// busco el contenido de la entrada
postcontent = "";
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
}
// este es el contenido resumido
postcontent = eliminattags(postcontent,lenresumen);
// busco la imagen de la entrada
if ("media$thumbnail" in entry) {
// hay una imagen
postimg = entry.media$thumbnail.url;
} else {
// no hay imágenes asi que uso la que tengo definida
postimg = imagenpodefecto;
}
/*
ya tengo los datos, podría agregar otros pero, para mi, estos son suficientes:
posttitle es el título
posturl es la dirección
postimg es la imagen
postcontent es el resumen
*/
// ACÁ TENDRÉ QUE MOSTRARLOS
// EL CODIGO DE SALIDA
}
}
//]]>
</script><div class='miresumen1'> <a href='URL_entrada' target='_blank'><img src='URL_imagen' /></a> <h6><a href='URL_entrada' target='_blank'> título e la entrada </a></h6> <p> el resumen de la entrada ... </p> </div>
salida = "<div class='miresumen1'>"; salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>"; salida += "<p>" + postcontent + " ... </p>"; salida += "</div>"; document.write(salida);
<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=4&orderby=published&alt=json-in-script&callback=mostrarentradasconthumb"></script>
.miresumen1 {
border-bottom: 1px solid #555;
float: left;
height: 190px;
margin: 0 5px;
padding: 5px;
width: 135px;
}
.miresumen1:hover {
background-image: -moz-linear-gradient(100% 100% 90deg, #555, #000);
background-image: -webkit-gradient(linear, left bottom, left top, from(#555)), to(#000));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF555555');
}
.miresumen1 a {
color: #FC0;
display: block;
font-size: 12px;
text-align: center;
}
.miresumen1 img {
height: 72px;
width: 72px;
}
.miresumen1 h6 {
border-bottom: 1px dotted #888;
height: 30px;
margin: 5px 0 0;
padding-bottom: 2px;
}
.miresumen1 p {
color: #CCC;
font-size: 11px;
line-height: 1.3em;
margin: 5px 0 0;
}salida = "<div class='miresumen2'>"; salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>"; salida += "</div>";
.miresumen2 img {
border: 5px solid transparent;
padding: 3px;
height: 72px;
width: 72px;
}
.miresumen2 img:hover {
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
border:5px solid #555;
}
.miresumen2 a {
color: #FFCC00;
display: block;
font-size: 12px;
font-weight: normal;
text-align:center;
}
.miresumen2 a:hover {
font-weight: bold;
}
.miresumen2 h6 {
height: 30px;
margin: 5px 0 0;
}salida = "<div class='miresumen3'>"; salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>"; salida += "</div>";
.miresumen3 {
border: 1px solid #555;
float: left;
height: 35px;
margin: 1px;
padding: 5px;
width: 190px;
}
.miresumen3 a {
color: #DDD;
display: block;
font-size: 11px;
font-weight:normal;
}
.miresumen3 img {
float: left;
height: 36px;
width: 36px;
}
.miresumen3 h6 {
float: right;
height: 45px;
margin: 0;
width: 145px;
}
.miresumen3: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;
}
Mantener actualizadas las librerías de Google |
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript' /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js' type='text/javascript' /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript' /><script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript' /> <script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js' type='text/javascript' /> <script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js type='text/javascript' />
Cajas en forma de burbuja |
<div class="speech-bubble"> ... el texto a mostrar ... </div>
.speech-bubble {
background: #6495ED; /* el color de fondo */
color: #FFF; /* el color del texto */
font-family: Arial, Sans-serif;
font-size: 12px;
padding: 20px 10px 10px 10px;
text-align: center;
width: 200px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
border: solid 10px transparent;
border-top-color: #6495ED; /* igual al color de fondo */
border-bottom: 0;
bottom: -20px; /* igual al borde + el padding-bottom de la definición anterior */
content: "";
display: block;
height: 0;
margin: auto;
overflow: hidden;
position: relative;
width: 0;
}
Blogger: Nueva opción para los feeds |
Hasta ahora, los feeds podían ser enviados como Cortos (se generaba un resumen de no más de 400 caracteres de largo) o Completos. Esta nueva alternativa nos permite determinar la longitud, es decir, hasta dónde se podrán ver desde un lector externo y para indicar esto, se utiliza el MORE.
¿Esto es mejor o peor? No hay una sola respuesta, ahí ya entran a jugar las subjetividades.
Iconos en blanco y negro y algo más |
| Glyphish Icons | |
| Contiene 200 íconos de diferentes tamaños, en formato PNG. descargar | |
 |
| Mono Gradient Icons Set | |
| Contiene 180 íconos de de diferentes tamaños, en formato PNG. descargar | |
 |
Estos no son íconos sino algo más infantil una serie de emoticones creados por Jak Jay y que podemos descargar desde su página alojada en deviantart.
Starbursts: Insignias animadas con CSS3 |
.starburst7 {
color: #FFF;
display: block;
font-family: Arial, sans-serif;
font-weight: bold;
height: 3em;
text-align: center;
text-decoration: none;
width: 8em;
}
.starburst7 span {
background:#00CD00;
display: block;
height: 2.5em;
width: 8em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
rotation: -45deg;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
text-shadow: 1px 1px 1px #000;
}
.starburst7:hover {
background: transparent;
}
.starburst7:hover span {
-webkit-transform: rotate(52.5deg);
-moz-transform: rotate(52.5deg);
rotation: 52.5deg;
-webkit-transform: translate(1em, 0);
-moz-transform: translate(1em, 0);
translate(1em, 0);
}<a href="#" class="starburst7"> <span><span><span><span><span> <span><span><span><span><span> <span> <span><span><span><span> <span>NEW CSS3<br />Starbursts!</span> </span></span></span></span></span> </span></span></span></span></span> </span></span></span></span></span> </a>
El misterioso JSON |
<script type="text/javascript">
function leerfeeds(json) {
// esta es la función y aquí haremos algo
}
</script>
<script src="http://miblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=leerfeeds"></script><script src="http://miblog.blogspot.com/feeds/posts/default?max-results=10&orderby=published&alt=json-in-script&callback=leerfeeds"></script>
<script type='text/javascript'>
//<![CDATA[
function leerfeeds(json) {
var entry, posttitle, posturl, postimg, postcontent, postcategoria, postfecha;
var numposts = 10; // la cantidad de entradas a leer
// con un bucle, leemos las diez entradas que solicitamos, una por una
for (var i = 0; i < numposts; i++) {
// los datos de cada entrada se guardan en la variable entry
entry = json.feed.entry[i];
// como puede ser que no haya tantas entradas como solicitamos, si ya no hay más, terminamos
if (i==json.feed.entry.length) { break; }
// el título de la entrada lo leemos leyendo entry.title.$t
posttitle = entry.title.$t;
// la URL de la entrada hay que buscarla ya que hay varias
// una contiene la URL del blog, otra la de la entrada, otra la de los archivos adjuntos, etc
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
// la encontramos: esta es la direccion URL de la entrada
posturl = entry.link[k].href;
break;
}
}
// buscamos el contenido de la entrada que puede estar completa o no
postcontent = "";
if ("content" in entry) {
// el contenido de la entrada en un feed completo
postcontent = entry.content.$t;
} else if ("summary" in entry) {
// el contenido de la entrada en un feed corto
postcontent = entry.summary.$t;
}
// en ambos casos, el contenido es nuestra entrada en formato HTML
// y hay muchos más datos que pueden ser leidos
/*
entry.category[] y entry.category[x].term nos permitirá leer las etiquetas que tiene esa entrada
entry.published.$t es la fecha de publicación
entry.updated.$t es la fecha de la ultima actualización
entry.author[] y entry.author[x].name.$t nos permitirá leer el nombre de los autores
*/
// ..........................................
// ya tenemos los datos así que acá vamos a escribirlos en nuestra página
// ..........................................
}
}
//]]>
</script>
Las direcciones URL de las entradas de Blogger |
Buenos Aires
Argentina
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Esto es to-to-todo amigos.
| CONTRAER ARCHIVOS |
|
