Tutorial: Mega Menú desplegable

miércoles, septiembre 4

En este mundo, existe gente que es una auténtica pasada y hace cosas que son impresionantes, para muestra, este maravilloso menú que traigo hoy.
En este menú podremos encontrar 5 submenús totalmente diferentes y muy fácil de personalizar, con tener un conocimiento básico de HTML podríamos cambiar muchas cosas según nos convenga.
Si no teneis idea de HTML no os preocupeis, a la hora de personalizarlo encontraréis diferentes indicaciones que os dirán como hacer lo siguiente:
Cambiar colores
Cambiar Tamaños
Añadir Imágenes... etc
Por cierto antes de olvidarme, para el tuto necesitaréis esta imagen. Es la que colocaréis de flechitas






Código CSS:

Como siempre, este código puede ir dentro de vuestro código del blog, o en el mismo gadget donde coloquéis el código.

<style>

#menu { /* Esta parte es con respecto a la barra horizontal */
 position: relative;
 z-index: 1000;
 overflow: visible !important;
 list-style:none;
 width:640px; /* Ancho de la barra */
 margin:100px auto 0px auto; /* margen de colocación */
 height:43px; /* Alto de la barra del menú */
 padding:0px 20px 0px 20px; /* margenes interiores */


 /* Esquinas redondeadas */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;


 /* Color de fondo y degradados */
 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  /* 1ºcolor superior, 2ºcolor inferior */



 /* Bordes*/
 border: 1px solid #002232;
 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}



#menu li { 
 float:left;
 display:block;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px; /* separación entre Home, 5 Columns y 4 Columns */
 margin-top:7px; /* Altura de los menús en la barra horizontal */
 border:none;
 color: #000; /* Menu desplegable: Color textos y títulos */
}

#menu li:hover {
 border: 1px solid #777777; /* borde de los menús pero dentro del rectangulo del menú principal */
 padding: 4px 9px 4px 9px; /* distancias superiores, inferiores etc de los menús al pasár el ratón por encima (los menús dentro de la barra) */


 /* Color de fondo y degradados */
 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));


 /* Esquinas redondeadas */ 
 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}


#menu li a { /* Diferentes modificaciones sobre el texto de la barra de menú*/
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;  /* tamaño del texto */
 color: #EEEEEE; /* Color texto */
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000; /* Sombra texto */
}

#menu li:hover a { /* Diferentes modificaciones sobre el texto de la barra de menú al pasar el ratón */
 color:#161616;
 text-shadow: 1px 1px 1px #ffffff; /* Sombra texo del menú al pasar el ratón*/
}

#menu li .drop {
 padding-right:21px;
 background:url("URL Flecha") no-repeat right 8px; /* Flecha oscura*/
}

#menu li:hover .drop {
 background:url("URL Flecha") no-repeat right 7px; /* Flecha clara*/
}


.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto; /* Menú desplegable: Alto del menú desplegable con respecto a la barra horizontal */
 float:left;
 position:absolute;
 left:-999em; /* Oculta el menú desplegable, Viene siendo no Tocar o se amontonan los menus */
 text-align:left;
 padding:10px 5px 10px 5px; /* Menú desplegable: Tamaño del menú desplegable */
 border:1px solid #777777; /* Menú desplegable: borde y color del menú desplegable */
 border-top:none;

 
 / * Fondo degradado * /
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); /* 1ºcolor superior, 2ºcolor inferior */


 /* Bordes redondeados*/
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

 /* Anchos de los Desplegables */
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}


#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px;
 top:auto;
}


 /* Menu desplegable: Modifica distancias entre el texto y la caja principal */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}

/* Modifica anchos de diferentes partes del menú desplegable */

.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}



#menu .menu_right {

 float:right;
 margin-right:0px; /* margen entre los 2 menús de la derecha de la barra horizontal */

}

#menu li .align_right {

 /* Bordes redondeados */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;

}



#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}


#menu p, #menu h2, #menu h3, #menu ul li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF; /* Menu desplegable: Color sombra textos y títulos */
 color: #000; /* Menu desplegable: Color textos y títulos */
}

#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666; /* Menu desplegable: Menu 4 Color lineas superiores de las noticias */
}

#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888; /* Menu desplegable: Menu 4 Color lineas inferiores de las noticias */
}

#menu p {
 line-height:18px; /* Menu desplegable: Distancia entre lineas de las noticias */
 margin:0 0 10px 0; /* Menu desplegable: Distancia entre noticias superiores e inferiores */
}


#menu li:hover div a {
 font-size:12px;
 color:#015b86; /* color enlaces */
}
#menu li:hover div a:hover {
 color:#029feb; /* color enlace al pasar el ratón */
}


.strong {
 font-weight:bold;
}

.italic {
 font-style:italic;
}


