Primero les muestro el menú en su forma vertical y horizontal. Luego ustedes eligen cuál de los dos colocar en sus blogs.
Nota: A cada imágen le pueden poner un enlace si ustedes quieren, sino no.
Por eso en el título le puse "posible galería de imágenes", porque pueden usarlo como menú o bien sin enlaces y usarlo como una mini galería de imágenes, esto lo deciden ustedes.
Bien, si les gustó y quieren colocarlo en sus blogs es muy muy sencillo, presten atención.
Vamos a Diseño | Edición de HTML y pegamos antes de </head> lo siguiente:
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Busca el siguiente código
</head>
Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:
script src='http://dl.dropbox.com/u/85861485/Scripts/mootools-core.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/85861485/Scripts/byslidemenu.js' type='text/javascript'/>
<style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
</style>
<script src='http://dl.dropbox.com/u/85861485/Scripts/byslidemenu.js' type='text/javascript'/>
<style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
</style>
Después pegamos antes de </body> esto:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
Busca este código
</body>
Ingresa el siguiente código justo arriba del código que encontraste.
<script type='text/javascript'>
window.addEvent('load', function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
});
</script>
window.addEvent('load', function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
});
</script>
Por último vamos Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega uno de estos códigos, dependiendo de si hayamos elegido el menú vertical o el horizontal:
Un clic en “Diseño”
Clic en “Añadir un gadget”
Busca el widget que dice “HTML-Javascript” y ábrelo
Coloca el siguiente codigo en el interior
Despues de haber insertado el código, un clic en "Guardar"
Si deseas usar el menú horizontal pega esto:
<ul class="bsm" id="byslidemenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>
si deseas el menú vertical pega este:
<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
<li></li></ul>
<ul class="bsm vertical" id="verticalmenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>
<li></li></ul>
<ul class="bsm vertical" id="verticalmenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>
Ahora solo nos toca reemplazar lo que está en rojo por las URL's correspondientes, de las imágenes y los enlaces a los que queremos que redireccione. Si deseamos que sea una galería de imágenes
Si vamos a hacer un menú deberíamos diseñar bien las imágenes para que quede presentable :)
0 comentarios