Este menú es responsive, y se puede usar desde cualquier dispositivo.
Está inspirado en material Design de Google, que se tranforma a un menú horizontal en un menú fuera del blog.
¿Cómo cambiar de color al Mega Menú Material design?
Tendrá que buscar el siguiente código
#C3272B
Cambie la linea de código por una de la siguiente lista de colores
Código de colores Material design
Código de colores Material design
A continuación mire su demostración
Insertar codigo CSS
Nos vamos a Tema > Editar HTML.
En nuestra plantilla buscamos <head>
Justo después de este código incrustamos el siguiente código CSS.
<!-- Estilos material mega menu -->
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
<!-- End estilos material mega menu -->.
Insertar el Script
Seguimos en nuestra plantilla a buscamos </head>
Justo encima pegamos este otro código
Ahora vamos a darle forma.
Buscamos en nuestra plantilla <body>
Justo antes pegamos este otro:
El último código
Seguimos en nuestra plantilla y buscamos <body>.
Pega este código justo debajo
<section id='header-wrapper-menu'>
<div class='header-mega-menu'>
<div class='main-header'>
<a class='toggleMenu adb-th' href='javascript:;'><i class='material-icons'>menu</i></a>
<div class='mover-up'>
<a expr:href='data:blog.homepageUrl' rel='nofollow'><data:blog.title/></a>
</div>
</div>
<div class='search-mega-menu'>
<form action='/search' class='search-form' method='get' role='search'><span>
<input class='search-btn' type='submit' value=''/>
<input class='search-input' name='q' placeholder='keyword search' type='text' value=''/>
</span></form>
</div>
<a class='waves-effect' href='javascript:;' id='show-menu-small'><i class='fa fa-ellipsis-v'/></a>
<div id='mega-menu-material'>
<li><a class='waves-effect' href='#' itemprop='url' title='Nosotros'><span itemprop='name'>Nosotros</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Contactos'><span itemprop='name'>Contactos</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Mapa del sitio'><span itemprop='name'>Sitemap</span></a></li>
</div>
</div>
</section>
<br/>
<div class='oscuro'/><div class='adb-open'/>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<div class='wrapper-menu'>
<div class='perfil-mega-menu'>
<img alt='Luis Chávez' src='http://lh5.googleusercontent.com/-FS0EwnqZjd8/AAAAAAAAAAI/AAAAAAAAABg/TKdxYCWr6VY/s120-c-pf/photo.jpg' title='Luis Chávez'/>
<h3><a expr:href='data:blog.homepageUrl' rel='nofollow'><data:blog.title/></a></h3>
<a class='adb-th' href='javascript:;' id='mega-informa'><i class='material-icons'>keyboard_arrow_down</i></a>
<p>Mega menu Material design</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav mega-menu-nav'>
<li>
<a class='waves-effect' expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><i class='material-icons'>home</i> Inicio</span></a>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Blogger'><i class='fa fa-btc'/> Blogger</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Tecnología'><i class='fa fa-google-wallet'/> Tecnología</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Videos'><i class='fa fa-youtube-square'/> Videos</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Música'><i class='fa fa-folder-open-o'/> Música</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Entretenimiento'><span itemprop='name'>
<i class='fa fa-pie-chart'/> Entretenimiento</span></a>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Explore'><span itemprop='name'>
<i class='fa fa-tags'/> Explore</span></a>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Sitemap'><span itemprop='name'>
<i class='fa fa-sitemap'/> Sitemap</span></a>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Contactos'><span itemprop='name'>
<i class='fa fa-user'/> Contactos</span></a>
</li>
</ul>
<div class='iconos'>
<center>
<a href='#'><i class='fa fa-facebook'/></a>
<a href='#'><i class='fa fa-google-plus'/></a>
<a href='#'><i class='fa fa-twitter'/></a>
<a href='#'><i class='fa fa-linkedin'/></a>
</center>
</div>
</div>
</nav>
<br/>
Remplace todos los símbolos numerales # por la dirección URL de una de sus entradas o paginas
Cambie la imagen pequeña que está marcada de color amarillo
http://lh5.googleusercontent.com/-FS0EwnqZjd8/AAAAAAAAAAI/AAAAAAAAABg/TKdxYCWr6VY/s120-c-pf/photo.jpg
También, tendrá que cambiar el nombre que dice Luis Chávez
Busque la siguiente URL de imagen
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dYRh6zK6mcRAGBfP9fHU6aNy6qjX8A7jBqCStGD_aQWIn1ina9zIRSk14Nsj7Fn1HivtwyhCgo6XcE7AOUxZxSl89tstfR3yxfLEEUjb8OIWiIhHXr6-G_WRtcTHjzk_bCNuRSbQDjg/s1600/logo-sidebar.jpg
![]() |
Demo |
¿Cómo cambiar de color al Mega Menú Material design?
Tendrá que buscar el siguiente código
#C3272B
Cambie la linea de código por una de la siguiente lista de colores
Código de colores Material design
Foreign crimson
#C91F37
Red orange
#DC3023
Cochineal red
#9D2933
Monza
#CF000F
Brewed mustard-brown
#E68364
Pomegranate
#F22613
Scarlet
#CF3A24
Pure crimson
#C3272B
True red
#8F1D21
Chestnut Rose
#D24D57
One kin dye
#F08F907
Peach-colored
#F47983
Red plum colored
#DB5A6B
Medium crimson
#C93756
Cherry blossom color
#FCC9B9
Washed-out crimson
#FFB3A7
RADICAL RED
#F62459
Ibis wing color
#F58F84
Wisteria purple
#875F9A
Bellflower color
#5D3F6A
Wisteria color
#89729E
Iris color
#763568
Tatarian aster color
#8D608C
Thin color
#A87CA0
Violet color
#5B3256
MEDIUM PURPLE
#BF55EC
STUDIO
#8E44AD
WISTERIA
#9B59B6
LIGHT WISTERIA
#BE90D4
Sky color
#4D8FAC
Ultramarine color
#5D8CAE
PICTON BLUE
#22A7F0
DODGER BLUE
#19B5FE
PICTON BLUE
#59ABE3
Light blue color
#48929B
Thousand herb
#317589
JORDY BLUE
#89C4F4
STEEL BLUE
#4B77BE
Lapis lazuli color
#1F4788
Navy blue color
#003171
Hanada
#044F67
Indigo color
#264348
Siskin sprout yellow
#7A942E
young green onion
#8DB255
Fresh onion
#5B8930
Young bamboo color
#6B9362
Patina
#407A52
Green bamboo
#006442
GOSSIP
#87D37C
EUCALYPTUS
#26A65B
JUNGLE GREEN
#26C281
OBSERVATORY
#049372
JUNGLE GREEN
#2ABB9B
MOUNTAIN MEADOW
#16A085
TURQUOISE
#36D7B7
FREE SPEECH AQUAMARINE
#03A678
OCEAN GREEN
#4DAF7C
Patrinia flowers
#D9B611
Amur cork tree
#F3C13A
RIPE LEMON
#F7CA18
Japanese triandra grass
#E2B13C
Rapeseed oil-colored
#A17917
CREAM CAN
#F5D76E
SAFFRON
#F4D03F
Bright golden yellow
#FFA400
Sumac-dyed
#E08A1E
Gamboge
#FFB61E
Corn-colored
#FAA945
Egg-colored
#FFA631
Floral leaf-colored
#FFB94E
Golden fallen leaves
#E29C45
ECSTASY
#F9690E
Amber
#CA6924
LIGHTNING YELLOW
#F5AB35
SILVER
#BFBFBF
CARARRA
#F2F1EF
SILVER SAND
#BDC3C7
PORCELAIN
#ECF0F1
PUMICE
#D2D7D3
Harbor rat
#757D75
GALLERY
#EEEEEE
EDWARD
#ABB7B7
LYNCH
#6C7A89
CASCADE
#95A5A6
Nota:
Antes
de realizar cualquier cambio en nuestro blog, tendremos que realizar
una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Puedes ver en este post como lo hacemos paso a paso
Código de colores Material design
A continuación mire su demostración
Insertar codigo CSS
En nuestra plantilla buscamos <head>
Justo después de este código incrustamos el siguiente código CSS.
<!-- Estilos material mega menu -->
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
<!-- End estilos material mega menu -->.
Insertar el Script
Seguimos en nuestra plantilla a buscamos </head>
Justo encima pegamos este otro código
<style>
/* CSS Mega Menu Material Design */
#header-wrapper-menu {
background: #efefef;
height: 60px;
width: 100%;
position: fixed;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
top: 0;
right: 0;
left: 0;
z-index: 9;
transition: all .5s ease-in-out;
line-height: 40px;
}
#header-wrapper-menu .header-mega-menu{
width:100%;
height:60px;
background: #C3272B;
margin:0 auto;
}
.header-mega-menu .main-header{
margin-left:15px;
float:left;
}
.header-mega-menu .main-header a {
color: #fff;
margin-top: 2px;
}
.mover-up {
float: left;
margin-top: 8px;
}
@media (max-width:767px){
.header-mega-menu .menu-btn{float:right;width:60px;text-align:center;font-size:24px;color:#fff;cursor:pointer;text-decoration:none}#header-wrapper-menu .header-mega-menu .main-menu{box-shadow:0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);display:inline-block;position:fixed;z-index:-1;background:#333;text-align:right;padding:70px 50px 20px;list-style:none;left:0;width:100%;top:-1000px}#header-wrapper-menu .header-mega-menu .main-menu.active{top:0} .header-mega-menu .main-menu ul{list-style:none}#header-wrapper-menu .header-mega-menu .main-menu a,#header-wrapper-menu .header .main-menu a:focus, .header-mega-menu .main-menu a:hover,#header-wrapper-menu .header-mega-menu .main-menu a:visited{color:#fff;text-decoration:none}}
@media (min-width:768px){
#header-wrapper-menu .header-mega-menu .menu-btn{display:none}
#header-wrapper-menu .header-mega-menu .main-menu{margin-right:15px;float:right;display:inline-block;list-style:none}
#header-wrapper-menu .header-mega-menu .main-menu li{display:inline;margin:0 10px}
#header-wrapper-menu .header-mega-menu .main-menu li a{color:#fff}
}
#header-wrapper-menu .header-mega-menu .search-mega-menu{
float:left;
margin:0 0 0 30px;
margin-top: 8px;
}
@media (max-width:768px){
#header-wrapper-menu .header-mega-menu .search-mega-menu{
display:none;
}
}
@media (max-width:980px){
#header-wrapper-menu .header-mega-menu .search-mega-menu{
width:40%;
}
}
@media (min-width:981px){
#header-wrapper-menu .header-mega-menu .search-mega-menu{
width:45%;
}
}
#header-wrapper-menu .header-mega-menu .search-mega-menu input{outline:0}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-input{color:#D9D9D9;border-radius:2px;height:45px;width:100%;padding:0 50px;background-color:rgba(255,255,255,.16);border:none;-webkit-transition:background .2s ease;transition:background .2s ease}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-input:focus,#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-input:hover{background-color:rgba(255,255,255,.26)}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-btn{position:absolute;font-family:fontello;font-size:25px;margin:9px 4.5px;padding:0px;cursor:pointer;background:0 0;border:none;color:#A6A6A6;-webkit-transition:color .2s ease;transition:color .2s ease}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-btn:focus,#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-btn:hover{color:#D9D9D9}
.main-menu{-webkit-transition:top .5s ease-in-out;transition:top .5s ease-in-out}
/* Material Design Ayudadeblogger.com */
.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}
h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.mega-menu-nav{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.mega-menu-nav:before,.mega-menu-nav:after{content:" ";display:table}
.mega-menu-nav:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.mega-menu-nav ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.mega-menu-nav a{display:block;padding:0 15px}
.mega-menu-nav li{position:relative;margin:0}
.mega-menu-nav > li{float:left;width:100%}
.mega-menu-nav > li > a{display:block;height:48px;line-height:48px;color:#666}
.mega-menu-nav > li:hover > a{background:#E6E6E6}
.mega-menu-nav li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0}
.mega-menu-nav li li ul{left:100%;top:-1px}
.mega-menu-nav li li a.click ul{visibility:visible;opacity:10}
.mega-menu-nav li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.mega-menu-nav li li a:hover{background:#f0f0f0}
.mega-menu-nav li li li a{background:#fff;z-index:20;color:#333}
.mega-menu-nav li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.mega-menu-nav li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.mega-menu-nav li .dropdown:hover:after{color:#000}
.mega-menu-nav li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.mega-menu-nav h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .perfil-mega-menu {
padding: 20px 15px 10px;
background: #455A64 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dYRh6zK6mcRAGBfP9fHU6aNy6qjX8A7jBqCStGD_aQWIn1ina9zIRSk14Nsj7Fn1HivtwyhCgo6XcE7AOUxZxSl89tstfR3yxfLEEUjb8OIWiIhHXr6-G_WRtcTHjzk_bCNuRSbQDjg/s1600/logo-sidebar.jpg)repeat fixed;
color: #fff;
border-bottom: 1px solid #ddd;
line-height: 1.9;
z-index: 99;
}
.dropdowns h3{font-size:14px}
.mega-menu-nav p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#mega-informa{float:right;border-radius:100%;padding:0 10px;color:#999}
#mega-informa:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{left:0;opacity:1}
.oscuro{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.oscuro.shows{visibility:visible;opacity:1}
a:link{text-decoration:none;transition:all 0.25s linear}
.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;will-change:opacity, transform;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}
.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;-ms-transition:all 0.7s ease-out;transition:all 0.7s ease-out;-webkit-transition-property:-webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;-o-transition-property:-o-transform, opacity;transition-property:transform, opacity;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);pointer-events:none}
.waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)}
.waves-effect.waves-red .waves-ripple{background-color:rgba(244,67,54,0.7)}
.waves-effect.waves-yellow .waves-ripple{background-color:rgba(255,235,59,0.7)}
.waves-effect.waves-orange .waves-ripple{background-color:rgba(255,152,0,0.7)}
.waves-effect.waves-purple .waves-ripple{background-color:rgba(156,39,176,0.7)}
.waves-effect.waves-green .waves-ripple{background-color:rgba(76,175,80,0.7)}
.waves-effect.waves-teal .waves-ripple{background-color:rgba(0,150,136,0.7)}
.waves-notransition{-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;-ms-transition:none !important;transition:none !important}
.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)}
.waves-input-wrapper{border-radius:0.2em;vertical-align:bottom;width:100%}
.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}
.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none}
.waves-block{display:block}a.waves-effect .waves-ripple{z-index:-1}
.adb-th{display:inline-block;text-decoration:none;overflow:hidden;position:relative;z-index:0}
.ink{display:block;position:absolute;background:rgba(255,255,255,0.4);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.go-adb{-webkit-animation:ripple .55s linear;-moz-animation:ripple .55s linear;-ms-animation:ripple .55s linear;-o-animation:ripple .55s linear;animation:ripple .55s linear}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
#closedrop {
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
color: #fff;
}
#show-menu-small {
float: right;
padding: 0px 14px !important;
margin-top: 12px;
margin-left: -20px;
margin-right: 20px;
font-size: 22px !important;
color: #fff !important;
border-radius: 100%;
}
#mega-menu-material{font-family:'Roboto',Arial;visibility:hidden;position:fixed;background:#fff;text-transform:none!important;list-style:none;right:30px;top:60px;padding:5px 0;width:200px;height:auto;transition:all .3s ease-in-out;z-index:401;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);border-radius:2px;opacity:0}
#mega-menu-material li{width:100%}
#mega-menu-material li a{padding:10px 15px;width:100%;font-weight:400;color:#000!important;font-size:14px!important}
#mega-menu-material li a:hover{background:#e1e1e1}
#mega-menu-material.shows{visibility:visible;opacity:1}
.header-wrapper, #header-wrapper {
position: initial;
}
</style>
<script src='https://cdn.rawgit.com/grupodelecluse/mega-menu-blogger/d60bb11e/mega-material-design.js'/>
<!-- CSS icono search -->
<style type='text/css'>
@font-face{
font-family:fontello;
src:url(http://reatlat.github.io/Material-Design-Blogspot/fonts/fontello.woff2?37618884) format('woff2')
}
</style>
/* CSS Mega Menu Material Design */
#header-wrapper-menu {
background: #efefef;
height: 60px;
width: 100%;
position: fixed;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
top: 0;
right: 0;
left: 0;
z-index: 9;
transition: all .5s ease-in-out;
line-height: 40px;
}
#header-wrapper-menu .header-mega-menu{
width:100%;
height:60px;
background: #C3272B;
margin:0 auto;
}
.header-mega-menu .main-header{
margin-left:15px;
float:left;
}
.header-mega-menu .main-header a {
color: #fff;
margin-top: 2px;
}
.mover-up {
float: left;
margin-top: 8px;
}
@media (max-width:767px){
.header-mega-menu .menu-btn{float:right;width:60px;text-align:center;font-size:24px;color:#fff;cursor:pointer;text-decoration:none}#header-wrapper-menu .header-mega-menu .main-menu{box-shadow:0 3px 10px rgba(0,0,0,.23),0 3px 10px rgba(0,0,0,.16);display:inline-block;position:fixed;z-index:-1;background:#333;text-align:right;padding:70px 50px 20px;list-style:none;left:0;width:100%;top:-1000px}#header-wrapper-menu .header-mega-menu .main-menu.active{top:0} .header-mega-menu .main-menu ul{list-style:none}#header-wrapper-menu .header-mega-menu .main-menu a,#header-wrapper-menu .header .main-menu a:focus, .header-mega-menu .main-menu a:hover,#header-wrapper-menu .header-mega-menu .main-menu a:visited{color:#fff;text-decoration:none}}
@media (min-width:768px){
#header-wrapper-menu .header-mega-menu .menu-btn{display:none}
#header-wrapper-menu .header-mega-menu .main-menu{margin-right:15px;float:right;display:inline-block;list-style:none}
#header-wrapper-menu .header-mega-menu .main-menu li{display:inline;margin:0 10px}
#header-wrapper-menu .header-mega-menu .main-menu li a{color:#fff}
}
#header-wrapper-menu .header-mega-menu .search-mega-menu{
float:left;
margin:0 0 0 30px;
margin-top: 8px;
}
@media (max-width:768px){
#header-wrapper-menu .header-mega-menu .search-mega-menu{
display:none;
}
}
@media (max-width:980px){
#header-wrapper-menu .header-mega-menu .search-mega-menu{
width:40%;
}
}
@media (min-width:981px){
#header-wrapper-menu .header-mega-menu .search-mega-menu{
width:45%;
}
}
#header-wrapper-menu .header-mega-menu .search-mega-menu input{outline:0}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-input{color:#D9D9D9;border-radius:2px;height:45px;width:100%;padding:0 50px;background-color:rgba(255,255,255,.16);border:none;-webkit-transition:background .2s ease;transition:background .2s ease}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-input:focus,#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-input:hover{background-color:rgba(255,255,255,.26)}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-btn{position:absolute;font-family:fontello;font-size:25px;margin:9px 4.5px;padding:0px;cursor:pointer;background:0 0;border:none;color:#A6A6A6;-webkit-transition:color .2s ease;transition:color .2s ease}
#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-btn:focus,#header-wrapper-menu .header-mega-menu .search-mega-menu input.search-btn:hover{color:#D9D9D9}
.main-menu{-webkit-transition:top .5s ease-in-out;transition:top .5s ease-in-out}
/* Material Design Ayudadeblogger.com */
.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}
h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.mega-menu-nav{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.mega-menu-nav:before,.mega-menu-nav:after{content:" ";display:table}
.mega-menu-nav:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.mega-menu-nav ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.mega-menu-nav a{display:block;padding:0 15px}
.mega-menu-nav li{position:relative;margin:0}
.mega-menu-nav > li{float:left;width:100%}
.mega-menu-nav > li > a{display:block;height:48px;line-height:48px;color:#666}
.mega-menu-nav > li:hover > a{background:#E6E6E6}
.mega-menu-nav li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0}
.mega-menu-nav li li ul{left:100%;top:-1px}
.mega-menu-nav li li a.click ul{visibility:visible;opacity:10}
.mega-menu-nav li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.mega-menu-nav li li a:hover{background:#f0f0f0}
.mega-menu-nav li li li a{background:#fff;z-index:20;color:#333}
.mega-menu-nav li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.mega-menu-nav li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.mega-menu-nav li .dropdown:hover:after{color:#000}
.mega-menu-nav li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.mega-menu-nav h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .perfil-mega-menu {
padding: 20px 15px 10px;
background: #455A64 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dYRh6zK6mcRAGBfP9fHU6aNy6qjX8A7jBqCStGD_aQWIn1ina9zIRSk14Nsj7Fn1HivtwyhCgo6XcE7AOUxZxSl89tstfR3yxfLEEUjb8OIWiIhHXr6-G_WRtcTHjzk_bCNuRSbQDjg/s1600/logo-sidebar.jpg)repeat fixed;
color: #fff;
border-bottom: 1px solid #ddd;
line-height: 1.9;
z-index: 99;
}
.dropdowns h3{font-size:14px}
.mega-menu-nav p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#mega-informa{float:right;border-radius:100%;padding:0 10px;color:#999}
#mega-informa:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{left:0;opacity:1}
.oscuro{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.oscuro.shows{visibility:visible;opacity:1}
a:link{text-decoration:none;transition:all 0.25s linear}
.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;will-change:opacity, transform;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}
.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;-ms-transition:all 0.7s ease-out;transition:all 0.7s ease-out;-webkit-transition-property:-webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;-o-transition-property:-o-transform, opacity;transition-property:transform, opacity;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);pointer-events:none}
.waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)}
.waves-effect.waves-red .waves-ripple{background-color:rgba(244,67,54,0.7)}
.waves-effect.waves-yellow .waves-ripple{background-color:rgba(255,235,59,0.7)}
.waves-effect.waves-orange .waves-ripple{background-color:rgba(255,152,0,0.7)}
.waves-effect.waves-purple .waves-ripple{background-color:rgba(156,39,176,0.7)}
.waves-effect.waves-green .waves-ripple{background-color:rgba(76,175,80,0.7)}
.waves-effect.waves-teal .waves-ripple{background-color:rgba(0,150,136,0.7)}
.waves-notransition{-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;-ms-transition:none !important;transition:none !important}
.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)}
.waves-input-wrapper{border-radius:0.2em;vertical-align:bottom;width:100%}
.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}
.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none}
.waves-block{display:block}a.waves-effect .waves-ripple{z-index:-1}
.adb-th{display:inline-block;text-decoration:none;overflow:hidden;position:relative;z-index:0}
.ink{display:block;position:absolute;background:rgba(255,255,255,0.4);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.go-adb{-webkit-animation:ripple .55s linear;-moz-animation:ripple .55s linear;-ms-animation:ripple .55s linear;-o-animation:ripple .55s linear;animation:ripple .55s linear}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
#closedrop {
font-size: 18px;
position: absolute;
top: 10px;
right: 10px;
color: #fff;
}
#show-menu-small {
float: right;
padding: 0px 14px !important;
margin-top: 12px;
margin-left: -20px;
margin-right: 20px;
font-size: 22px !important;
color: #fff !important;
border-radius: 100%;
}
#mega-menu-material{font-family:'Roboto',Arial;visibility:hidden;position:fixed;background:#fff;text-transform:none!important;list-style:none;right:30px;top:60px;padding:5px 0;width:200px;height:auto;transition:all .3s ease-in-out;z-index:401;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);border-radius:2px;opacity:0}
#mega-menu-material li{width:100%}
#mega-menu-material li a{padding:10px 15px;width:100%;font-weight:400;color:#000!important;font-size:14px!important}
#mega-menu-material li a:hover{background:#e1e1e1}
#mega-menu-material.shows{visibility:visible;opacity:1}
.header-wrapper, #header-wrapper {
position: initial;
}
</style>
<script src='https://cdn.rawgit.com/grupodelecluse/mega-menu-blogger/d60bb11e/mega-material-design.js'/>
<!-- CSS icono search -->
<style type='text/css'>
@font-face{
font-family:fontello;
src:url(http://reatlat.github.io/Material-Design-Blogspot/fonts/fontello.woff2?37618884) format('woff2')
}
</style>
Ahora vamos a darle forma.
Buscamos en nuestra plantilla <body>
Justo antes pegamos este otro:
<!-- Codec Mega Menu Material design -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
var iQ=setInterval(function(){window.jQuery&&(clearInterval(iQ),jQuery(document).ready(function(){jQuery(window).scroll(function(){jQuery(this).scrollTop()>500?jQuery(".scrollup").fadeIn():jQuery(".scrollup").fadeOut()}),jQuery(".scrollup").click(function(){return jQuery("html, body").go-adb({scrollTop:0},600),!1}),jQuery(".fancybox").fancybox(),jQuery('a[href$=".png"], a[href$=".PNG"], a[href$=".jpg"], a[href$=".JPG"], a[href$=".gif"], a[href$=".GIF"]').each(function(){jQuery(this).addClass("fancybox")}),jQuery(".menu-btn").on("click",function(){jQuery(".main-menu").toggleClass("active")}),jQuery(".main-menu a").on("click",function(){jQuery(".main-menu").hasClass("active")&&jQuery(".main-menu").removeClass("active")}),jQuery(document).on("click",function(e){jQuery(e.target).closest(".menu-wrapper").length||jQuery(".main-menu").removeClass("active"),e.stopPropagation()})}))});
/*]]>*/
</script>
<script type='text/javascript'>
$(document).ready(function(){$("#mega-informa").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".oscuro,#closedrop").click(function(){$(".dropdowns,.oscuro").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".oscuro").toggleClass("shows");});});
$(document).ready(function(){$("#show-menu-small").click(function(){$("#mega-menu-material,.adb-open").toggleClass("shows");});});
$(document).ready(function(){$(".adb-open").click(function(){$("#mega-menu-material,.adb-open").removeClass("shows");});});
//<![CDATA[
// Mega menu Nav
var Script=function(){jQuery('.mega-menu-nav .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.mega-menu-nav'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".mega-menu-nav").scrollTo("-="+Math.abs(diff),500);else $(".mega-menu-nav").scrollTo("+="+Math.abs(diff),500)})}();
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var ink, d, x, y;
$(".adb-th").click(function(e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("go-adb");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("go-adb");
});
});
//]]>
</script>
<!-- End Codec Mega Menu Material design -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
var iQ=setInterval(function(){window.jQuery&&(clearInterval(iQ),jQuery(document).ready(function(){jQuery(window).scroll(function(){jQuery(this).scrollTop()>500?jQuery(".scrollup").fadeIn():jQuery(".scrollup").fadeOut()}),jQuery(".scrollup").click(function(){return jQuery("html, body").go-adb({scrollTop:0},600),!1}),jQuery(".fancybox").fancybox(),jQuery('a[href$=".png"], a[href$=".PNG"], a[href$=".jpg"], a[href$=".JPG"], a[href$=".gif"], a[href$=".GIF"]').each(function(){jQuery(this).addClass("fancybox")}),jQuery(".menu-btn").on("click",function(){jQuery(".main-menu").toggleClass("active")}),jQuery(".main-menu a").on("click",function(){jQuery(".main-menu").hasClass("active")&&jQuery(".main-menu").removeClass("active")}),jQuery(document).on("click",function(e){jQuery(e.target).closest(".menu-wrapper").length||jQuery(".main-menu").removeClass("active"),e.stopPropagation()})}))});
/*]]>*/
</script>
<script type='text/javascript'>
$(document).ready(function(){$("#mega-informa").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".oscuro,#closedrop").click(function(){$(".dropdowns,.oscuro").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".oscuro").toggleClass("shows");});});
$(document).ready(function(){$("#show-menu-small").click(function(){$("#mega-menu-material,.adb-open").toggleClass("shows");});});
$(document).ready(function(){$(".adb-open").click(function(){$("#mega-menu-material,.adb-open").removeClass("shows");});});
//<![CDATA[
// Mega menu Nav
var Script=function(){jQuery('.mega-menu-nav .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.mega-menu-nav'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".mega-menu-nav").scrollTo("-="+Math.abs(diff),500);else $(".mega-menu-nav").scrollTo("+="+Math.abs(diff),500)})}();
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var ink, d, x, y;
$(".adb-th").click(function(e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("go-adb");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("go-adb");
});
});
//]]>
</script>
<!-- End Codec Mega Menu Material design -->
El último código
Seguimos en nuestra plantilla y buscamos <body>.
Pega este código justo debajo
<section id='header-wrapper-menu'>
<div class='header-mega-menu'>
<div class='main-header'>
<a class='toggleMenu adb-th' href='javascript:;'><i class='material-icons'>menu</i></a>
<div class='mover-up'>
<a expr:href='data:blog.homepageUrl' rel='nofollow'><data:blog.title/></a>
</div>
</div>
<div class='search-mega-menu'>
<form action='/search' class='search-form' method='get' role='search'><span>
<input class='search-btn' type='submit' value=''/>
<input class='search-input' name='q' placeholder='keyword search' type='text' value=''/>
</span></form>
</div>
<a class='waves-effect' href='javascript:;' id='show-menu-small'><i class='fa fa-ellipsis-v'/></a>
<div id='mega-menu-material'>
<li><a class='waves-effect' href='#' itemprop='url' title='Nosotros'><span itemprop='name'>Nosotros</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Contactos'><span itemprop='name'>Contactos</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Mapa del sitio'><span itemprop='name'>Sitemap</span></a></li>
</div>
</div>
</section>
<br/>
<div class='oscuro'/><div class='adb-open'/>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<div class='wrapper-menu'>
<div class='perfil-mega-menu'>
<img alt='Luis Chávez' src='http://lh5.googleusercontent.com/-FS0EwnqZjd8/AAAAAAAAAAI/AAAAAAAAABg/TKdxYCWr6VY/s120-c-pf/photo.jpg' title='Luis Chávez'/>
<h3><a expr:href='data:blog.homepageUrl' rel='nofollow'><data:blog.title/></a></h3>
<a class='adb-th' href='javascript:;' id='mega-informa'><i class='material-icons'>keyboard_arrow_down</i></a>
<p>Mega menu Material design</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav mega-menu-nav'>
<li>
<a class='waves-effect' expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><i class='material-icons'>home</i> Inicio</span></a>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Blogger'><i class='fa fa-btc'/> Blogger</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Tecnología'><i class='fa fa-google-wallet'/> Tecnología</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Videos'><i class='fa fa-youtube-square'/> Videos</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Música'><i class='fa fa-folder-open-o'/> Música</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Entretenimiento'><span itemprop='name'>
<i class='fa fa-pie-chart'/> Entretenimiento</span></a>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Explore'><span itemprop='name'>
<i class='fa fa-tags'/> Explore</span></a>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Sitemap'><span itemprop='name'>
<i class='fa fa-sitemap'/> Sitemap</span></a>
</li>
<li>
<a class='waves-effect' href='#' itemprop='url' title='Contactos'><span itemprop='name'>
<i class='fa fa-user'/> Contactos</span></a>
</li>
</ul>
<div class='iconos'>
<center>
<a href='#'><i class='fa fa-facebook'/></a>
<a href='#'><i class='fa fa-google-plus'/></a>
<a href='#'><i class='fa fa-twitter'/></a>
<a href='#'><i class='fa fa-linkedin'/></a>
</center>
</div>
</div>
</nav>
<br/>
Remplace todos los símbolos numerales # por la dirección URL de una de sus entradas o paginas
Cambie la imagen pequeña que está marcada de color amarillo
http://lh5.googleusercontent.com/-FS0EwnqZjd8/AAAAAAAAAAI/AAAAAAAAABg/TKdxYCWr6VY/s120-c-pf/photo.jpg
También, tendrá que cambiar el nombre que dice Luis Chávez
Busque la siguiente URL de imagen
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dYRh6zK6mcRAGBfP9fHU6aNy6qjX8A7jBqCStGD_aQWIn1ina9zIRSk14Nsj7Fn1HivtwyhCgo6XcE7AOUxZxSl89tstfR3yxfLEEUjb8OIWiIhHXr6-G_WRtcTHjzk_bCNuRSbQDjg/s1600/logo-sidebar.jpg
0 Comentarios
En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias