miércoles, 13 de marzo de 2013

Custom FanBox Twitter con JQuery y Css V2.0 para blogger

3/13/2013

Esta es laversión2 del fanbox de twitter personalizado que utiliza JQuery y Css , mejorando su aspecto y funcioneshaciéndolomás fácilde instalar y más liviano, pueden ver un ejemplo de ello clic enResult ▼


Instalación
Paso 1) Añadir el Script Twitter
dirigase a laopciónPlantilla -Editar HTML , realice lacombinaciónde teclas CTRL-F para abrir el buscador y escriba la etiqueta/head una vez encontrada justo arriba de ella pegue el siguientecódigojavascript.

eval(function(p,a,c,k,e,d){e=function(c){return(ca?'':e(parseInt(c/a)))+((c=c%a)35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('(7(c){c.1b.10=7(l){l=c.2y({},c.1b.10.1J,l);z 21.3m(7(){9 f=[],h=-1,i=-1,e=c(21),g=Q,j=Q,k=Q,a=l,s=7(b){b.13?(f=b.13,0!=f.C&&(!a.2f||2f.C/a.N?f.Ca.N&&(f.C=a.N):(b=1G.2d(f.C/a.N),b=1G.2d(1G.3v()*b),f=f.3s(b*a.N,b*a.N+a.N)),a.2h&&(f=f.3j()),n(),g=c('D E="1H-13" L="'+(a.1x?"Z:"+a.1x+"Y":"")+'"/D'),k?g.2g(k):g.1W(e),a.U&&(j=c('D E="1H-U" L="'+(a.1A?"Z:"+a.1A+"Y":"")+'"/D').2g(g)),m(),a.1w&&a.1w())):a.1f&&e.R('b L="1e:1c"1Z:'+(b.W?b.W:"26")+"/b")},m=7(){g.R("");1l(9 b=0;bf.C;b++){9 d=f[b],o=a.1F&&d.T?d.T:"H://F.G/"+d.K,e=d.16+(d.12&&a.U?": "+d.12.1j:""),e=e.y(/"/g,"&38;").y(/'/g,"'");c('a L="'+(a.1v?"1o:2e;":"")+"P:"+a.18+'Y" I="'+o+'" 1n="'+e+'" O="M"1s 1p="'+d.1m+'" 1i="0" Z="'+a.18+'" P="'+a.18+'"/'+(a.2q?"i"+d.16+"/i":"")+"/a").3f(g)}h=a.1y?-1:c("a",g).C;p();i=-1;a.U&&q()},p=7(){h=a.1y?h+1:h-1;9 b=c("a:3R("+h+")",g);J(b.C){9 d={};d[a.1v]="17";b.1d(d,a.2A,"1a",p)}29!a.U&&a.11&&g.1d({19:1},a.2x,"1a",m)},q=7(){J(a.11||!(i=c("a",g).C-1))-1i?c("D",j).3B(a.1E,r):r()},r=7(){1l(9 b=Q,d=Q;!d;){i++;J(i=c("a",g).C){a.11&&m();z}b=f[i];d=b.12}9 o=a.1F&&b.T?b.T:"H://F.G/"+b.K,e=b.16;j.R('D L="1o:2e;"'+(a.1K?'a E="2B" I="'+o+'" 1n="'+e+'" O="M"1s 1p="'+b.1m+'" Z="'+a.1u+'" P="'+a.1u+'" 1i="0"//a':"")+'V E="31"'+(a.1U?'2sa I="'+o+'" 1n="'+e+'" O="M"'+b.K+"/a/2s":"")+'V E="2U"'+t(d.1j)+'/VV E="2O"'+(a.27?'a E="2K" I="H://F.G/'+b.K+"/12/"+d.2M+'" O="M"'+u(d.2L)+"/a":"")+"/V/V/D");b={};b[a.1R]="17";c("D",j).1d(b,a.1E,"1a",v)},v=7(){c("D",j).1d({19:1},a.1V,"1a",q)},t=7(b){z b.y(/\2S?\:\/\/\S+/1q,7(b){9 a="",b=b.y(/(\.*|\?*|\!*)$/,7(b,d){a=d;z""});z'a E="2R" I="'+b+'" O="M"'+(25b.C?b.2T(0,24)+"...":b)+"/a"+a}).y(/\B\@([A-2z-2k]{1,15})/1q,'@a E="2Q" I="H://F.G/$1" O="M"$1/a').y(/\B\#([A-2z-2k]+)/1q,'a E="2P" I="H://2l.F.G/2l?q=%23$1" O="M"#$1/a')},u=7(b){/^(\w\w\w) (\w\w\w) (\d\d?) (\d\d?:\d\d?:\d\d?) ([\+\-]\d+) (\d\d\d\d)$/i.2N(b)&&(b=b.y(/^(\w\w\w) (\w\w\w) (\d\d?) (\d\d?:\d\d?:\d\d?) ([\+\-]\d+) (\d\d\d\d)$/i,"$1, $3 $2 $6 $4 $5"));9 a=2r 1r,c=2r 1r;a.2V(1r.32(b));9 e=c.2u(),f=c.2b()+1,g=c.2p(),i=c.1Q(),h=c.1O(),c=c.1M(),j=a.2u(),k=a.2b()+1,l=a.2p(),m=a.1Q(),n=a.1O(),b=a.1M();J(l==g&&k==f&&j==e){a=i-m;J(0a)z a+" 33"+(1a?"s":"")+" 1k";h-=n;J(0h)z h+" 34"+(1h?"s":"")+" 1k";b=c-b;z b+" 30"+(1b?"s":"")+" 1k"}z"2W,2X,2Y,2Z,35,2C,2I,2D,2G,2F,2H,2J".2E(",")[k-1]+" "+j+", "+l},w=7(b){k=c('D E="1H-1z" L="'+(a.1C?"Z:"+a.1C+"Y":"")+'"/D').1W(e);n();J(b.K){9 d='a I="1Y" O="M" 3w="3F"1s 1p="1N" 1i="0" /2t1P/2t9i/i3G @2a/91X↑↑ 2i 3H 3I 3E 3D :)/1X/a';a.1D&&(d=a.1D);k.R(d.y(/1Y/g,"H://F.G/"+b.K).y(/3z/g,b.3y).y(/2i/g,b.3A).y(/1N/g,b.1m).y(/1P/g,b.16).y(/2a/g,b.K));a.1B&&a.1B()}29 a.1f&&k.R('b L="1e:1c"1Z:'+(b.W?b.W:"26")+"/b")},x=7(a){1l(9 a=a.3C(0).3K,d=0;da.C;d++){9 e=a[d];J(8==e.3Q&&e.28)z c.3S(e.28)}z""},n=7(){a.P&&e.1L("P",a.P+"Y");9 b=c(".F-3P",e);b.1j("3L 1S-1T.G/3N 36");b.2v("I","H://3M.1S-1T.3O.G/");b.17().1L("1o","3J")};(7(){9 b=e.2v("1h-3x");b||(b=x(e));J(b){0b.3g("{")&&(b="{"+b+"}");3h{a=3i("("+b+")")}3e(d){e.R('b L="1e:1c"3d W: '+d+"/b");z}a=c.2y({},c.1b.10.1J,a)}!a.X&&a.1f&&e.R('b L="1e:1c"37 X 3a 3b 3c!/b');a.1z&&c.2c({T:"H://1t.F.G/1/13/17.1g",1h:{K:a.X},2w:w,2m:"2n",2o:!0});c.2c({T:a.14?"H://1t.F.G/1/2j/14.1g":"H://1t.F.G/1/2j/3k.1g",1h:{K:a.X,3t:-1,3u:!1},2w:s,2m:"2n",2o:!0})})()})};c.1b.10.1J={1f:0,X:"",14:0,P:0,N:20,2f:0,2h:0,1x:0,1w:Q,11:0,1F:0,18:22,2q:1,1v:"19",2A:3r,2x:3q,1y:1,1z:1,1D:"",1C:0,1B:Q,U:0,1A:0,1K:1,1U:1,27:1,1u:22,1V:3l,1E:3n,1R:"19"}})(1I);1I(3o).3p(7(){1I("D.F-14").10()});',62,241,'|||||||function||var|||||||||||||||||||||||||replace|return|||length|div|class|twitter|com|http|href|if|screen_name|style|_blank|users_max|target|width|null|html||url|tweet|span|error|username|px|height|twitterFriends|loop|status|users|friends||name|show|user_image|opacity|linear|fn|red|animate|color|debug|json|data|border|text|ago|for|profile_image_url|title|display|src|gi|Date|img|api|tweet_image|user_animate|users_loaded|users_height|user_append|header|tweet_height|header_loaded|header_height|header_html|tweet_change|user_link|Math|tfw|jQuery|defaults|tweet_avatar|css|getSeconds|_ti_|getMinutes|_tn_|getHours|tweet_animate|javaface|elblogdelprogramador|tweet_author|tweet_stay|prependTo|dfn|_tp_|Error||this|48||||unkown|tweet_date|nodeValue|else|_ts_|getMonth|ajax|floor|none|users_random|insertAfter|users_reverse|_fo_|statuses|9_|search|dataType|jsonp|cache|getFullYear|user_name|new|strong|em|getDate|attr|success|user_swap|extend|Z0|user_change|avatar|Jun|Aug|split|Oct|Sep|Nov|Jul|Dec|date|created_at|id_str|test|meta|hashtag|at|link|bhttps|substr|content|setTime|Jan|Feb|Mar|Apr|second|body|parse|hour|minute|May|widget|Twitter|quot||was|not|set|Options|catch|appendTo|indexOf|try|eval|reverse|followers|5E3|each|200|document|ready|2E3|100|slice|cursor|include_entities|random|align|options|friends_count|_fr_|followers_count|fadeOut|get|unete|siguen|left|Sigueme|Personas|me|block|childNodes|by|www|add|blogspot|load|nodeType|eq|trim'.split('|'),0,{}))



Nota:deberátener instalado el plugin JQuery caso contrario no funcionara el Fanbox

Paso 2) Añadir el Css y el Div
culminado el paso 1,realice lacombinaciónde teclas CTRL-F y busque/b:skin justo arriba pegue el siguiente codigo css.

Mostrar Codigo


Guarde los cambios y dirigase aDiseño- click en añadir un gadget - y escojaopciónHTML/JavaScript y pegue el siguientecódigo.

div class="twitter-friends" data-options="{username:'JavaFaceBlogPro', width:448,height:300 }"
div class="twitter-load"
/div
/div

Parámetros
username: tu nombre de usuario
width: ancho
height: alto

Guarda los cambios y listo ,si presentaalgúnproblema por favor avisarme :) , unarecomendaciónsi utilizan varioscódigosJQuery puede que surja un conflicto con el fanbox y este no presente nada no funcione.

martes, 12 de marzo de 2013

Instala en tu blog 3D Gallery Round fácilmente

3/12/2013
Hace poco les presente 3D Gallery un slider deimágenesen 3D bastante bueno , ahora les presento la segunda parte el mismo SLIDER pero con efecto ovalado o redondo en lasimágenes pueden verlo funcionadoaquí▼



Instalación
Paso 1) Añadir el Codigo CSS y JQuery
Dirigase alaOpciónPlantilla-luego escoja laOpciónEditar HTMLluego realice lacombinaciónde teclas CTRL-F y digite en el buscador la etiqueta/head y justo arriba de ella pegue el siguientecódigo.

Mostrar Codigo


Nota:deberátener instalado el Plugin JQuery en su blog casocontrariono funcionara


Paso 2) Añadiendo el contenedor y las imágenes
terminado el paso 1, dirigase aDiseño-escoja laopciónañadir gadget- y escoja laopciónHTML/javaScripty pegue el siguientecódigo.

