miércoles, 25 de diciembre de 2013

UN EFECTO CHULO
PARA UNAS NAVIDADES CHULAS


EL CÓDIGO
Aquí os dejo el código de el efecto de la imagen un beso enorme para todos::

<style>
.swing{
-webkit-animation:swinging 10s ease-in-out 0s infinite;
-moz-animation:swinging 10s ease-in-out 0s infinite;
animation:swinging 10s ease-in-out 0s infinite;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
transform-origin:50% 0;
} @-webkit-keyframes swinging{
0% { -webkit-transform: rotate(0); }
5% { -webkit-transform: rotate(10deg); }
10% { -webkit-transform: rotate(-9deg); }
15% { -webkit-transform: rotate(8deg); }
20% { -webkit-transform: rotate(-7deg); }
25% { -webkit-transform: rotate(6deg); }
30% { -webkit-transform: rotate(-5deg); }
35% { -webkit-transform: rotate(4deg); }
40% { -webkit-transform: rotate(-3deg); }
45% { -webkit-transform: rotate(2deg); }
50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -webkit-transform: rotate(0); }
} @-moz-keyframes swinging{
0% { -moz-transform: rotate(0); }
5% { -moz-transform: rotate(10deg); }
10% { -moz-transform: rotate(-9deg); }
15% { -moz-transform: rotate(8deg); }
20% { -moz-transform: rotate(-7deg); }
25% { -moz-transform: rotate(6deg); }
30% { -moz-transform: rotate(-5deg); }
35% { -moz-transform: rotate(4deg); }
40% { -moz-transform: rotate(-3deg); }
45% { -moz-transform: rotate(2deg); }
50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { -moz-transform: rotate(0); }
} @keyframes swinging{
0% { transform: rotate(0); }
5% { transform: rotate(10deg); }
10% { transform: rotate(-9deg); }
15% { transform: rotate(8deg); }
20% { transform: rotate(-7deg); }
25% { transform: rotate(6deg); }
30% { transform: rotate(-5deg); }
35% { transform: rotate(4deg); }
40% { transform: rotate(-3deg); }
45% { transform: rotate(2deg); }
50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
100% { transform: rotate(0); }
}
</style>
<img class="swing" src="AQUÍ LA URL DE VUESTRA IMAGEN" />

domingo, 10 de noviembre de 2013

Tu eliges
desde donde quieres comentar

¿Os gustaría ordenar de esta manera los comentarios de vuestro blog?
Hoy para romper el hielo después de tanto tiempo sin publicar, por razones personalmente trágicas para mí, quiero referenciaros a un espacio en el que hallareis este y otros muchos trucos, desde hoy  será uno de mis  punto de referencia favoritos y merecedor de ester entre mis imprescindibles, aunque una no sea sevillista jejeje... Si queréis ver el resultado final de este truco entrar en mis comentarios y animaros a dejarme uno.
Un fuerte saludo a todos, Anabel, de nuevo en la brecha.
Y aquí va el enlace a este maravilloso blog y que os mostrará el truco paso a paso:

lunes, 19 de agosto de 2013

POSIT
CABE DE TODO


UN RECUADRO ORIGINAL
Puedes escribir lo que quieras incluso código. Ponle imaginación.
EL CÓDIGO:

CSS:
<style>
.stitched { padding: 20px;*/ANCHURA DEL RECTANGULO*/; margin: 10px; background: #0F4652;*/COLOR DEL FONDO*/; color: #85FFFD;*/COLOR DE LA LETRA*/; font-size: 31px;*/TAMAÑO DE LA LETRA*/; font-weight: bold; line-height: 1.3em;*/ANCHURA DEL RECTANGULO*/; border: 2px dashed #FFFFFF;*/COLOR DEL PESPUNTE DEL RECTANGULO*/; border-radius: 10px;*/EL REDONDEO DE LAS ESQUINAS*/; box-shadow: 0 0 0 4px #0F4652, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);*/COLOR DEL MARCO*/; text-shadow: -1px -1px #0F4652;*/COLOR DEL PESPUNTE DE LA LETRA*/; font-weight: normal; text-align:center; }
</style>
HTML:
<div class="stitched"> ENTRE ESTE DIV, PODEÍS COLOCAR, CASI CUALQUIER COSA. </div>
LO ENCONTRÉ AQUÍ:

domingo, 11 de agosto de 2013

TODO EN CAJAS
ASÍ TODO ENCAJA

En esta caja con sombra, hecha integramente en css, podreís colocar el texto que deseís; un enlace... pero, también, código de cualquier otra índole: script, html... Visita este sitio hay más: www.araudi.net A modo de ejemplo esta entrada.
Además no tendremos que preocuparnos de la largura de la caja, puesto que irá creciendo a medida en que vayamos agregando cosas.
AQUÍ OS DEJO EL CÓDIGO
(dentro del mismo encontrareis algunas ayudas entre este distintivo */ )
<style type="text/css"> #a, #b, #c, #d, #e, #f, #g, #h, #i {position: relative; bottom: 1px; right: 1px; width: 300px;*/es el ancho de la caja*/ } #i { background-color: #43758C;} */es el color del fondo*/ #h { background-color: #464646;} #g { background-color: #5F5F5F;} #f { background-color: #812781;}*/es el color del marco*/ #e { background-color: #919191;} #d { background-color: #AAA;} #c { background-color: #C3C3C3;} #b { background-color: #DCDCDC;} #a { background-color: #F5F5F5; margin: 20px auto;*/el margen de colocación a lo alto dentro de la pagina, widget o entrada*/ } #texto { text-align:justify; font-size: x-large; color: #F9DDC1; padding: 10px; } */el estilo del texto ir agregando*/ a {color: #F4F424}*/el color del enlace*/ </style> <div id="a"> <div id="b"> <div id="c"> <div id="d"> <div id="e"> <div id="f"> <div id="g"> <div id="h"> <div id="i"> <div id="texto">En esta caja con sombra, hecha integramente en css, podreís colocar el texto que deseís; un enlace. pero, tambien, código de cualquier otra indole: script, hatml... </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

domingo, 21 de julio de 2013

Caja de comentarios muy elegante


   Si me dejáis un comentario, obtendréis vuestra recompensa, una nueva forma de presentar los comentarios totalmente innovadora, original y elegante, tal cual como se ve en mi blog, el color es totalmente configurable, donde encontréis esta linea: background: #299DFF; cambiáis  el color y listo.


¿Cómo se implanta en vuestro espacio? lo explica la web a donde os dirijo perfectamente y os ofrece el código necesario para llevarlo a cabo. 


No quiero presionaros demasiado, jejeje, no estáis obligados a dirigirme la palabra, solo ha acceder a la zona de COMENTARIOS alli os he dejado un mensaje con el link, no soy del todo mala jajaja...


Que lo disfrutéis.


viernes, 19 de julio de 2013

UN LINK CON ESTYLO


¿Qué os parece esta forma de presentar los link? pues el codigo que hace posible esto:

CLICK AQUÍ

<style>
ul.animatedbgul{
margin: 0;
padding: 0;
list-style: none;
} ul.animatedbgul li{
width: 100%;
clear:left;
overflow: hidden;
} ul.animatedbgul li span{ display: block; float: left;
min-width: 0px;
margin-bottom: 5px;
padding: 8px;
color: #0F4652; /* COLOR DE LA LETRA ANTES DE PASAR EL RATON */
} ul.animatedbgul li:hover span{
color: #fff;
background: #0F4652; /* COLOR DEL MARCADO */
border-left: 48px solid darkred; /* ANCHO DEL BORDER DEL MARCADO Y SU COLOR BUSCAR EN COLORES CSS*/
min-width: 200px; /* LARGO DEL MARCADO */
-webkit-box-shadow: 0 0 5px gray;
-moz-box-shadow: 0 0 5px gray;
box-shadow: 0 0 5px gray;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
} </style>

<ul class="animatedbgul"> <li><a href="URL DEL ENLACE" target="blank"><span><H3>NOMBRE DEL ENLACE</span></H3></a></li> </ul>

ACLARACIÓN

Si queréis seguir agregando link solo tendréis que abrir un nuevo "li" al final de este código, antes del "/ul" y cerrarlo después. Este estupendo efecto lo encontré en uno de mis lugares favoritos para manejar código CSS

martes, 2 de julio de 2013

De todo y para todos Zarabarandula

Hoy quiero recomendaros encarecidamente, que os paséis por este magnifico blog que ya he incluido entre mis imprescindibles, en el encontrareis mucho material útil y alguna que otra sorpresa.
Este enlace os llevará a una de sus entradas, con un truco para los que gustan de cambiar cosas de sus gadget.

zarabarandula

viernes, 28 de junio de 2013

Las entradas más comentadas (Gadget)

    
   Hoy os voy a presentar un gadget que no debe faltar, a mi me faltaba: nuestras entradas o artículos más comentado. Lo he encontrado en este magnifico blog al que ya he acudido muchas veces, quedaría más o menos así:

Es sencillo colocáis el código que encontrareis en este enlace, en un gadget html/java... y listo


jueves, 20 de junio de 2013

Para estar en CONTACTO

...Tengo y mantengo desde casi el principio de convertirme en una bloguera empedernida, el empeño de facilitar el contacto lo más posible entre los amigos de un blog  y el creador del mismo, para mi es de suma importancia mantener este flujo activo gracias al cual el entusiasmo no decrece. Una herramienta más para este cometido, es este widget un tanto modificado que os ofrezco. Naturalmente también os referencio a la fuente, que encarecidamente recomiendo visitéis, pues hallareis cosas muy interesantes.
CÓDIGO
El script que se debe colocar en la plantilla en el body :

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/es_ES/sdk.js#xfbml=1&amp;version=v2.6&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>


Y este es el código propiamente dihco que debe colocarse en un gadget java-script donde se quiera:

<center>
                                    <fieldset>
                                      <font color='#2B61AA'>
                                        COMENTARIOS FACEBOOK
                                      </font>
                                    </fieldset>
                                  </center>
<div class="fb-comments" data-href="aquí la URL de vuestro blog" data-width="100%" data-numposts="2" data-colorscheme="light"></div>



EL RESULTADO

COMENTARIOS FACEBOOK


Las distintas variaciones posibles las hallareis muy sencillamente en este lugar:

sábado, 8 de junio de 2013

Caja con animaciones Java
(A petición de algunos amigos)

   Muchos de vosotros me habéis preguntado sobre la caja  en la que aparece un gráfico interactivo java, pues bien aquí va la explicación:
Lo primero, los efectos de los que me nutro los encontrareis en esta pagina:  http://www.dhteumeuleu.com/index

Una vez allí elegís el efecto que os guste y le dais a la flecha de arriba, después a Source, de Main html file, copiáis la dirección html para poder colocarla dentro del código  que os dejo a continuación:

<iframe src="http://www.dhteumeuleu.com/AQUI LA URL COPIADA" width="440" height="300"
   scrolling="no" frameborder="0">
   [su navegador no soporta marcos]
</iframe>
<a href="http://www.dhteumeuleu.com/" target="blank"><img src="https://lh3.googleusercontent.com/-Mj4Ea5UXJXk/T_MLTBtHHBI/AAAAAAAACsA/GpLdBsJ5-98/s512/1341328207216.png" width="440" height="40"/></a>


Todo esto, naturalmente, lo colocáis en un gadget HTML/Javascript

Podréis variar el tamaño en width="EL TAMAÑO DESEADOheight="EL TAMAÑO DESEADO"

Conseguido:

martes, 4 de junio de 2013

Algo a la vista
pero
escondido

Esta es una manera de tener algo a la vista pero escondido, me ha gustado el efecto, la barra y que dentro de ella puede introducirse casi cualquier cosa. Encontré esta moneria, como no, en mi página preferida de CSS:


EL CODIGO
<style type="text/css"> div.css3droppanel { /* Aqui modificando el valor de los dos margin es posible variar el tamaño y la posicion de la barra */ position: relative; margin: 0; margin-bottom: 1em; /* margin with rest of content on page */ } div.css3droppanel > div { /* Content DIV DIV inside wrapper */ height: 10px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */ padding: 5px; -moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */ -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; background: #FFDCD0; /* EL COLOR DE FONDO DEL INTERIOR */ position: relative; opacity: 0; -moz-transition: all 0.2s ease-in-out 0.1s; /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */ -o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */ -webkit-transition: all 0.2s ease-in-out 0.1s; transition: all 0.2s ease-in-out 0.1s; } div.css3droppanel:after { /* Add bottom bar beneath wrapper */ content: ''; display: block; bottom: 0; position: absolute; width: 100%; height: 10px; /* variando este valor modificareis el grosor de la barra ir probando */ background: #2F3D4A; /* COLOR DE LA BARRA */ } div.css3droppanel input[type="checkbox"] { /* style invisible checkbox element used to toggle state of push down panel */ position: absolute; right: 50px; /* right position of checkbox */ width: 60px; /* width of checkbox */ height: 42px; /* height of checkbox */ bottom: -34px; /* bottom offset of checkbox */ z-index: 10; cursor: pointer; opacity: 0; } div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */ height: 350px; /* LA EXTENSION DEL INTERIOR EN VERTICAL */ opacity: 1; overflow: auto; } div.css3droppanel label { /* style label that's positioned below wrapper's bottom bar, and will toggle checkbox when interacted with */ position: absolute; /* varia estos valores y veras lo que pasa variar el boton*/ right: 50px; /* right position of label */ width: 60px; /* width of label */ height: 42px; /* height of label */ bottom: -34px; /* bottom offset of label */ border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; cursor: pointer; z-index: 5; background: #2F3D4A; /* COLOR DEL BOTON */ } div.css3droppanel label:hover { /* style of label when mouse rolls over it */ box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset; } div.css3droppanel label:after { /* generated down arrow */ content: ''; position: absolute; display: block; width: 0; height: 0; border: 12px solid transparent; border-color: white transparent transparent transparent; top: 18px; left: 18px; box-shadow: 0 0 7px gray inset; } </style> <!--[if lte IE 8]> <style> /* Hide panel from IE8 and below */ div.css3droppanel { display: none; } </style> <![endif]--> <div class="css3droppanel"> <input type="checkbox" id="paneltoggle" /> <label for="paneltoggle" title="Click to open Panel"></label> <div class="content"> <!--panel content goes here--> <p>AQUI EL TEXTO O LO QUE QUIERAS</p> <p> Resources: <a href="http://www.dynamicdrive.com/style">DD CSS Library</a>, <a href="http://www.cssdrive.com">CSS Drive</a>, <a href="http://www.javascriptkit.com">JavaScript Kit</a>. </p> <!-- end panel content --> </div> </div>

Por ultimo indicaros que si queréis tener varias barras es menester variar en cada uno de los lugares donde aparezca la palabra css3droppanel podeis por ejemplo numerarla (css3droppanelnº) y repetir el proceso, estoy segura que hay alguna otra manera más eficaz y sencilla pero no la se, esta funciona.

jueves, 16 de mayo de 2013

HISPABLOGGERS


   Me ha gustado tanto, que no he podido resistir la tentación de recomendaroslo, creo que es un espacio, que podría llegar a tener mucho impacto, está en proceso de maduración, por eso, es imprescindible nuestro apoyo.
Es este un lugar creado por y para todos los que tenemos un blog, lo que más me gusta de el es la facilidad con la que podemos valorar otros blog, ¿hay tantos que nos gustan verdad? en este espacio se hace de una forma dinámica y sencilla y depende de un solo click, ¿ eso esta bien eh?

Dame tu voto en HispaBloggers!

Lo que menos: ciertas zonas que requieren pago que yo reduciría a cero, pero ya me conocéis,  afortunadamente no son zonas imprescindibles para la función de esta web. 

Lo dicho, si tienes un blog, pásate por aquí y registrate.

viernes, 26 de abril de 2013

Uno más para mis
IMPRESCINDIBLES

mil trucos blogger

  Un espacio excelente donde encontraras de todo, herramientas, curiosidades, tutoriales. Perfectamente construido, de una fluidez que se nos hace cómodo y entretenido nuestro paseo por este lugar, que ya forma parte de mis imprescindibles, os recomiendo la visita.

Un ayudita en:CÓDIGO todo CÓDIGO

miércoles, 10 de abril de 2013

PARA QUE NOS SALGA REDONDO



    En esta ocasión os voy a mostrar un truco, aunque, más que un truco es puro código CSS, para que las imágenes de vuestro blog  queden redondeadas. Mi fuente "oloblogger", lo explica a la perfección, así que no dudéis en acudir a este magnifico blog, al final del articulo os daré el link concreto a este truco.
Bueno, vayamos por partes, lo primero es crear el estilo con css, la regla que  obrara el milagro, y que colocaremos o bien dentro de nuestra plantilla para no tener que repetir el código  o inline y aplicarlo exclusivamente a una sola imagen.
 <style type="text/css" media="screen"> (solo si no lo haces en la plantilla de vuestro blog)
     LA REGLA DE ESTYLO
.redondo img{
border: 2px solid grey;
margin: 0;
padding: 0;
border-radius: 800px;
overflow: hidden;
}
---------------------------------------------------------
</Style> (solo si no lo haces en la plantilla de vuestro blog)

Ahora viene el código html que ara que las imágenes con la clase redondo se redondeen:

<div class="redondo">
<img src="DIRECCION_IMAGEN"/>
</div>

Este código lo colocareis para incrustar la imagen allí donde lo deseéis.
No lo olvidéis: todo junto css y html se hará en una entrada o gadget para ejecutarlo sobre una sola imagen, pero, si el CSS, lo añadís a la plantilla antes de ]]</b:skin>, tan solo colocareis en el lugar deseado el html.
  

