Así quedará cualquier menú en nuestra sidebar (barra lateral), una vez que hayamos seguido los pasos, solo hagan click en links, para que vean como se despliega la lista con los links que estan ocultos.
Ejemplo:
Links [+/-]
Con la implementación de este menú ahorraremos mucho espacio, no habrán filas interminables de directorios o de links de intercambio. El lector tendrá que pinchar en el [+/-] y listo. Páginas simples se ven mejor, que páginas completamente cargadas de cosas.
Cuando el usuario termine de usar el menú, podrá volver a ocultar el texto. Todo esto sucede en la misma página.
Así quedará cualquier menú en nuestra sidebar (barra lateral), una vez que hayamos seguido los pasos, solo hagan click en links, para que vean como se despliega la lista con los links que estan ocultos.
Ejemplo:
Links [+/-]
Con la implementación de este menú ahorraremos mucho espacio, no habrán filas interminables de directorios o de links de intercambio. El lector tendrá que pinchar en el [+/-] y listo. Páginas simples se ven mejor, que páginas completamente cargadas de cosas.
Cuando el usuario termine de usar el menú, podrá volver a ocultar el texto. Todo esto sucede en la misma página.
Pendiente para esta Plataforma
Esta funcionalidad se compone de tres elementos: CSS, Javascript y, cómo no, los códigos de plantilla de Blogger. Vayamos por pasos.
Paso 1:
CSS
Es la parte más sencilla. Necesitamos un par de ejemplos que oculten o muestren entradas.
Copie estas dos líneas en su hoja de estilos:
.posthidden {display:none}
.postshown {display:inline}
Osea estas 2 líneas de código deben estar dentro de <style> y </style>
Para la mayoría de las plantillas de blogger, su hoja de estilos suele aparecer en la parte superior de su plantilla, entre los códigos <style> y </style>. Algunas plantillas simplemente hacen referencia a un archivo externo que contiene el style. Si se encuentra en un archivo externo, entonces deberán primero descargarlo, cambiarlo (agregándole las dos líneas mencionadas) y luego volver a subir el archivo a un servidor propio.
Paso 2:
Javascript
Añada el código siguiente a su plantilla, entre <head> y </head>:
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}</script>
Lo importante del código anterior es que tenemos que darle un nombre exclusivo (id) a cada una de las secciones que necesitemos ocultar.
Paso 3:
Códigos de Blogger
Ahora que tenemos las herramientas preparadas, podemos comenzar a ocultar el menú que necesitemos.
En forma General cada sección que necesitemos ocultar quedará así:
<a href="javascript:expandcollapse('id exclusivo')"><h2 class="sidebar-title">NOMBRE SECCIÓN [+/-]
</h2></a>
<span class="posthidden" id="id exclusivo">LINEAS DE CODIGO QUE VAMOS A OCULTAR
</span>
Por ejemplo para la plantilla Minima Black, los Previews Post (Post Anteriores) se representan por estas líneas de código:
<h2 class="sidebar-title"><$I18NPreviousPosts$></h2>
<ul id="recently">
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
Para Ocultarlo debemos cambiarlo por el siguiente:
<a href="javascript:expandcollapse('Post Anteriores')"><h2 class="sidebar-title">Post Anteriores [+/-]
</h2></a>
<span class="posthidden" id="Post Anteriores">
<ul id="recently"><BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems></ul>
</span>
El Menu de Links se representa por el siguiente Código:
<MainOrArchivePage>
<h2 class="sidebar-title"><$I18NLinks$></h2>
<ul>
<li><a href="http://news.google.com/">Google News
</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me
</a></li>
<li><a href="http://help.blogger.com/bin/answer.py?answer=41427">Edit-Me
</a></li>
</ul>
</MainOrArchivePage>
Para Ocultarlo debemos cambiarlo por el siguiente:
<a href="javascript:expandcollapse('Links')"><h2 class="sidebar-title">Links [+/-]
</h2></a>
<span class="posthidden" id="Links">
<ul id="recently"><BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems></ul>
</span>
El Menu de Archivos se representa por el siguiente código:
<MainOrArchivePage>
<h2 class="sidebar-title"><$I18NArchives$></h2>
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</MainOrArchivePage>
Para Ocultarlo debemos cambiarlo por el siguiente:
<MainOrArchivePage>
<a href="javascript:expandcollapse('Archivos')"><h2 class="sidebar-title">Archivos[+/-]
</h2></a>
<span class="posthidden" id="Archivos">
<ul class="archive-list">
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</span>
</MainOrArchivePage>
Hay dos partes importantes de este código:
1.- El empaquetador <span> que rodea todas las líneas de código que se quieren ocultar.
2.- El id que nos sirve para identificar lo que se oculta. Este id se repite en 2 partes: en el link (<a href="javascript:expandcollapse('Archivos')">) y en el span (<span class="posthidden" id="Archivos">)
Pueden ocultar lo que quieran imágenes, banners, cualquier cosa que este en la plantilla.
Resultado:
Plantillas Con cambios realizados:
Minima Black (Descargar)
Dots (Descargar)
Esta funcionalidad se compone de tres elementos: CSS, Javascript y, cómo no, los códigos de plantilla de Blogger. Vayamos por pasos.
Paso 1:
CSS
Es la parte más sencilla. Necesitamos un par de ejemplos que oculten o muestren entradas.
Copie estas dos líneas en su hoja de estilos:
.posthidden {display:none}
.postshown {display:inline}
Osea estas 2 líneas de código deben estar dentro de <b:skin><![CDATA[/* y ]]></b:skin>
Para la mayoría de las plantillas de blogger, su hoja de estilos suele aparecer en la parte superior de su plantilla, entre los códigos <b:skin><![CDATA[/* y ]]></b:skin>. Algunas plantillas simplemente hacen referencia a un archivo externo que contiene el style. Si se encuentra en un archivo externo, entonces deberán primero descargarlo, cambiarlo (agregándole las dos líneas mencionadas) y luego volver a subir el archivo a un servidor propio.
Paso 2:
Javascript
Añada el código siguiente a su plantilla, entre <head> y </head>:
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}</script>
Lo importante del código anterior es que tenemos que darle un nombre exclusivo (id) a cada una de las secciones que necesitemos ocultar.
Paso 3:
Códigos de Blogger
Ahora que tenemos las herramientas preparadas, podemos comenzar a ocultar el menú que necesitemos. Primero debemos idenficar la sidebar en la plantilla, para esto buscamos el siguiente código:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Debajo de estas 2 líneas se encuetra ubicado todo el código que corresponde al menú, como los archivos, links y perfil.
En forma General cada sección que necesitemos ocultar quedará así:
<b:widget id='LinkList1' locked='false' title='VINCULOS' type='LinkList'>
<b:includable id='main'>
<!--COMIENZO NOMBRE SECCIÓN -->
<a href='javascript:expandcollapse("Vinculos")'><b:if cond='data:title'><h2><data:title/></h2></b:if></a>
<!--FIN NOMBRE SECCIÓN -->
<span class='posthidden' id='Vinculos'>
<!--COMIENZO LINEAS DE CODIGO QUE VAMOS A OCULTAR-->
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
<!--FIN LINEAS DE CODIGO QUE VAMOS A OCULTAR-->
</span>
</b:includable>
</b:widget>
Por ejemplo para la plantilla Minima Black, los Links se representan por estas líneas de código:
<b:widget id='LinkList1' locked='false' title='Vinculos' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Para Ocultarlo debemos cambiarlo por el siguiente:
<b:widget id='LinkList1' locked='false' title='VINCULOS' type='LinkList'>
<b:includable id='main'>
<a href='javascript:expandcollapse("Vinculos")'><b:if cond='data:title'><h2><data:title/></h2></b:if></a>
<span class='posthidden' id='Vinculos'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</span>
</b:includable>
</b:widget>
Hay dos partes importantes de este código:
1.- El empaquetador <span> que rodea todas las líneas de código que se quieren ocultar.
2.- El id que nos sirve para identificar lo que se oculta. Este id se repite en 2 partes: en el link (<a href="javascript:expandcollapse('Vinculos')">) y en el span (<span class="posthidden" id="Vinculos">)
Pueden ocultar lo que quieran imágenes, banners, cualquier cosa que este en la plantilla.
Resultado:
Plantillas Con cambios realizados:
Minima Black (Descargar)
Si este Post te ayudó recuerda votar por el blog En esta Página

Loading ...
Post Relacionados
Usar Dreamweaver en tu blog">
Usar Dreamweaver en tu blogComo Agregar un Menu de Opciones">
Como Agregar un Menu de OpcionesMas Juegos para el Blog">
Mas Juegos para el BlogBejeweled en tu Blog">
Bejeweled en tu BlogUn link Para Hacer tu Web una Pagina de Inicio de tus Visitas">
Un link Para Hacer tu Web una Pagina de Inicio de tus Visitas
Post al Azar:
Envía este Post
30. October 2007. a las 8:53 pm
He intentado hacerlo , pero no soi capaz, si me pudieras dar algunos tipos de consejos o nose algo parecido
muchas grcias
31. October 2007. a las 3:10 pm
alonshow, mira en un tiempo mas pondré una hora de referencia en el gabbly, para los lunes echar una manito con los problemas, asi que ahi me podras preguntar, para ver como solucionamos tu problema….
ahora te pido que verfiques algunas cosas:
…
1.- debes saber bien con que estilo de plantilla estas trabajando…si tu plantilla tiene cosas como esta
<b: y cosas como widget, entonces debieras estar viendo este mismo post pero en la version beta-blogger, para esto tienes que pinchar debajo del titulo del post la imagen de la plataforma que necesitas, en tu caso betablogger o sea
2.- si estas en la seccion correcta, y tu plantilla tiene solo html y las etiquetas de blogger <MainOarc…
entonces, por mientras, que yo me hago un huequito los lunes para ayudar, revisa los pasos una y otra vez… a veces un parentesis cambia todo.. pega el primer codigo justo debajo de style y el segundo justo debajo de head..
estamos en contacto
5. November 2007. a las 3:13 pm
muchas gracias lo volvere a intentar
19. December 2007. a las 3:13 am
gracias por el tuto, ya lo use en mi web http://troyanosyvirus.com.ar
saludos
4. January 2008. a las 2:43 pm
de nada
9. July 2008. a las 9:51 pm
Felicitaciones, muy buena tu página.
Me encantaía INTERCAMBIAR LINK contigo y con todos aquellos que necesitan al igual que yo subir en Ranking.
Mis páginas son:
http://videosmusicaleslatinos.blogspot.com
http://videosmusicalesdecumbia.blogspot.com
http://videosmusicalesdesalsa.blogspot.com
http://videosmusicalesvariados.blogspot.com
http://biografiadecantanteslatinos.blogspot.com
http://letradecancioneslatinas.blogspot.com
A todos los interesados deberán poner nuestros LINKS ya mencionados en su pagina principal hacia nuestra pagina
y luego enviarnos sus link a nuestro mail: videos_musicales@hotmail.es
El link que debes poner es de acuerdo a los nombres de nuestras paginas ya mencionadas.
TE ASEGURO QUE DENTRO DE LAS 24 HORAS ESTAREMOS CONFIRMANDO EL LINK DE TUS PAGINAS A NUESTRAS 6 Páginas
(OJO: NUESTRAS PAGINAS TIENEN ENTRE 2, 3 A 4 DE PageRank) Así que te conviene nuestro intercambio de link Porque mientras que uno este incluido en mas PAGINAS Y AUN MAS CON 3 a más DE PAGERANK pues subes automaticamente. Espero su respuestas.) Gracias
SON 6 PAGINAS DONDE ESTARIAS INCLUIDO, NO LO PIENSE MUCHO Y HAZLO. SUERTE
28. July 2008. a las 3:40 am
Me gustaría hacer un apunte, por si les sirve a posibles lectores que no han conseguido hacer lo que explica esta entrada:
para que me salga todo correctamente he tenido que colocar el primer código despues de las Variable definitions dentro de mi plantilla de blogger, y el segundo justo al principio de . Sólo así he conseguido que me saliera el menú expandible.
Ahora quisiera hacer una pregunta: ¿Cómo puedo poner en un mismo elemento de pagina varios menus expandibles?
Es que quiero crear un indice, de tal manera que pulsando la “A” salieran enlaces con la “A”, pulsando “B” enlaces con la B etc. y no sé ponerlos en un mismo elemento porque con el código que dais, cada seccion viene definida por el titulo del elemento, y solo se puede poner una seccion, cuando yo necesito 28 para cada letra del alfabeto.
Saludos y gracias
28. July 2008. a las 7:12 pm
no puedo ayuda porfavor…. gracias ahi esta mi blodg para que le eches sun vistaso.xau
31. July 2008. a las 7:39 pm
Estimado, como puedo realizar lo siguiente, al ingresar la pagina solo te muestre la Bienvenida y Nuestros Servicios, y las otras entradas de Blog , no aparezca, la idea que cuando vayas al menu pueda aparecer sobre los primeros elementos.. como una nueva plantilla.