section id="contenedor" class="contenedor"
    div class="contenedor_imagenes"
     a href="#"
                    img src="http://t1.ftcdn.net/jpg/00/37/57/04/400_F_37570429_WGqWBJvq4wtcX0cHCIPfjPykjsKIuYgH.jpg"
                     alt="image01"divGracias por/div
                     /a
     a href="#"
                    img src="http://multiwallpapers.net/wp-content/uploads/2013/03/sexy_jessica_alba_wallpaper-400x267.jpg"                    alt="image02"divVisitar el/div
                    /a
     a href="#"
                    img src="http://t2.ftcdn.net/jpg/00/19/62/31/400_F_19623107_KBxBqIJCm1hZuafFvPCcLLlj1u4fOq6Z.jpg" 
                    alt="image03"divBlogg de JavaFace/div
                    /a
                    a href="#"
                    img src="http://t2.ftcdn.net/jpg/00/20/63/99/400_F_20639941_LwN1A3n5wWnmm1HCCnVc7HL6ASXvLKPX.jpg" 
                    alt="image03"divEl blog del/div
                    /a
                    a href="#"
                    img src="http://acg.vlexofree.com/wp-content/plugins/wp-o-matic/cache/a11ce_mashiro-400x267.jpg" 
                    alt="image03"divProgramador/div
                    /a
    /div
    !--nav 
     span class="dg-prev"</span
     span class="dg-next">/span
    /nav--
   /section