.imgshadow { /* Diferentes colores y posiciones de las sombras de la caja de las imágenes */
 background:#FFFFFF; /* Color fondo imágenes */
 padding:4px;
 border:1px solid #777777; /* Color borde imágenes */
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666; 
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}

.img_left { /* Ubicación de las imágenes */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}

#menu li .black_box { /* Modificaciones Cajitas oscuras */
 background-color:#333333; /* Color de fondo de las cajitas oscuras */
 color: #eeeeee; /* Color texto de las cajitas oscuras */
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;



 /* bordes redondeados */

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

 /* sombras */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}



#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}

#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}

#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}


#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb; /* Borde cuadraditos columna 3 */
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;


 /* bordes redondeados */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
} 

</style>
En este código CSS os he dejado una serie de indicaciones en color dorado, que os servirá para editar y modificar la apariencia del menú. Desde el color de las letras, hasta el fondo. En color rosa os he indicado donde ha de colocarse el enlace de las flechitas del menú horizontal 

Código HTML:
Ahora os colocaré el código HTML.  Para usarlo recordad que tendréis que ir a las opciones de diseño del blog y crear un dadget HTML/Javascript y en el pegar todo el código ¿ok?
Este código se dividirá en 6 partes. 
La primera parte será la barra horizontal y las siguientes 5 partes serán los diferentes tipos de desplegable. También os diré donde y como colocar cada cosa en caso de que queráis el mismo desplegable 5 veces.



  • Barra Horizontal:


<ul id="menu">

Aquí dentro meteremos nuestros menús desplegables

</ul>

Con este código comenzamos a preparar nuestro menú según nuestro gusto, la frase que está en color Verde claro será sustituida por nuestros menus




Ahora vienen los Menús Desplegables, recordad, que si queréis utilizar uno, simplemente tenéis que añadirlo donde indica en la Barra Horizontal , uno detrás de otro y en el orden deseado
  • Menú Desplegable Inicio
<li><a class="drop" href="URL Página Inicio">Inicio</a><!-- Begin Home Item -->
        <div class="dropdown_2columns">
<!-- Begin 2 columns container -->
            <br />
<div class="col_2">
<h2>

Bienvenido !</h2>

</div>
<div class="col_2">

Hola y bienvenidos aquí! Esto es una muestra de las posibilidades de este impresionante Mega menú desplegable.<br />

Este artículo viene con una amplia gama de estilos de tipografía preparados, como encabezados, listas, etc.</div>

<div class="col_2">
<h2>

Navegadores Soportados</h2>
</div>
<div class="col_1">
<img alt="" height="48" src="URL Imagen Deseada" width="125" />
            </div>
<div class="col_1">

Este mega menú ha sido testeado en los principales navegadores.</div>

</div>
<!-- End 2 columns container -->
    </li>
<!-- End Home Item -->


En Color Rosa os he indicado las URL que tenéis que cambiar. La primera,  es para que al pinchar en Inicio os lleven a la página principal del blog. El segundo enlace corresponde con la imagen que se ve en el ejemplo.

En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo

En Verde tenéis el título del desplegable.


  • Menú desplegable 5 Columnas

<li><a class="drop" href="URL Página 5 columnas">5 columnas</a><!-- Begin 5 columns Item -->

    

        <div class="dropdown_5columns">

<!-- Begin 5 columns container -->

        

            <br />

<div class="col_5">

<h2>

Este es un ejemplo de un recipiente grande con 5 columnas</h2>

</div>

<div class="col_1">

<div class="black_box">

Se trata de un cuadro de texto de color gris oscuro. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</div>

</div>

<div class="col_1">

Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</div>

<div class="col_1">

<div class="italic">

Esto es un ejemplo de un texto en cursiva. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</div>

</div>

<div class="col_1">

Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</div>

<div class="col_1">

<div class="strong">

Esto es un ejemplo de un texto en negrita. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</div>

</div>

<div class="col_5">

<h2>

He aquí algunos contenidos con imágenes laterales</h2>

</div>

<div class="col_3">

<img alt="" class="img_left imgshadow" height="70" src="URL Imagen Deseada Superior" width="70" />

                <br />

Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="URL Página Leer mas">Seguir Leyendo...</a><br />

<img alt="" class="img_left imgshadow" height="70" src="URL Imagen Deseada Inferior" width="70" />

                <br />

Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="URL Página Leer mas">Seguir Leyendo...</a></div>

<div class="col_2">

<div class="black_box">

Esto es un cuadro negro, lo puedes usar para resaltar contenidos. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</div>

</div>

</div>

<!-- End 5 columns container -->

    

    </li>

<!-- End 5 columns Item -->

