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.

Entradas populares

MI DEBILIDAD