miércoles, 3 de abril de 2013

ELIGE PLANTILLA


   Muchas veces nos apetece cambiar por completo el estylo de nuestro blog, otras, adictos como somos a compartir y comunicar, queremos crear otro nuevo, la elección de la plantilla siempre nos lleva tiempo, y blogger no nos ofrece mucha variedad; queremos que nuestro nuevo blog sea perfecto, pero acabamos siempre  eligiendo el mismo tipo de plantilla, pues bien, en este enlace que os dejo, seguro que hallareis la plantilla deseada , hay muchas y muy variadas, de dos, de tres, de cuatro columnas, con efectos, sin efectos y todas a vuestro alcance.

sábado, 30 de marzo de 2013

BOTÓN compartir entrada en PINTEREST

    He probado muchos botones y códigos y al final he dado con un método que funciona. 
Lo encontré en el blog que os referencio al fanal, está tan perfectamente explicado, que yo no podría hacerlo mejor, así que hacer click  en la imagen y comprobareis lo sencillo que resulta:

Texto de la entrada en dos columnas

Es un resultado chulo verdad, a dos columnas como en los periódicos. Mi fuente esta:

Mi aportación en el código justificar el texto y colocar un link con imagen.
Conseguirlo es muy fácil, el código que obra el milagro os lo dejo a continuación, utilízarlo en vuestras entradas y listo:
<div style="float: left; width: 45%;text-align:justify"><h3>TEXTO DE LA COLUMNA DE LA IZQUIERDA</br><a href=" URL DEL LINK" target="blank"><img src=" URL DE LA IMAGEN" width="180" height="115"/></a><br/>TEXTO DE DEBAJO DE LA IMAGEN.</h3></div><div style="float: right; width: 45%;text-align:justify"><h3>TEXTO DE LA COLUMNA DE LA DERECHA</div></h3> <div style="clear: both"></div>