En Color Rosa os he indicado las URL que tenéis que cambiar. En Total Son 5 Enlaces y os comento que es cada uno en orden de aparición.

  1. Enlace:  Es al que seremos llevados si pinchamos en el título del menú
  2. Enlace: Es el enlace de la Imagen superior del menú
  3. Enlace: Es el Enlace que nos llevará al articulo que se cita (articulo superior)
  4. Enlace: Es el enlace de la Imagen Inferior del menú
  5. Enlace: Es el Enlace que nos llevará al articulo que se cita (articulo inferior)


En Dorado os dejé el texto a modificar. Para tomar de referencia, os he dejado en el código el mismo texto que aparece en el ejemplo

En Verde tenéis el título del desplegable.

  • Menú desplegable 4 Columnas


<li><a class="drop" href="URL Página 4 columnas">4 columnas</a><!-- Begin 4 columns Item -->

        <div class="dropdown_4columns">

<!-- Begin 4 columns container -->
 
            <br />

<div class="col_4">

<h2>

Esto es un título de inicio</h2>

</div>

<div class="col_1">

<h3>

Some Links</h3>

<ul>

<li><a href="URL Página">ThemeForest</a></li>

<li><a href="URL Página">GraphicRiver</a></li>

<li><a href="URL Página">ActiveDen</a></li>

<li><a href="URL Página">VideoHive</a></li>

<li><a href="URL Página">3DOcean</a></li>

</ul>

</div>

<div class="col_1">

<h3>

Useful Links</h3>

<ul>

<li><a href="URL Página">NetTuts</a></li>

<li><a href="URL Página">VectorTuts</a></li>

<li><a href="URL Página">PsdTuts</a></li>

<li><a href="URL Página">PhotoTuts</a></li>

<li><a href="hURL Página">ActiveTuts</a></li>

</ul>

</div>

<div class="col_1">

<h3>

Other Stuff</h3>

<ul>

<li><a href="URL Página">FreelanceSwitch</a></li>

<li><a href="URL Página">Creattica</a></li>

<li><a href="URL Página">WorkAwesome</a></li>

<li><a href="URL Página">Mac Apps</a></li>

<li><a href="URL Página">Web Apps</a></li>

</ul>

</div>

<div class="col_1">

<h3>

Misc</h3>

<ul>

<li><a href="URL Página">Design</a></li>

<li><a href="URL Página">Logo&lt;/a></li>

<li><a href="URL Página">Flash</a></li>

<li><a href="URL Página">Illustration</a></li>

<li><a href="URL Página">More...</a></li>

</ul>

</div>

</div>

<!-- End 4 columns container -->

    </li>

<!-- End 4 columns Item -->

En Color Rosa os he indicado las URL que tenéis que cambiar. La primera,  es para que al pinchar en Inicio os lleven a la página principal del blog. El resto son los enlaces a los que os llevará las diferentes categorías

En Color Verde tenéis el título del desplegable y los títulos de las diferentes categorías. Si queréis  añadir más enlaces, simplemente copiar y pegar la siguiente linea y repetirla siguiendo la lógica que se m

<li><a href="URL Página">nombre de enlace</a></li>
En Dorado os dejé el texto a modificar, nombres de enlaces, títulos de categorías.. y como siempre, el nombre del menú desplegable.


  • Menú desplegable 3 Columnas


<li class="menu_right"><a class="drop" href="URL Página 3 columnas">3 columnas</a><!-- Begin 3 columns Item -->

    

        <div class="dropdown_3columns align_right">

<!-- Begin 3 columns container -->

            

            <br />

<div class="col_3">

<h2>

Listado en Cajas</h2>

</div>

<div class="col_1">

<ul class="greybox">

<li><a href="URL Página">FreelanceSwitch</a></li>

<li><a href="URL Página">Creattica</a></li>

<li><a href="URL Página">WorkAwesome</a></li>

<li><a href="URL Página">Mac Apps</a></li>

<li><a href="URL Página">Web Apps</a></li>

>
</ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="URL Página">ThemeForest</a></li> <li><a href="URL Página">GraphicRiver</a></li> <li><a href="URL Página">ActiveDen</a></li> <li><a href="URL Página">VideoHive</a></li> <li><a href="URL Página">3DOcean</a></li> </ul> </div> <div class="col_1"> <ul class="greybox"> <li><a href="URL Página">Design</a></li> <li><a href="URL Página">Logo&lt;/a></li> <li><a href="URL Página">Flash</a></li> <li><a href="URL Página">Illustration</a></li> <li><a href="URL Página">More...</a></li> </ul> </div> <div class="col_3"> <h2> He aquí algunos ejemplos de imágenes</h2> </div> <div class="col_3"> <img alt="" class="img_left imgshadow" height="70" src="Enlace Imagen Superior" width="70" />                 <br /> Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="URL Página Leer mas#">Sigue Leyendo...</a><br /> <img alt="" class="img_left imgshadow" height="70" src="Enlace Imagen Inferior" width="70" />                 <br /> Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="URL Página Leer mas">Sigue Leyendo...</a></div> </div> <!-- End 3 columns container -->            </li> <!-- End 3 columns Item -->
En Color Rosa os he indicado las URL que tenéis que cambiar.Como en los demás los enlaces son, la del títuulo del menú desplegable. Las Direcciones del listado en cajas y las direcciones del seguir leyendo.

