REFERENCIAS:GIF Anime
Alojar casi todo tipo de archivos en SigMirror |
SigMirror es otro sitio para alojar archivos y, si bien aparenta aceptar sólo imágenes, esa es una restricción que no tienen los usuarios registrados así que basta crear una cuenta gratuita para disponer de 2.5 GB de espacio disponible y 7.0 GB de ancho de banda mensuales.
Como muchos otros, el servicio admite la posibilidad de subir archivos y mantenerlos como privados o públicos; en este último caso, lo interesante es que permite el hotlink, es decir, los podemos usar en cualquier sitio web y para eso, nos proporcionan la dirección URL de cada uno.
Como muchos otros, el servicio admite la posibilidad de subir archivos y mantenerlos como privados o públicos; en este último caso, lo interesante es que permite el hotlink, es decir, los podemos usar en cualquier sitio web y para eso, nos proporcionan la dirección URL de cada uno.
No hay una descripción detallada de los tipos de archivos aceptados pero aseguran que son casi todos. He probado imágenes, videos, documentos, zips, íconos, scripts, xml, html y hojas de estilo sin problemas. Este es un ejemplo de un archivo HTML simple 
El widget de Panoramio |
Panoramio es un sitio donde los usuarios pueden explorar el mundo a través de fotografias subidas por los miembros de la comunidad. Hace tiempo fue comprado por Google y en estos días, Blogger in Draft ha anunciado que hay un API que nos permite integrar un widget a cualquier blog.
A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:
A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:
http://www.panoramio.com/wapi/template/photo.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/slideshow.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/list.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/photo_list.html?opcion1&opcion2&opcion3 ...
La primera opción es la unica obligatoria y la más importante: el tipo de fotos a mostrar y para eso, podemos seleccionar un usuario (user=IDusuario), una categoría (tag=categoria) o simplemente seleccionamos alguna palabra genérica como set=all, set=public, set=recent. Algunos ejemplos:
http://www.panoramio.com/wapi/template/photo.html?tag=sea
http://www.panoramio.com/wapi/template/slideshow.html?user=98350
http://www.panoramio.com/wapi/template/list.html?set=public
http://www.panoramio.com/wapi/template/photo_list.html?set=recent
El resto de las opciones definen la forma de mostrar el widget y son optativas:
- width y height establecen el tamaño
- bgcolor es el color de fondo (formato hexadecimal donde reemplazamos el caracter # por %23; por ejemplo, %23FFFFFF es el color blanco)
- columns y rows son la cantidad de columnas y filas en los widgets de tipo lista
- orientation indica si se las listas se mostrarán de manera vertical u horizontal
- list_size es la cantidad de imágenes en el widget de tipo photo_list
- position es la posición de la foto en el widget de tipo photo_list
- delay es el tiempo del efecto en el widget de tipo slideshow
Así que, seguimos agregando las opciones para construir la URL final:
http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921
http://www.panoramio.com/wapi/template/slideshow.html?user=98350&opcion2&delay=1.5
http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal
http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344
Ya está, ahora, podemos insertar el IFRAME:
<iframe src="la_URL_generada" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="valor" height="valor"></iframe>
WIDGET PHOTO
<iframe src="http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921" frameborder="0" width="400" height="400" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
WIDGET SLIDESHOW
<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?user=98350&delay=1.5&bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="400" height="400"></iframe>
WIDGET LIST
<iframe src="http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal&bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
WIDGET PHOTO LIST
<div style="-moz-border-radius:10px;-moz-box-shadow:0 0 10px #DDD inset;background-color:#234;border:2px solid #ABC;height:425px;margin:0 auto;padding:15px 15px 0;width:425px;"><iframe src="http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344" width="425" height="410" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></div>
REFERENCIAS:Dicas Blogger
Button Maker: Ayuda para crear botones con CSS |
Button Maker es muy simple de usar. Permite que creemos botones con estilo, usando una serie de opciones que, al ir cambiando, podemos ver en una previsualización instantánea lo que lo hace muy intuitivo y fácil de manejar.
Una vez que nos hemos decidido, basta hacer click en el mismo botón generado para que nos de las definiciones CSS necesarias; por ejemplo:
.button {
background: #384954;
background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
background: -moz-linear-gradient(top, #93BDD9, #384954);
border-top: 1px solid #96D1F8;
color: white;
font-size: 20px;
font-family: Helvetica, Arial, Sans-Serif;
padding: 13px 26px;
text-decoration: none;
vertical-align: middle;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button:hover {
background: #28597A;
border-top-color: #28597A;
color: #bab337;
}
.button:active {
background: #719BB8;
border-top-color: #719BB8;
}Simplemente son tres definiciones de clases CSS que podemos agregar en cualquier parte, ya sea entre <b:skin> y </b:skin> o bien entre etiquetas <style> y </style>
Por supuesto, podemos cambiarle el nombre y en lugar de llamarlas button ponerle cualquier otro, editarlo y modificar los detalle o basarnos en ese modelo para crear otros.
Para utilizarlos, basta agregar el atributo class en la etiqueta de un enlace:
Por supuesto, podemos cambiarle el nombre y en lugar de llamarlas button ponerle cualquier otro, editarlo y modificar los detalle o basarnos en ese modelo para crear otros.
Para utilizarlos, basta agregar el atributo class en la etiqueta de un enlace:
<a href="una_URL" class="button">, texto del enlace <,/a>,
Como muchas plantillas tienen definiciones de estilo que afectan a TODOS los enlaces o a los enlaces de una sección del blog, a veces es necesario reforzar la definición y para eso agregamos la palabra !important; por ejemplo:
color: white !important;
font-size: 20px !important;
Es una pena que se sigan olvidando que Internet Explorer existe y que algunas de esas propiedades pueden ser utilizadas con limitaciones. En este caso, usando filtros:
.button {
background: #384954;
background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
background: -moz-linear-gradient(top, #93BDD9, #384954);
border-top: 1px solid #96D1F8;
color: white;
display: block;
font-size: 20px;
font-family: Helvetica, Arial, Sans-Serif;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 125px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF93BDD9', EndColorStr='#FF384954');
}
.button:hover {
background: #28597A;
border-top-color: #28597A;
color: #bab337;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0093BDD9', EndColorStr='#00384954');
}
.button:active {
background: #719BB8;
border-top-color: #719BB8;
}REFERENCIAS:Gem@ Blog
Agregar Reply a los comentarios |
Lo que nos enseña MamaNunes en su última entrada, es la forma de agregar un enlace para "Responder comentarios".
Es muy simple de implementar y al aplicarlo, dispondremos de ese enlace en cada comentario realizado. Al hacer click, se abrirá el formulario de comentarios en una ventana pop-up y, de manera automática, el formulario ya tendrá incluido un enlace al comentario original y el nombre del comentarista; algo similar a lo que se muestra en Twitter; veremos entonces, que ya está escrito algo así:
Es muy simple de implementar y al aplicarlo, dispondremos de ese enlace en cada comentario realizado. Al hacer click, se abrirá el formulario de comentarios en una ventana pop-up y, de manera automática, el formulario ya tendrá incluido un enlace al comentario original y el nombre del comentarista; algo similar a lo que se muestra en Twitter; veremos entonces, que ya está escrito algo así:
Para que esto funcione, debemos colocar lo siguiente:
<span class='comment-reply'> <a expr:href='"https://www.blogger.com/comment.g?blogID=NUESTRO_ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>[Reply to comment]</a> </span>
Allí, deberíamos colocar NUESTRO_ID que podemos ver en la misma ventana de la plantilla y que es un número (más información).
El otro dato que podemos modificar es el texto a mostrar que en el ejemplo es [Reply to comment] pero puede ser cualquier otro o incluso una imagen.
El tema es ¿dónde ponemos eso? y ahí hay muchas alternativas que dependerán de la plantilla. Por ejemplo, podría ponerse al lado del nombre del comentarista:
El otro dato que podemos modificar es el texto a mostrar que en el ejemplo es [Reply to comment] pero puede ser cualquier otro o incluso una imagen.
El tema es ¿dónde ponemos eso? y ahí hay muchas alternativas que dependerán de la plantilla. Por ejemplo, podría ponerse al lado del nombre del comentarista:
<data:comment.author/>
o en el footer de cada comentario:
<dd class='comment-footer'> PUEDE AGREGARSE ACÁ <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'><data:comment.timestamp/></a> <b:include data='comment' name='commentDeleteIcon'/> </span> PUEDE AGREGARSE ACÁ </dd>
Es verdad que el código parece extrañísimo pero, no lo es tanto, simplemente envia ese texto extra en la URL que abre la ventana de comentarios y lo hace codificándolo (encode y decode) de tal manera que:
%40%3C%61%20%68%72%65%66%3D%22%23 es el equivalente de @<a href="# data:comment.anchorName es la URL del comentario a responder %22%3E es el equivalente de "> data:comment.authores el nombre del comentarista a quien se responde y %3C%2F%61%3E es el equivalente de </a>
Como detalle adicional, el SPAN donde está el enlace tiene una clase CSS así que es posible agregarla a nuestros estilos y darle propiedades:
.comment-reply {}
.comment-reply a {}
.comment-reply a:hover {}En el blog de MamaNunes puede verse el resultado comcreto 
Contenedores y contenidos: Opacidad |
Controlar o modificar la opacidad de cualquier elemento es una de las técnicas más comunes ya que pueden implementarse en todos los navegadores modernos con leves variaciones:
filter:alpha(opacity=VALOR); en Internet Explorer
opacity: VALOR; en el resto de los navegadores
filter:alpha(opacity=VALOR); en Internet Explorer
opacity: VALOR; en el resto de los navegadores
El problema con esta propiedad es que si la aplicamos a un contenedor, todo el contenido es afectado, es decir, si queremos poner un DIV con una imagen de fondo y usar opacity para hacerla transparente, todo lo que agreguemos dentro de ese DIV también será transparente.
Un ejemplo:
Un ejemplo:
<style type="text/css">
#ejemplo1 {
background: transparent url(URL_imagen) no-repeat 50% 0;
color: #FFF;
height: 280px;
margin: 20px auto;
padding: 20px;
text-align: center;
width: 420px;
filter: alpha(opacity=40);
opacity: 0.4;
}
#textoejemplo1 {
background-color: #ABC;
padding: 5px;
}
</style>
<div id="ejemplo1">
<div id="textoejemplo1">
....... un texto cualquiera .......
</div>
</div>Suspendisse a nulla et quam vehicula mattis at vitae sapien? In hac habitasse platea dictumst. Etiam diam ipsum, suscipit ut semper vel, vulputate eu justo? Nunc condimentum quam sed urna fermentum eu commodo massa tempor. In ligula turpis, adipiscing vitae scelerisque in, iaculis quis mi. Nam sodales interdum tincidunt.
El DIV ejemplo1 tiene una imagen de fondo y se le aplica opacidad así que el DIV textoejemplo1 que está dentro, también es transparente ya que las propiedades, se heredan.
Si lo que queremos hacer es que ese contenido no sea trasparente, debemos cambiar la técnica.
Cuando tenemos un contenedor al que le colocamos la propiedad position con un valor relative, podemos controlar la posición del contenido, agregándole a este, la propiedad position con un valor absolute y ubicándolo con top right bottom y left. Unos ejemplos:
Si lo que queremos hacer es que ese contenido no sea trasparente, debemos cambiar la técnica.
Cuando tenemos un contenedor al que le colocamos la propiedad position con un valor relative, podemos controlar la posición del contenido, agregándole a este, la propiedad position con un valor absolute y ubicándolo con top right bottom y left. Unos ejemplos:
<div style="position: relative;"> <div style="position: absolute; left: 20px; top: 10px;"> ... </div> <div style="position: absolute; bottom:10px; right: 20px;"> ... </div> </div>
left:20px;top:10px;
bottom:10px;right:20px;
left:0px;top:10px;
bottom:0px;right:30px;
Con esa misma idea, es posible tener un DIV con una imagen transparente y encima, colocar otro que no se vea afectado por esa propiedad.
<style type="text/css">
#ejemplo2 {
color: #FFF;
height: 320px;
margin: 20px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 420px;
}
#internoejemplo2 {
background: transparent url(URL_imagen) no-repeat 50% 0;
height:320px;
width:420px;
filter: alpha(opacity=40);
opacity: 0.4;
}
#textoejemplo2 {
background-color: #ABC;
padding: 5px;
position: absolute;
top: 20px;
left: 10px;
overflow: hidden;
}
</style>
<div id="ejemplo2">
<div id="internoejemplo2"></div>
<div id="textoejemplo2">
....... un texto cualquiera .......
</div>
</div>Suspendisse a nulla et quam vehicula mattis at vitae sapien? In hac habitasse platea dictumst. Etiam diam ipsum, suscipit ut semper vel, vulputate eu justo? Nunc condimentum quam sed urna fermentum eu commodo massa tempor. In ligula turpis, adipiscing vitae scelerisque in, iaculis quis mi. Nam sodales interdum tincidunt.
Ahora, tenemos un DIV contenedor llamado ejemplo2 igual que antes pero, la imagen de fondo no está allí. Dentro de este, hay dos DIVs más. El que identificamos como internoejemplo2 es el que contiene la imagen y el otro, llamado textoejemplo2, es el que contiene el texto y es el que podemos posicionar a voluntad.
No sé cuál es cuál |