jueves, 21 de marzo de 2013

UNA IMAGEN COMO TÍTULO DE UN GADGET


   Lo primero que haremos sera añadir el gadget a personalizar en tu barra lateral o en cualquier sección del blog.
Para ello, accede al apartado Diseño>Elementos de la página>Añadir un gadget.
Seguidamente, atribúyele el título que quieras.
Guárdalo y sigue estos pasos: 
1º) Busca en tu plantilla el gadget en cuestión (Control+f, para acceder al buscador) hasta que aparezca un código similar este, unas veces puede ser mas largo o más corto, resulta indiferente para lo queremos cambiar:

<b:widget id='HTML1' locked='false' title='EL NOMBRE DE TU GADGET ' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

2º) Reemplaza la línea resaltada en color verde por esto:
<img src="URL DE TU IMAGEN"/> (podría estar alojada en Picasa>

3º) Guarda la plantilla para terminar.

martes, 19 de marzo de 2013

VISTO Y NO VISTO
(ocultar textos)

Estoy de un simple que me salgo, voy a referiros un truco muy sencillo pero muy util que nos servira para esconder aquello que solo a voluntad del usuario, el sufrido usuario, se mostrará


CLIK AQUÍ


EL ESCRIPT QUE OBRA EL MILAGRO


<script type='text/JavaScript'>
function blmostrocult(blconted) {
var c=blconted.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Tenéis dos opciones para introducir este script en vuestros blog, si lo vais a utilizar a menudo seria conveniente implementarlo en vuestra plantilla: presionáis la casilla de artilugios y buscáis </head> justo entes lo pegáis.
Si por el contrario lo vais a utilizar en contadas ocasiones, lo agregáis antes del código html que os proporciono, allí donde lo usareis, bien sea en una entrada o en un gadget.

El código html que hará que funcione el script

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">TITULO</a><div style="display: none;"> CONTENIDO OCULTO </div>




lunes, 18 de marzo de 2013

ENLAZAR A VUESTRO BLOG (EL CÓDIGO)

   Este es el código que deberéis pegar en un gadget html/java... ( aquí lo tienes amiga puede variar el tamaño modificando los valores de width = anchura y height = largo )

<center><a href="URL DEL BLOG"><img alt="" src="URL DE LA IMAGEN" width="135" height="125" /></a></center>
<center><textarea rows="3" cols="15" onclick="this.select();"><a href="URL DEL BLOG"><img alt="" src="URL DE LA IMAGEN" height="135" width="125" /></a></textarea></center>

domingo, 17 de marzo de 2013

ENTRADAS RELACIONADAS

mil trucos blogger
   Este link nos llevará a un lugar que quizá ya muchos de vosotros conocéis  pero para aquellos que aun no tienen este script en su blog les diré que facilitar mucho que los usuarios puedan consultar otros artículos de vuestro blog,es un gadget atractivo, que no parece dar complicaciones de momento, su función, generar unos link con imagen a otras entradas. 

Una vez situados en esta pagina configuramos los siguiente parámetros:
Email: Tu Correo
Blog link: URL de tu blog
Plataform: Blogger
Width: Cantidad de entradas a mostrar.

Por ultimo hacéis un  click en Get Widget! y añades el gadget a tu blog.
Si no queréis instalarlo de forma convencional copiar el código  que esta en  editar contenido y lo colocáis en el apartado diseño debajo de la entrada en un gadget  html/java...

jueves, 14 de marzo de 2013

UN MENÚ FÁCIL DE HACER Y COLOCAR


  Lo primero de todo comentar con agrado que he localizado un excelente blog del que precisamente proviene este menú,  cargado de contenidos útiles para nuestros propósitos estéticos y mucho más, tanto es así que he decidido incluirlo en mi lista de imprescindibles, no dejéis de pasaros por el .
Ahora, lo prometido es deuda aquí va el código de este magnifico menú balanceante
tan solo tendréis que cortar y pegar el codigo en una gadget html/java... sustituyendo la parte  resaltada en rojo por los enlaces deseados. 
Dentro del div están las entrada propiamente dichas del MENÚ, para aumentar o disminuir tan solo habréis de añadir o quitar  este bloque tal cual :

<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
El ancho del menú se encuentra en la zona de Style:
#containerbalanceo {
  position: relative;
  width: 96%;   Este es el valor que deberéis cambiar.
}
Hay otros muchos valores que se pueden cambiar en esta zona ir probando.
 EL CÓDIGO COMPLETO:

<div id="containerbalanceo">
<ul id="menubalanceo">
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

</ul>
</div>


<style>

#containerbalanceo {
  position: relative;
  width: 96%; 
}

#containerbalanceo:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#menubalanceo {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 20px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);

  background: #cccccc;
background: -moz-linear-gradient(top,  #cccccc 0%, #9e9e9e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#9e9e9e));
background: -webkit-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -o-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -ms-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: linear-gradient(to bottom,  #cccccc 0%,#9e9e9e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#9e9e9e',GradientType=0 );


}

#menubalanceo, #menubalanceo ul {
  list-style: none;
}

#menubalanceo > li {
  float: left;
  position: relative;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 0 rgba(255,255,255,.25);

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;

}

#menubalanceo > li:first-child {
  border-left: 1px solid rgba(255,255,255,.25);
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menubalanceo a {
                font-family:century gothic;
  display: block;
  position: relative;
  z-index: 10;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  color: rgba(75,75,75,1) !important;
  line-height: 1;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.05em;
  background: transparent; 
  text-shadow: 0 1px 1px rgba(255,255,255,.9);
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;

}
        #menubalanceo > li:hover > a {
                font-family:century gothic;
  background: #333;
  color: #00DFFC !important;
  text-shadow: none;
}

#menubalanceo li ul  {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 200px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}