En Color Verde son los enalces de las imágenes.

En Dorado os dejé el texto a modificar


  • Menú desplegable 1 Columna


<li class="menu_right"><a class="drop" href="URL Página 1 columna">1 Columna</a>

    

  <div class="dropdown_1column align_right">

<div class="col_1">

<ul class="simple">

<li><a href="URL Página">FreelanceSwitch</a></li>

<li><a href="URL Página">Creattica</a></li>

<li><a href="URL Página">WorkAwesome</a></li>

<li><a href="URL Página">Mac Apps</a></li>

<li><a href="URL Página">Web Apps</a></li>

<li><a href="URL Página">NetTuts</a></li>

<li><a href="URL Página">VectorTuts</a></li>

<li><a href="URL Página">PsdTuts</a></li>

<li><a href="URL Página">PhotoTuts</a></li>

<li><a href="URL Página">ActiveTuts</a></li>

<li><a href="URL Página">Design</a></li>

<li><a href="URL Página">Logo&lt;/a></li>

<li><a href="URL Página">Flash</a></li>

<li><a href="URL Página">Illustration</a></li>

<li><a href="URL Página">More...</a></li>
</ul>

</div>

</div>

</li>

Este es el desplegable más sencillo, tenemos en Rosa direcciones en Dorado nombres de las direcciones, creo que no hace falta explicar mucho más. Si queréis añadir más lineas.. pues copiar y pegar la siguiente y listo. Si queréis menos lineas.. todo es borrar.

<li><a href="Url Página">Nombre página</a></li>



Si tenéis alguna duda entonces intentaré ayudaros en lo posible.
.... Sigue Leyendo....



Aplicaciones que dan dinero facilmente

jueves, agosto 29

No suelo ser la típica persona que hace publicidad de estas cosas, pero a veces, cuando la vida va un poco apretada no hay que hacer ascos a ganar aunque sea 10 euros extras al més, así que hoy os voy a presentar 2 aplicaciones, nombrando pros y contras (por supuesto) y luego vosotros decidís que hacer ¿ok?

Las aplicaciones que os voy a comentar son para Android y también lo hay para Iphone


Lattescreen

Si después de leer todo esto te convences, te agradecería el uso de mi número de referidor, con esto nos darán a los 2 un dieron extra: M67Q26YC76

Esta aplicación para mi gusto quizás ahora mismo es la mejor de las 2 , por un lado por ser más estable, por otro, porque todos los días dan una cantidad de dinero fija y no hay que olvidar que están buscando formas de que la gente pueda ganar más dinero aun.

¿Como funciona?
Suponiendo que está ya instalada, el funcionamiento es muy simple. Automáticamente se convertirá en el programa desbloqueador de vuestro movil. Cuando el movil esté bloqueado, Lattescreen nos mostrará una publicidad, muchas veces son discos de musica de grupos japoneses o el instagram de una diseñadora grafica japonesa y últimanente está mostrando también un juego para el movil.
Nosotros podremos desbloquear el movil moviendo una barrita para la izquierda o para la derecha según nos convenga en el momento y según para el lado que tiremos ocurrirá una cosa u otra
El lado derecho: Esto nos lanzará directamente a nuestro movil, como si aquí no pasase nada
El lado Izquierdo: Nos lanzará a la página o aplicación que se esté anunciando en la pantalla de bloqueo.
Por lo normal, estaremos siempre desbloqueando para la derecha, pero una vez cada hora le daremos a la Izquierda!

¿Como se gana el dinero?
La forma es de lo más sencillo. Una vez cada hora, la aplicación mostrará una cantidad de dinero en los candaditos de desbloqueo (tenemos uno en la izquierda y otro en la derecha de la barra de desbloqueo) . 
Si nosotros desbloqueamos a la Derecha en el momento que sale el bono económico, entonces solo ganaremos 0,005 Céntimos (vamos una auténtica miseria) , pero si desbloqueamos para el lado Izquierdo pasaremos a ganar 0,030 , 0,020 o 0,015 según la oferta anunciada. 
Al mover la barra de desbloqueo para Izquierda, nos saldrá un mensaje que dice que esperemos a que se cargue la página. Una vez cargada ya se nos acumula ese dinero
Cuando llegamos a 10 euros podemos hacer 2 cosas, o bien seguir acumulando o solicitar ingreso. Nunca podremos solicitar ingreso con cantidades inferiores a 10 euros.
Otro detalle es que esos 10 euros son una ganancia constante siempre y cuando nosotros seamos constantes con la aplicación, si solo desbloqueamos 2 bonos al mes, no podemos pretender ganar esos 10 euros.