lasimágenesestáncon un tamaño de 400 x 297 pixeles ustedpodrácambiar el tamaño en el codigo css. buscando el siguientecódigo.
.contenedor_imagenes a{
    width: 400px;/*tamaño que va a tener las imagenes*/
    height: 267px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(221, 221, 221, 0.3);/*color del fondo del contendor de imagenes*/
                background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
                background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
                background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
                background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
                background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    border-radius: 50%; /* Borde redondeado */
                box-shadow: 0px 0px 8px #000; /* Sombra */
   }


aquí usted podrá cambiar la apariencia del contenedor de las imágenes a su gusto, reemplazando los valores width(ancho) 400px y height(alto) 267 px por los valores de susimágenes.

lunes, 11 de marzo de 2013

Descarga Toad Data Modeler 4.1.5.8 full

3/11/2013

¿Que es Toad Data Modeler?

Ayuda a organizar, crear, mantener y documentar sus sistemas de base de datos con una interfaz gráfica fácil de usar en estructuras de base de datos nuevas o existentes.



Toad Data Modeler permite a los usuarios revertir las estructuras de base de datos de ingeniería del software, actualizar modelos, diseñar y generar SQL, comparar modelos y generar secuencias de comandos modificadas, crear informes HTML o RTF, además de la creación de versiones de diseños de bases de datos y creación de listas de tareas pendientes.


