Zonas Desplegables en un Blog

:) Hola,... buenos dias, tardes, noches.

El tema que meto hoy,... y hace dias que no escribo... es sobre Codigo para Blogs de Blogger. ( es mi primera aportacion en el tema de codigo y programacion en este blog ).

Todo salio de que un dia, no sabia como hacer unos menus desplegables,... y mi buen colega aragorn25 me echo un buen cable.
Gracias,... y de momento,... no fue al cuello :-)))

Al final no hice tales menus,... pero me puse a jugar con el codigo y salio esto: Zonas Desplegables en un Blog.

En teoria,... no deberia dar problemas en ninguna plantilla, ya que no toca la estructura en si de la misma,... de todas formas,... si puede fallar... seguro que falla :-)))

Esta probado tanto metiendolo dentro de un tema,... como aqui presento,... como metiendolo directamente en el codigo de la plantilla.

... bueno,... al grano que tiene pus :-)))

........................................

Una vez que hayamos realizado una copia de seguridad de nuestra plantilla y guardada en nuestro ordenador, procederemos a meter el siguiente
codigo dentro de la plantilla, colocandolo antes del cierre de la etiqueta </head>

<style type='text/css'>
.ver_menu { display:block; }
.ocultar_menu { display:none; }
</style>

<script type='text/JavaScript'>
function desplegar(categoria){
var menu = document.getElementById(categoria);
    if(menu.className == &quot;ver_menu&quot;){
      menu.className = &quot;ocultar_menu&quot;;
    }
    else{ menu.className = &quot;ver_menu&quot;; } }
</script>


</head>




Ahora veremos un codigo de pruebas y ejemplo, sobre el tema de las Zonas Desplegables en un Blog.
Lo meteis en un tema-post,... y suerte ;-)


... copiar desde aqui ...

<div class='desplega051'>
<a href='javascript:desplegar("desplega051");'><img borde='0' height='60' src='http://img178.imageshack.us/img178/6118/musicos01dd7.gif' width='60'/></a>
   <ul class='ocultar_menu' id='desplega051'>
--- inicio zona del desplega051 -----------------end
<br/>
<br/>
... metemos <b>Texto</b> en general dentro de la zona ...
<br/>
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
<br/>
... ahora metemos Codigo para un <b>Menu</b> dentro de la zona ...
<br/>
<br/>
<p>
<b>
<a href='http://www.hispamp3.com/' target='_blank' title='noticias e informatica en general...'>hispamp3</a> | <a href='http://www.vsantivirus.com/' target='_blank' title='seguridad en general...'>vsantivirus</a> |
<a href='http://alerta-antivirus.red.es/' target='_blank' title='seguridad en general...'>alerta-antivirus</a> |
<a href='http://es.wikipedia.org/' target='_blank' title='la enciclopedia libre...'>wikipedia</a> | <a href='http://www.20minutos.es/' target='_blank' title='noticias de actualidad...'>20minutos</a>
</b>
</p>
<br/>
<br/>
... ahora metemos codigo para un <b>Video</b> dentro de la zona ...
<br/>
<br/>
<object height='325' width='400'><param name='movie' value='http://www.youtube.com/v/FOGVBN3Ph6Y'/><param name='wmode' value='transparent'/><embed height='325' src='http://www.youtube.com/v/FOGVBN3Ph6Y' type='application/x-shockwave-flash' width='400' wmode='transparent'/></embed></object>
<br/>
<br/>
<b>&quot;The Cure - Catch&quot;,... bonito tema ;-)</b>
<br/>
<br/>
... de nuevo metemos <b>Texto</b> en general dentro de la zona ...
<br/>
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
... texto ... texto ... texto ... texto ... texto ... end
<br/>
<br/>
... y dejamos las pruebas por hoy,... que son las tantas :-)))
<br/>
<br/>
<img src='http://img237.imageshack.us/img237/8929/comillasabre02ew3.gif'/><b>bechitos pa las nenas ;-)</b><img src='http://img75.imageshack.us/img75/2120/comillascierra02ye3.gif'/>
<br/>
<br/>
... el efecto de las <b>Comillas</b> es una chapuza,... pero funciona Oiga !!! ... :-)))
<br/>
<br/>
--- final zona -----------------------------------end
</ul></div>

<br/>
<br/>

... hasta aqui ...


Como vereis,... el indicador desplega051 aparece tres veces escrito en el correspondiente codigo,... ese es el detalle que hay que tener en cuenta y ademas,... si a lo largo del Blog,... realizais mas Zonas Desplegables,... no debe repetirse ese indicador.
Asi que podeis numerarlos o nombrarlos a vuestro gusto.
... a mi me daba fallos,... si repetia ese mismo indicador en diferentes Zonas Desplegables,... por eso le añadi numeros.

Y por fin,... si no se produjo ningun error al escribir todo esto,
vamos a Ver la Demostracion y Resultado del juguete :-)))

--- inicio zona del desplega051 -----------------end




... metemos Texto en general dentro de la zona ...




... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end




... ahora metemos Codigo para un Menu dentro de la zona ...








hispamp3 | vsantivirus | alerta-antivirus | wikipedia | 20minutos








... ahora metemos codigo para un Video dentro de la zona ...









"The Cure - Catch",... bonito tema ;-)




... de nuevo metemos Texto en general dentro de la zona ...




... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end


... texto ... texto ... texto ... texto ... texto ... end




... y dejamos las pruebas por hoy,... que son las tantas :-)))




bechitos pa las nenas ;-)




... el efecto de las Comillas es una chapuza,... pero funciona Oiga !!! ... :-)))




--- final zona -----------------------------------end

... pulsando en la Imagen,... abre y cierra la Zona Desplegable.


Salu2, tommy ... aka ymmot ;-)


... dedico este tema con todo mi cariño,... a buenas gentes de Venezuela,... intentando Desplegar Las Libertades.




... ya de paso,... os recomiendo el Blog de Gema,... en donde empece a leer y practicar codigo como un poseido :-)))
Alli teneis mucha informacion y ayuda, para adentraros en el mundillo de mejorar vuestros Blogs de Blogger.

... lo mejor,... en los comentarios,... a veces hay sorpresas !!!