¿NO es muy poco dinero?
La verdad es que hablar de un céntimo y medio, dos céntimos o tres céntimos suena algo miserable, pero acumular esta cantidad hace que al mes sea 10 euros, lo que me cuesta a mi la tarifa de datos del movil.

¿Por que instalar Lattescreen?
Esta pregunta es la mas sencilla de contestar.
La aplicación es muy ligera, no molesta, no instala publicidad extra en nuestros moviles, a todas o casi todas las horas por una razón o otra estoy consultando el movil, porque al mes decir que se gana 10 euros suena muy poquito dinero, pero te da para pagar la tarifa de datos del movil (si es de 10 euros claro está), o para ir al cine, o para tomarse unos cuantos cafés.
Porque en estos días van a meter aplicaciones por las cuales si tenemos instaladas durante 24 horas, nos darán mas dinero y se superará los 10 euros mensuales.



Chad2win

A diferencia de la otra, esta aplicación exige más dedicación, la aplicación viene en manos de una empresa española innovadora en el mundo de los chats y la publicidad. La idea de chad2win es quizás una de las más originales que he visto hasta ahora y me encanta que la empresa no sea extrangera, el problema, quizás necesiten más personal, o un cambio radical en lo que se refiere a la programación de la aplicación ya que tiene errores por todos lados, igualmente, yo sigo dandole una oportunidad esperando que este grupo de gente consiga solucionar el problema y se conviertan en uno de nuestros imprescindibles (hay que apoyar al país xD )

¿Como funciona?
Su funcionalidad es idéntica a la del whatsapp pero tiene algo mejor, a diferencia del gran chat, estos mantienen las conversaciones y documentación que intercambies cifradas ¿que quiere decir esto? pues que Whatsapp puede usar tu información para lo que quiera ya que tiene acceso a todas tus conversaciones, por ejemplo... tus chats con tu novia/o pueden salir en un anuncio de televisión o cartel publicitario o mismo las imágenes que envías, mientras que Chad2win nunca podrá hacer eso, ya que tus conversaciones únicamente están guardadas en tu movil y en el de la otra persona con la que hablas.

Por el lado de la publicidad, mientras nosotros conversamos ricamente, en la parte superior de la pantalla saldrá un pequeño banner con una publicidad concreta, puede ser de un hotel, vinos, coches.. etc, nosotros podremos pinchar en el banner o simplemente ignorarlo. Según el tipo de banner, para que nos compensen económicamente habrá que interactuar con ellos o no.


¿Como se gana el dinero?
Esto es el mayor misterio del mundo. Al principio nos daban un dinero por cada publicidad vista, si era un banner, nos daban un dinero, si era un vídeo nos daban algo más que por el banner. Creemos que esto se volvión poco interesante para la empresa y no les salía a cuento, así que cambiaron radicalmente la política, ahora te dan según unos criterios, por ejemplo tu edad, sexo... y un largo etc. Nunca explicaron al 100% como es el método, pero mi entorno y yo hemos sacado unas conclusiones. Igualmente la cosa sigue sin salirles al cuento y aquí esto va un poco al tuntun.

Al principio no ganaba más de 60 centimos , a los 4 mese pasé a ganar 1 euro  y medio, al quinto més 4 euros y medio el sesto més 7 euros 7 medio, este mes no llego a los 3 euros
En total, en mi caso he acumulado 18 euros.
Al terminar el més, sea cual sea la cantidad acumulada (yo he tenido meses de 30 centimos) podremos solicitar el ingreso, ya sea por paypal o por banco (y te ingresan a pesar de ser tan ridícula la ganancia)

¿NO es muy poco dinero?
Si, es mucho menos dinero que con la primera aplicación, para colmo está lleno de bugs y problemas a demás de que nunca sabrás cuanto dinero te darán. Por no hablar de los casos como el siguiente que os contaré.
Tenemos un grupo de móviles que usamos entre nosotros. Como siempre hay gente que habla mas que otras personas. Resulta vastante desconcertante ver como a una persona que no habló casi nada le dan casi un euro en un dia y al resto, que ha estado rajando casi 24 horas le han dado 20 miseros céntimos o ni eso.

