Minus-10 GB PARA ALMACENAR ARCHIVOS (AMPLIABLE A 50 GB)

Una de las grandes deficiencias de Blogger es la incapacidad para alojar nuestros propios archivos en nuestro blog teniendo que recurrir a servicios externos,pero por fortuna hay sitios muy buenos donde alojar archivos .js y otros.

Esta vez les presento Minus,que aunque poco conocido nos da 10 GB por solo registrarnos e invitando amigos podemos llegar a los 50 GB

Te registras en Minus luego subes tu archivo en Upload,Seleccionas Upload form Computer,lo subes y luego te saldra el documento en su version Online,pero si queremos obtener la URL del documento vas a la parte inferior en Download,das click derecho y clickeas en Copiar la ruta del enlace y esa es la que nos sirve para Blogger.

Minus nos da URL'S como la siguiente:

http://i.minus.com/1330524384/vUY7Nz3ltxiq8bsnmQbVmA/dbxesdSYhRAKEg.xml.
Espero que os sea de utilidad este gran hosting que sin duda promete ser un duro rival para Dropbox.

IMAGENES CON ZOOM EN BLOGGER

En esta oportunidad les compartire un gran truco en el cual las imagenes del blog quedan con un genial efecto zoom al pasar el cursor sobre ellas, este genial truco se logra mediante CSS.

Aqui puedes ver una vista previa del truco.

Para agregar este truco pega el siguiente CSS antes de ]]></b:skin> :

/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

En el anterior codigo vienen incluidas algunas lineas para explicar un poco el contenido del CSS.

Ahora agrega el siguiente HTML en la parte que quieras (puede ser un elemento HTML/JavaScript)

<div class="expandir">
<ul>
<li><a href="URL_Destino1"><img src="IMAGEN1"/><span>TEXTO1</span></a></li>
<li><a href="URL_Destino2"><img src="IMAGEN2"/><span>TEXTO2</span></a></li>
<li><a href="URL_Destino3"><img src="IMAGEN3"/><span>TEXTO3</span></a></li>
</ul>
</div>

Lo que se indica en verde corresponde a la URL del destino,a la URL de la imagen y el texto a mostrar.

Para agregar otras imagenes solo debes añadir la siguiente estructura (antes de </ul>)  :

 <li><a href="URL_Destino"><img src="IMAGEN"/><span>TEXTO</span></a></li>

Espero que les haya sido de utilidad este truco.

JUGANDO CON LA NAVBAR DE BLOGGER

Hace muchos años pocos querían conservar la Navbar, esa barra que está arriba del todo y que nos permite compartir el blog, buscar o acceder a las funciones básicas. El único color disponible que había era el azul así que no a todos les iba bien con el diseño de su plantilla. Hoy la barra de navegación (Navbar) dispone de más colores, y podemos jugar un poco con ella para hacerla ver más dinámica. O si prefieres ocultarla, también te diremos cómo hacerlo.

Ocultar la navbar

Ocultarla es más sencillo que antes, digo eso porque hasta hace poco teníamos que ingresar códigos a la plantilla para poder ocultarla, ahora no.

Si deseas ocultar la navbar ingresa a la sección Diseño, da click en Editar sobre la Navbar (Barra de navegación) y selecciona Desactivado.

Hacer flotante la navbar

Si por el contrario te gusta que se vea la barra de navegación entonces puedes hacerla flotante para que se siga viendo aun cuando bajes el scroll de la página. Para ello entra en la Edición HTML de la plantilla y antes de ]]></b:skin> pega lo siguiente:

#navbar-iframe {
left:0;
top:0;
position:fixed;
}

Si quisieras que la navbar este igual flotante pero en la parte de abajo entonces cambia top:0; por bottom:0;
Con cualquiera de esas dos opciones la barra siempre estará visible aunque se suba o se baje la página.

Aparecer la navbar al pasar el cursor con desvanecimiento

Una buena opción es mantener oculta la navbar y hacer que aparezca sólo si pasamos el cursor arriba del blog, y usando las transiciones haremos que aparezcan con un efecto de desvanecimiento como se aprecia en la imagen.

Para que se vea de esta manera sólo hay que añadir antes de ]]></b:skin> lo siguiente:

#navbar-iframe {
opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Aparecer la navbar al pasar el cursor de arriba a abajo

Una opción similar a la anterior es que la navbar esté oculta y aparezca al pasar el cursor sobre su área pero esta vez aparecerá de arriba a abajo.

Para ese caso el código que hay que añadir antes de ]]></b:skin> es este:

#navbar-iframe {
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambiar el color de la Navbar

Aunque Blogger nos permite cambiarle el color, sólo nos ofrece 6 opciones de color, los cuales pueden no ser del gusto de todos, sin embargo podemos ponerle el color que queramos y no sólo eso, también podemos hacer que cambie de color al pasar el cursor con un efecto de desvanecimiento.

Para conseguirlo, sigue el paso del primer ejemplo que es para ocultarla, pero en lugar de desactivarla deberás seleccionar Claro transparente. Luego pega antes de ]]></b:skin> estos estilos:

#navbar-iframe {
background:#B40431; /* Color de la navbar */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#000; /* Color de la navbar al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Ahí verás dónde poner el color que quieras tanto para el estado normal, como el color que tendrá al pasar el cursor.
¿Una imagen? También se puede, en ese caso la línea que especifica el color irá de esta manera:

background:url(URL de la imagen);

Como puedes ver, la navbar puede verse más atractiva si lo deseas y sólo añadiendo un poco de CSS que hasta puedes combinar y conseguir el resultado que quieras.

Quizá haga falta recordar que en el caso de los efectos de desvanecimiento con CSS son transiciones que sólo son soportadas con navegadores modernos, así que en navegadores antiguos (o Internet Explorer) aunque no se verá ese desvanecimiento los demás estilos sí se ejecutarán.
Eso es todo.