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:
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.
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:
.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>:
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:
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: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: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: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)
(No Ratings Yet)
Loading ...
He intentado hacerlo , pero no soi capaz, si me pudieras dar algunos tipos de consejos o nose algo parecido
muchas grcias
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
muchas gracias lo volvere a intentar
gracias por el tuto, ya lo use en mi web http://troyanosyvirus.com.ar
saludos
de nada
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
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
no puedo ayuda porfavor…. gracias ahi esta mi blodg para que le eches sun vistaso.xau
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.