¿Por que instalar Chad2win?
Esta vez es complicado responder a la pregunta. Chad2win es una aplicación que promete, pero está lleno de bugs y al mes no se saca demasiado (bueno, según el mes), hay que ser muy pacientes con ellos a demás, ya que uno de los bugs es el tiempo de envío de mensajes, lo envías ahora y llegan al día siguiente, es decir, no es muy fiable, solo sirve para conversaciones casuales y no importantes.
Lo bueno que tiene, es lo que decía antes, la conversación va cifrada, nadie podrá leerla sin tu permiso, incluso si se te borra del movil (en ocasiones pasa) no podrás recuperarla (vale quizás esto sea algo malo en algunos momentos) , pero la empresa es española, para mi es un detalle muy importante y por eso los apoyo, llevo con ellos casi desde el comienzo y realmente a mi no me cuesta nada tener su aplicación instalada y usarla. A demás hay que reconocer que es muy positivo por parte de ellos el detalle de ingresar el dinero si o si, aunque solo hayamos acumulado 1 céntimo.

-------------------------------------------------------------------------------------------------

Bueno, pues estas son las 2 aplicaciones que yo uso para ganar un dinero extra.
En todo el tiempo que llevo con ellas (con latte solo 2 meses) ya tengo en mi paypal 30 euros aproximadamente, esto es un dinero que de otra forma no habría tenido y me servirá para hacer compras por internet, por ejemplo, aplicaciones para el movil, entradas para el cine... , la ultima vez que usé este dinero fue para comprarme un cupón para comprar un helado en una heladería italiana de mi ciudad.







.... Sigue Leyendo....



SPAM camuflado como visitas a blogs!

miércoles, agosto 28

Este resumen no está disponible. Haz clic en este enlace para ver la entrada.
.... Sigue Leyendo....



Tutorial: Botones en CSS "trendy-buttons"


Cotilleando por internet me encontré con una página Italiana llamada minimamente que mostraba unos botones bastante curiosos y de apariencia muy trabajados, lo mejor de todo, es que son muy sencillos de modificar, simplemente es echarle un poco de valor en caso de ser nuevos en el mundo del CSS

Lo que podemos hacer con el botón que veréis un poco más abajo es lo siguiente:

  • Las imágenes o palabras que aparecen en el fondo. 
  • El nombre del botón. 
  • La imagen que aparece el nombre del botón. 
  • El color del botón 
¿que tenéis ya ganas de saber como hacer todo esto? pues venga, os lo explico.


Vamos a coger este botón



y comenzaremos a modificarlo, para ello primero atenderemos al código CSS que es el siguiente

<Style>

/* general style (En caso de querer añadir varios botones con apariencia diferente, este estilo es general para todos, así evitamos escribir código de más) */

.radius {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-background-clip: padding-box;
}

.gradient {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%);
}

.shadow {
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.trendy_btn {
display: block;
margin: 20px;
padding: 18px;
text-align: center;
-o-transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s;
transition: .4s;
}

span.txt { 
display: block; 
position: relative; 
z-index: 2; 
}

/* Estilo especifico del botón corazones */

a.corazones { 
position: relative; 
overflow: hidden; 
width: 260px; 
font-size: 1.4em; 
font-weight: 700; 
background-color: #b52122; /*Color del fondo del botón*/
color: #fff; /*color del nombre del botón*/
text-shadow: 0 1px 0 rgba(0,0,0,0.7); }

a.corazones:hover { 
background-color: #d33031; /*Color del fondo al pasar por encima el ratón*/
}

a.corazones:active { 
top: 1px;
-o-transition: none;
-ms-transition: none;
-moz-transition: none;
-webkit-transition: none;
transition: none;

}

a.corazones:before { 
display: inline-block; 
position: absolute; 
z-index: 1; 
width: 320px; 
top: -50%; 
left: -5%; 
font-size: 1.375em; 
font-family: 'fontello'; 
content: '\2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665  \2665'; /* Repetición de palabras o imagenes que se ven en el fondo*/
color: #8c1f20; /* color del texto o imagen del fondo*/

text-shadow: none;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);

}