Caracterisiticas
Crea visualmente estructuras de base de datos (lógica, universal y diagramas de entidad-relación físicos - ERD)

Crea ERD para varios sistemas de bases de datos (Oracle, MS SQL, DB2, MySQL, PostgreSQL etc.)

Aplica la ingeniería inversa en estructuras de base de datos ya existentes y ve la estructura de base de datos existente en forma de un diagrama

Añade datos lógicos a los diagramas y describe mejor las estructuras de bases de datos existentes

Verifica ERD (modelo) y obtén una lista de errores, advertencias y consejos
Genera automáticamente código SQL para la base de datos de destino seleccionada
Genera documentación detallada en formato HTML o RTF

Sincroniza un modelo con base de datos existentes físicamente (mediante características de generación de secuencias de comandos modificadas y combinación de modelo)

Realiza un seguimiento de los cambios mediante el administrador de versión interno
Crea y mantén una lista de tareas relacionadas con un modelo o una parte concreta de un modelo utilizando la función de lista de tareas pendientes
Realiza tareas diarias rápida y cómodamente, gracias a las mejoras de GUI
Personaliza el producto según tus requerimientos (incluyendo personalización de formularios) y mucho más
Afecta a los objetos de ERD a través de secuencias de comandos internas (secuencias de comandos de cambio de nombre por lotes, definidas por el usuario etc.)

    Requisitos:

    Al menos 256 MB de memoria RAM, se recomienda 1 GB
    Al menos 160 MB de espacio en el disco duro, se recomiendan 320 MB
    Servidor de base de datos:
    DB2 UDB v. 8 (LUW), 9.0 (LUW), 9.5 (LUW), 9.7 (LUW)
    DB2 z/OS v. 9, v.10
    Ingres 9.3, 10.0
    Access 2000 / 2002 / 2003 / 2007 / 2010
    SQL Server 2000, 2005, 2008
    SQL Azure
    MySQL 5.0, 5.1, 5.5
    Oracle 9i, 10g, 11g R1, 11g R2
    PostgreSQL 8.1, 8.2, 8.3, 8.4, 9.0
    Sybase ASE 12.5, 15, 15.5
    Sybase SQL Anywhere 11
    Servidor de base de datos en la nube:
    Base de datos Oracle ejecutándose en Amazon EC2
    SQL Server ejecutándose en Microsoft SQL Azure
    Base de datos MySQL ejecutándose en Amazon RDS
    Adobe Acrobat Reader 7.0 o posterior
      DESCARGAR

      martes, 5 de marzo de 2013

      Instala Slider 3D Gallery en tu Blog facilmente

      3/05/2013

      Gallery 3D es un Slider deimágenes que crea una efecto realista en 3D con CSS Y JQUERY siendo un slider experimental se ha hecho popular en varios sitios web hoy les enseño como instalar de manera sencilla este espectacular slider.

      Instalación
      Paso 1) Añadir el Codigo CSS y JQuery
      Dirigase alaOpcionPlantilla-luego escoja laOpciónEditar HTMLluego realice lacombinaciónde teclas CTRL-F y digite en el buscador la etiqueta/head y justo arriba de ella pegue el siguientecódigo.

      Mostrar Codigo

      Nota: debera tener instalado el Plugin JQuery en su blog casocontrariono funcionara

      Paso 2) Añadiendo el contenedor y las imágenes
      terminado el paso 1, dirigase aDiseño-escoja la opcionañadir gadget- y escoja la opcionHTML/javaScript y pegue el siguiente codigo .

      section id="contenedor" class="contenedor"
          div class="contenedor_imagenes"
           a href="#"img src="images/1.jpg" alt="image01"divTitulo de la imagen/div/a
           a href="#"img src="images/2.jpg" alt="image02"divTitulo de la imagen/div/a
           a href="#"img src="images/3.jpg" alt="image03"divTitulo de la imagen/div/a
          /div
          !--nav 
           span class="dg-prev"</span
           span class="dg-next">/span
          /nav--
         /section


      Guarde los cambios y listo tendra un Slider en 3D, ahora si usted desea cambiar el aspecto por defecto por ejemplo la imagen que tiene de fondo el contenedor de lasimágenescuyo nombre esbrowser,o el tamaño de dicho contenedorpuede hacerlo esto lo encontrara en .
      .contenedor_imagenes a{
          width: 482px;
          height: 316px;
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWEk6M7T3SsXD0fq0sKgfub8UWtxk3LplXmN3vYmItbNpFeAus4Q73mLnFmW9zDXssU-K9tsW645JywcW3m_LXku6hfJtEyjtNLr8y6gvhyphenhyphenQ5E_Dore0l46JZ-3V2fDQjX_6MbLY-rlU/s482/browser.png) no-repeat top left;
          box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
         }



      lunes, 4 de marzo de 2013

      Instala Nivo Slider en tu Blog con solo dos Pasos

      3/04/2013

      El control deslizante Nivo es reconocido mundialmente como el slider más hermoso y fácil de usar en el mercado. El plugin de jQuery es totalmente gratuito y de código abierto totalmente y no hay mejor manera de hacer que su sitio web tenga un mejor aspecto.

      Instalación

      Paso 1) Añadir el Scripty Css de Nivo
      Para añadir estos doscódigosjavascript y css , dirigase a laopciónPlantilla - escoja laopciónEditar HTML luego realice la siguientecombinaciónde teclas CTRL-F para abrir el buscador y digite la etiqueta/head ,una vez que encuentre este etiqueta justo arriba de esta pegue el siguiente codigo.

      Mostrar Codigo

      Recuerde que para utilizar este Plugindeberátener instalado el Plugin JQuery caso contrario no funcionara.

      Parámetros del Plugin
      si usted llegase a desear otro efecto de desplazamiento o cambiar el tamaño de lasimágenesa su gustodeberáde tener en cuenta lo siguiente:
      A) para cambiar el tamaño del Slider y adaptarlo a la imagen que usted desee solo debe de encontar el estilo
      #NivoSlider {
      position:relative;
      width:640px  !important; 
      height:480px  !important;
      }

      cambiando los valores width(Ancho) y height(Alto)podrácambiar el tamaño del Slider.
      B) Para cambiar las configuraciones del slider ya sea el efecto de desplazamiento,la opacidad,el tiempo de cada imagen usted lopodráhacer dentro del JQuery.
      Estos son los valores por defecto

      effect : 'random',
      slices : 15,
      boxCols : 8,
      boxRows : 4,
      animSpeed : 500,
      pauseTime : 3000,
      startSlide : 0,
      directionNav : true,
      directionNavHide : true,
      controlNav : true,
      keyboardNav : false,
      pauseOnHover : true,
      captionOpacity : 0.6

      effect es la variable que recibe el valor del efecto deseado los cuales son:

      random
      sliceDown
      sliceDownLeft
      sliceUp
      sliceUpLeft
      sliceUpDown
      sliceUpDownLeft
      fold
      fade
      slideInRight
      slideInLeft
      boxRandom
      boxRain
      boxRainReverse
      boxRainGrow
      boxRainGrowReverse
      ustedpodrájugar cambiando los valores asta tener el efecto de su agrado.

      slices: cantidad de rebanadas que sera dividida la imagen
      boxCols: columnas
      boxRows: filas
      animSpeed : velocidad detransicióndel slider
      pauseTime : tiempo que se demora cada imagen
      startSlide: tiempo que debe de comenzar el slider por general es 1 o 0
      directionNav : botones dedirección que reciben un valor booleanotrue:Activadofalse: desactivado
      directionNavHide : muestra los botones dedirecciónsegúnel valor booleano al pasar el mouse por encimatrue:Mostrarfalse:No Mostrar
      controlNav: Mostrar controles dedirección
      keyboardNav: activarnavegacióncon el teclado
      pauseOnHover: detener laanimaciónotransiciónal pasar elmouse
      captionOpacity: opacidad de lasimágenesa realizar la transición

      Paso 2) Crear el contenedor y añadir lasimágenes
      Una vez culminado el paso 1 , solo queda añadir lasimágenesdentro de un contenedor DIV, para ello dirigase alaopciónDiseño-- y escoja laopciónañadir un gadget - y escoja la opcionHTML/Javascript y pegue el siguientecódigo.

      div id="Container"
      	div id="NivoSlider"
      		img src="http://www.fondos-hq.com/upload/DesktopWallpapers/cache/03816-640x480.jpg" 
              title="Imagen 1" alt=""/
      		img src="http://a123.g.akamai.net/7/123/5290/v0001/mtviestor.download.akamai.com/8619/_!//intlod/MTVInternational/umg_int/usuv71/100402/USUV71100402_640x480_1.jpg" 
              title="Imagen 2" alt=""/
      		img src="http://img208.imageshack.us/img208/2962/img3048640x480sy1.jpg" title="Imagen 3" alt=""/
      	/div
      /div


      Para añadir mas imágenes solo debe de colocar el códigoimg src="direccion de imagen" title="titulo de imagen" / dentro del contenedor div id="NivoSlider".
      Recomendación:
      Recuerde que antes de utilizar cualquier Slider que utilice JQuerydeberátener instalado el Plugin de JQuery y no colocarimágenesqueexcedanel peso de 400kb por quepodríavolver lento la carga de su blog.
      (si te sirvio este post ayudame dando clic ▼ en la imagen :) )









      domingo, 3 de marzo de 2013

      Paneles desplegables con HTML5 estilo MEGA para blogger

      3/03/2013
      Hay varias formas de crear contenedores que se expanden se los puede construir conJQuery y asta el mismo CSS3 pero hoy les presento una nueva forma conHMTL5 siendo unatecnologíanueva y que espero google agregue a blogger!,pero como no me gusta esperar me puse manos alcódigo.
      las etiquetasdetails ysummary son etiquetas simples que solo debemos de armar sin tanto programar solo añadir cualquier contenido o contenedor dentro de ellas y el navegador se encargara del resto ,ahora HTML5 al ser unatecnologíanuevahabráciertosnavegadores que no funcionara por el momento el unico que no da problemas y que asta el mismo MEGA recomienda es Google Chrome.
      puedes ver un ejemploAQUI

      Instalación
      Paso 1) Añadir el estilo CSS
      dentro de blogger dirigase alaopciónPlantilla - Editar HTML y realice lacombinaciónde teclas CTRL-F para abrir el buscador y coloque lo siguiente/b:skin una vez que aya encontrado este codigo justo arriba de el pegue el siguiente codigo css.
      details{
       color: #000;
       border: solid 1px #000;
       background: #fff;
       border:0px;
      }
      details p{
       text-align: justify;
      }
      details img{
       display: block;
          margin: auto;
      }
      summary{
         padding: 10px;
         color: #fefbfb;
         font-size: 16px;
         font-weight: normal;
         font-family: 'Open Sans', Arial, Helvetica, sans-serif;   
         text-align:left;
         cursor: pointer;
         background-color:#d11e00;
        -webkit-box-sizing: border-box;
      }
      summary::-webkit-details-marker {
        display: none
      }
      summary:after {
        content:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicO4lpamOBpqb9eN8-glAfuvNVL1OSssgu97hCHIYGc4h4cj2lFGGbRGX9I7zFehLqCFpMFN-DtZTYtW9Ya7OsrGFTcem2xrbVyMuZ3H8_M42e78LdfsxpX05bmdKIG8E49kwGewSQzxI/s26/cloud.png"); 
        color: #fff; 
        float: left; 
        font-size: 1.5em; 
        font-weight: bold; 
        margin: -5px 17px 0 0; 
        padding: 0; 
        text-align: center; 
        width:20px;
      }
      details[open] summary:after {
        content:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-PPLf_zvZ0hN6FGRQrIsb1w5ClHiKIURHoYs0CY0wRyqSW_z1qV9ZkNLe5MRA5ONpZf2LbyyLSLXZkK9K3YSdrvFOPrqSHfbnW3n4VdYFp9okoeugWP_GDrl6bFXs-l0PdgSBnMOeHtg/s32/cloud-dow.png");
      }

      #contenedor{
       padding: 10px;
      }
      .contenido{
       padding: 10px;
      }

      ustedpodrámodificar a su justo elcódigocss.

      Paso 2) Añadiendo estructura y contenedores
      ahora formaremos las etiquetas details y summary unaaclaraciónla etiqueta details me forma el contenedor y la etiqueta summary coloca el titulo.
      div id="contenedor"
          details open
              summaryTITULO 1/summary
              div class="contenido"
               p
                TU CONTENIDO         /p
              /div
          /details
                      !--CIERRE1--
                      !--INICIO 2--
          details
           summaryTITULO 2/summary
           div class="contenido"
            p
                TU CONTENIDO         /p
           /div
          /details
                      !--CIERRE 2--
                      !--INICIO 3--
          details
              summaryTITUTLO 3/summary
              div class="contenido"
               TU CONTENIDO
              /div
          /details
                      !--CIERRE--
         /div
                   /div


      Si se desea que todos los contenedoresaparezcanen estado cerrado solo debe de eliminar la condicionalopen caso contrario si se desea que uno o varios aparescan abiertos solo debe de agregar al details la condicionalopen , ejm:


      details open
              summaryQue es Java?/summary
              div class="contenido"
               p
      Java es un lenguaje de programación y la primera plataforma informática creada por Sun Microsystems                           en 1995. Es la tecnología subyacente que permite el uso de programas          /p
              /div
          /details




      Suscribirse a: Entradas (Atom)