Para Tus Blogs: Menú 3D para Blogger

Menú deslizante 3D

»Vamos al blogger

Con este fantástico código podemos tener en el blogger un menú de diseño 3D.

1»Luego seleccionamos plantilla

1»Luego seleccionamos la opción “Editar HTML”

3»Después apretamos las teclas Ctrl + F

4» Buscamos: ]]></b:skin>

5» Y justo esto antes de ]]></b:skin> pegamos el siguiente script:

/* 3D Menu
----------------------------------------------- */
.meny {
display: none;
padding: 20px;
overflow: auto;
background: #333;
color: #FFFF00; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.meny h4 {
font-size: 27px; 
color:#fff; 
text-align:center;
}
.meny ul {
margin-top: 10px;
}
.meny ul li {
display: inline-block;
width: 200px;
list-style: none;
font-size: 20px;
padding: 3px 10px;
}
.meny-arrow {
position: absolute;
z-index: 10;
border: 10px solid transparent;
-webkit-transition: opacity 0.4s ease 0.4s;
-moz-transition: opacity 0.4s ease 0.4s;
-ms-transition: opacity 0.4s ease 0.4s;
-o-transition: opacity 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s;
}
.meny-left .meny-arrow {
left: 5px;
top: 350px;
margin-top: -16px;
border-left: 16px solid #333; 
}
.meny-right .meny-arrow {
right: 14px;
top: 150px;
margin-top: -16px;
border-right: 16px solid #333; 
}
.meny-top .meny-arrow {
left: 150px;
top: 14px;
margin-left: -16px;
border-top: 16px solid #333; 
}
.meny-bottom .meny-arrow {
left: 150px;
bottom: 14px;
margin-left: -16px;
border-bottom: 16px solid #333; 
}
.meny-active .meny-arrow {
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.contents {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

6» Buscamos <body> y pegamos debajo lo siguiente :

<div class='meny'>
<h4>Menú</h4>
<ul>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
</ul>
</div>

<div class='meny-arrow'/>
<div class='contents'>

6b» Donde pone 'URL del enlace' tenemos que poner la página que queramos abrir al apretar el texto.
Donde pone Texto de enlace ponemos el texto que queramos poner para buscar a cada URL.
Podemos añadir mas URLS poniendo antes de </ul>:
<li><a href='URL del enlace'>Texto del enlace</a></li>

7» Por último antes de </body> pegamos :

var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover">
</div>
<iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
}

//]]>
</script>

8» Para finalizar guardamos y listo !

Mira También :

La mejor Publicidad son tus Entradas

Para Tus Blogs

Menú 3D para Blogger

Menú deslizante 3D

Compartir con :

0 comentarios:

Top Entradas

Seguidores

Tags 1

Para Tus Blogs

Menú 3D para Blogger

Menú deslizante 3D

Compartir con :

0 comentarios:

Top Entradas

Texto Animado HTML

Gadget de Twitter & Facebook para Blogger

Poner texto en movimiento al lado del favicon Blogger

Iconos de redes sociales tipo Boton con efecto 3D Blogger

Botones de redes Sociales con efecto deslizante para blogger

Seguidores

Tags 1