a.corazones span.txt:before { 
display: inline-block; 
margin: 0 10px 0 0; 
font-family: 'fontello'; 
content: '\2665'; /* imagen que aparece al lado del nombre del botón*/
color: #fff; } /* Color de la imagen de al lado del botón*/

</Style>




Tenemos 3 tipos de modificaciones que están resaltadas en azul, rosa o dorado .

En azul está el nombre del código del botón por decirlo de alguna forma y sin causar confusión. Imaginaros que queremos crear 3 botones diferentes, uno con corazones, otro con rombos y el tercero con nuestro nombre, cada uno tendrá un color diferente y un fondo diferente, pues entonces, para cada botón habrá que crear un estilo diferente y a cada estilo hay que ponerle un nombre. En este ejemplo yo le llamé corazones ya que si tuviera 20 botones diferentes, esa palabra me ayudaría a reconocer fácilmente el código de mi botón de corazones. 
En color rosa tenemos los colores. Los tres primeros colores corresponden con lo más básico del botón. Lo primero es el color del fondo del botón, el segundo, es el color del titulo del botón (en este ejemplo, es el color de la palabra amor) y el tercer color corresponde con el que aparece cuando pasamos por encima el ratón.
Los 2 últimos colores tienen que ver con las imágenes de corazones que aparecen en este ejemplo.
El primer color es el de los corazones del fondo, el segundo es el del corazón que está a la Izquierda de la palabra Amor
En color dorado tenemos los corazones del fondo y un poco más abajo el corazón que está a la Izquierda de la palabra amor. Sustituir esto es de lo más fácil, o bien cogiendo el código para otra imagen o bien poniendo otra palabra o letra.
Si optáis por poner otra imagen, recordad que tenéis que poner esta barrita \ y el código a continuación y luego repetir varias veces la barrita más el código tal como está puesto ahora. Ese código podéis verlo o bien en el "mapa de caracteres" de vuestro pc (preguntar a google sobre esto) o bien en google. Si optáis por ver el mapa de caracteres, en la ventanita de este progra (ya os digo, viene de serie en windows),  al pinchar en una letra o simbolo, en la parte inferior de todo veréis que saldrá algo así como U+a8b3: loquesea (por ejemplo) , pues eso que sale entre el U+ y  : es el código que necesitais para la sustitución.

Creo que de esta parte ya no falta nada, ahora vamos con el código HTML.



<div class="container">

<a class="trendy_btn corazones radius shadow" href="url" title="Love"><span class="txt">Amor</span></a>

</div>

En Verde tenemos url, aquí ponemos la dirección URL al que nos llevará el botón.
En Amarillo tenemos la palabra que aparece si apoyamos nuestro ratón en el botón, si no lo queremos entonces solo es borrar title="Love" y listo.
En Rosa tenemos el título de botón, si en vez de amor queremos que se llame Chocolate, pues cambiamos amor por chocolate y listo.
En Azul está el nombre del código del botón con referencia al CSS, que si os fijais, tanto esta palabra en azul, está coincidiendo con lo remarcado en azul en el código de arriba.

Supongamos que queréis 3 botones iguales:
Para esto copiar
<a class="trendy_btn corazones radius shadow" href="url" title="Love"><span class="txt">Amor</span></a>
y pegarlo tantas veces como nuevos botones queráis, luego modificar "Love" y "Amor" por lo que queráis que aparezca en el botón.

Supongamos que queréis 3 botones distintos:

1º En la parte del código de CSS copiar a partir de /* Estilo especifico del botón corazones */ hasta </Style> (</Style> no incluirlo en el copiado) , en todas las partes que dice "Corazones" y que está marcado en azul en el código CSS que os dejé arriba, sustituirlo por una palabra que pegue mas con la nueva apariencia.
A continuación tenéis que cambiar las opciones de este nuevo estilo según queráis vuestro botón.
2º En la parte del código HTML copiar la linea que dice
<a class="trendy_btn corazones radius shadow" href="url" title="Love"><span class="txt">Amor</span></a>
y en ella modificar la palabra "corazones" por la misma que pusisteis en el CSS, después sustituir Love y Amor por las palabras que deseeis.


.... Sigue Leyendo....



Tutorial Menú Circular CSS

domingo, agosto 25


¿Cuantas veces no entramos en una página web o blog y vemos unos menús impresionantes que nos gustaría usar en nuestro propio blog?  Luego nos entra la duda de si seremos capaces de hacerlo, nos decimos que seguro será muy difícil y al final nos quedamos con las ganas.
Hoy esto va a cambiar, por que os voy a enseñar a instalar uno de esos super menús de forma sencilla, en este caso, os mostraré a como poner este menú circular de Stu Nicholls .
Por cierto, lo bueno que tiene este menú es que está creado bajo un código muy ligero, CSS y HTML. Lo único que puede hacer pesado este código es la cantidad de imágenes a utilizar, así que como consejo, descargar las imágenes que os gusten en vuestro pc y alojarlas en vuestro propio blog, eso ayudará mucho con los tiempos de carga.





Podéis ponerlo dentro del código del propio código de vuestro blog o bien, si vais a diseño, podéis crear un Gadget tipo HTML/Javascript en el cual pegaríais todo el código y listo.

Materiales necesarios para crear este menú:
  • 1 Descargar las siguientes 2 Imágenes
Imagen para el fondo
Círculos que rodean las imágenes.
  • 2 Buscar 8 Iconos que os gusten para el menú, han de tener un tamaño de 32 x 32 pixeles.
  • 3 Copiar el código y en el añadir los enlaces de la imagen del fondo, del circulo y el de las imágenes que escogisteis.


Código CSS:
  • método de instalación:  Tenemos 2 formas de instalar esta parte , la primera es dentro del propio código de nuestro blog, la segunda es en un gadget.
         Si escogemos instalarlo dentro del blog entonces buscad ]]></b:skin>  y                  pegad encima este código
         Si por lo contrario preferís meterlo dentro de un gadget , entonces poner el siguiente                  código dentro de las etiquetas <style>  y  </style>