#menubalanceo li:hover ul {

  padding: 15px 0;
  background: #333;
  opacity: 1;
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);

  -webkit-animation-name: swingdown;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;

  -moz-animation-name: swingdown;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;

  -o-animation-name: swingdown;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;

  -ms-animation-name: swingdown;
  -ms-animation-duration: 1s;
  -ms-animation-timing-function: ease;

  animation-name: swingdown;
  animation-duration: 1s;
  animation-timing-function: ease;

}

@-webkit-keyframes swingdown {
  0% {
   opacity: .99999;
   -webkit-transform: rotateX(90deg);
  }

  30% { 
   -webkit-transform: rotateX(-20deg) rotateY(5deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  65% {
   -webkit-transform: rotateX(20deg) rotateY(-3deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  100% {
   -webkit-transform: rotateX(0);
   -webkit-animation-timing-function: ease-in-out;
  }
}

@-moz-keyframes swingdown {
  0% {
   opacity: .99999;
   -moz-transform: rotateX(90deg);
  }

  30% { 
   -moz-transform: rotateX(-20deg) rotateY(5deg);
   -moz-animation-timing-function: ease-in-out;
  }

  65% {
   -moz-transform: rotateX(20deg) rotateY(-3deg);
   -moz-animation-timing-function: ease-in-out;
  }

  100% {
   -moz-transform: rotateX(0);
   -moz-animation-timing-function: ease-in-out;
  }
}

@-o-keyframes swingdown {
  0% {
   opacity: .99999;
   -o-transform: rotateX(90deg);
  }

  30% { 
   -o-transform: rotateX(-20deg) rotateY(5deg);
   -o-animation-timing-function: ease-in-out;
  }

  65% {
   -o-transform: rotateX(20deg) rotateY(-3deg);
   -o-animation-timing-function: ease-in-out;
  }

  100% {
   -o-transform: rotateX(0);
   -o-animation-timing-function: ease-in-out;
  }
}

@-ms-keyframes swingdown {
  0% {
   opacity: .99999;
   -ms-transform: rotateX(90deg);
  }

  30% { 
   -ms-transform: rotateX(-20deg) rotateY(5deg);
   -ms-animation-timing-function: ease-in-out;
  }

  65% {
   -ms-transform: rotateX(20deg) rotateY(-3deg);
   -ms-animation-timing-function: ease-in-out;
  }

  100% {
   -ms-transform: rotateX(0);
   -ms-animation-timing-function: ease-in-out;
  }
}

@keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }

  30% { 
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }

  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }

  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
}

#menubalanceo li li a {
                font-family:century gothic;
  padding-left: 15px;
  font-weight: 400;
  color: #00DFFC !important;
  text-shadow: none;
  border-top: dotted 1px transparent;
  border-bottom: dotted 1px transparent;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -o-transition: all .15s linear;
  -ms-transition: all .15s linear;
  transition: all .15s linear;
}

#menubalanceo li li a:hover {
  color: rgba(0,223,252,1);
  border-top: dotted 1px rgba(255,255,255,.15);
  border-bottom: dotted 1px rgba(255,255,255,.15);
  background: rgba(0,223,252,.02);
}

</style>

¡VENGA! Echarle una ojeada a este blog:

Entradas populares

MI DEBILIDAD