/* ================================================================ 

This copyright notice must be kept untouched in the stylesheet at 

all times.



The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menu/circular.html

Copyright (c) Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any 

way to fit your requirements.

=================================================================== */

#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url (Enlace de Fondo) no-repeat;}
#circularMenu li {display:block; width:60px; height:60px; position:absolute;}
#circularMenu li.home {left:120px; top:4px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.chat {left:200px; top:40px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.upload {left:35px; top:40px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.email {left:230px; top:115px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.address {left:5px; top:115px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.shop {left:200px; top:190px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.search {left:35px; top:190px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.delivery {left:120px; top:225px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li a b {display:none;}
#circularMenu li a {display:block; width:60px; height:60px; text-align:center;}

#circularMenu li a:hover {background:url(Enlace del Círculo que rodean los Iconos); text-decoration:none; font-family:georgia, serif;}

#circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;}

#circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}

#circularMenu li.home a:hover b {left:-22px; top:100px;}
#circularMenu li.chat a:hover b  {left:-102px; top:64px;}
#circularMenu li.upload a:hover b  {left:63px; top:64px;}
#circularMenu li.email a:hover b  {left:-132px; top:-11px;}
#circularMenu li.address a:hover b  {left:93px; top:-11px;}
#circularMenu li.shop a:hover b  {left:-102px; top:-87px;}
#circularMenu li.search a:hover b  {left:63px; top:-87px;}
#circularMenu li.delivery a:hover b  {left:-22px; top:-121px;}


  • Que modificar en esta parte:
En esta parte hay un par de cosas a tener en cuenta:
En Rosa o rojo claro (según como se mire) se indica donde tenéis que añadir los enlaces del fondo, el circulo y el de las imágenes que queréis para el menú, el orden a la hora de colocar los enlaces de vuestros iconos va en sentido de las agujas del reloj, pero en este caso comenzamos arriba de todo, y continuamos por la derecha. Antes de que se me olvide, las imagenes de los Iconos han de tener un tamaño 32 x 32 px
En Dorado va el nombre de cada icono. En este ejemplo se llaman Home, chat, upload, email..., vosotros podéis o bien dejar esos nombres ya que no os afectaría a la hora de reproducir el menú, o bien, adaptarlos a vuestros Iconos, si por ejemplo, queréis hacer un menú donde está un mando de xbox, en vez de "chat", podéis poner "xbox".  Si decidís hacer este cambio, en el código de abajo también tenéis que hacer el mismo cambio

  • Otros:
Si  en vez del fondo blanco queréis otro fondo tocará cambiar cosas en la siguiente linea


#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url (Enlace de Fondo) no-repeat;}

 background:#fff           Indica el color de fodo que tendrá el menú en caso de que la imagen del fondo falle. Este color podéis modificarlo a vuestro antojo. Recordad que el color se escribe en Hexadecimal 
url (Enlace de Fondo) no-repeat;     Aquí podéis poner otra imagen diferente a la que os digo que pongáis, si queréis que la imagen tenga alguna transparencia o alguna historieta, pues sois libres de ponerla, esto es a vuestro gusto.


Código HTML:
  • método de instalación:  Para instalar esta segunda parte tenemos que ir a Diseño, luego aquí crearemos un gadget "HTML/Javascript" , dentro simplemente pegaremos el siguiente código.

<ul id="circularMenu">

<li class="home"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

<li class="chat"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

<li class="email"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

<li class="shop"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

<li class="delivery"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

<li class="search"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

<li class="address"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

<li class="upload"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>

</ul>


  • Que modificar en esta parte:
Como decía antes, la parte que está en Dorado tiene que coincidir de forma exácta con la parte en dorado del código CSS. Si arriba ponéis por ejemplo   xbox  y en esta parte os confundís y escribís xbos el menú no se reproducirá correctamente. Tened en cuenta, que el primer código le dice al siguiente cual es la imagen que aparecerá entre otras cosas.
En un color rosa clarito pone "URL" , esto ha de ser sustituido por el enlace de turno al que queréis ir cada vez que pinchéis en ese icono del menú. Cuidado de no borrar las comillas.
En color verde tenemos Nombre del Icono y Frase corta.  Esta quizás sea la parte más obvia, siguiendo el ejemplo de la Xbox, aquí podríamos Xbox y en frase corta, por ejemplo, descubre nuestros juegos de Xbox



Como podéis ver, son 2 códigos que debemos usar y que se colocan en lugares muy definidos, no es algo al que se deba tener miedo a la hora de colocar ya que no exige sustituir un código por otro ni cosas así, por tanto os animo a probarlo.
.... Sigue Leyendo....