Mega menú Material Design

Un concepto de navegación receptivo inspirado en material design de Google, que transforma un menú horizontal normal en un menú fuera de lienzo móvil con una barra de alternar cuando el tamaño de la pantalla es menor que un punto de corte especificado definido en las consultas de medios de CSS, un concepto básico.

¿El Mega Menú Material design es responsive?

Es totalmente responsive, se lo puede utilizar correctamente desde cualquier dispositivo móvil

¿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 que se encuentra en el siguiente enlace

Código de colores Material design

A continuación mire su demostración
Desktop





Móvil


Video tutorial Mega Menú Material design


Primero:

Se recomienda realizar una copia de seguridad de su blog de Blogger por si algo no le sale correctamente

¿Cómo hacer una copia de seguridad de mi blog?

Segundo:

Puede practicar en un blog de ejemplos antes de agregarlo en su blog oficial

Empezamos

1 Un clic en Tema


2 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.


Busque la siguiente línea de código


<head>


Inserte el siguiente código justo abajo del código que encontró


<!-- 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 -->


Busque la siguiente línea de código


</head>


Inserte las siguientes líneas de código justo arriba del código que encontró


<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:&quot; &quot;;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 &gt; li{float:left;width:100%}
.mega-menu-nav &gt; li &gt; a{display:block;height:48px;line-height:48px;color:#666}
.mega-menu-nav &gt; li:hover &gt; 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:&quot;\f105&quot;;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:&quot;\f107&quot;;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/AVvXsEhbRdF-oT5rs1ihiN2Xfm9R17CdxEIGOhIZraqgxoyEf1DeSphYcP_Cp6scwRT5xmKuwfK-aiVFHUzrjVVZtfZHnZ3iJZwqsW56LIFZWAqQUVqn8ofBjA7rjSCmf6dnCl2yQBo6vYSawS4/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:&#39;Roboto&#39;,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(https://reatlat.github.io/Material-Design-Blogspot/fonts/fontello.woff2?37618884) format(&#39;woff2&#39;)
}
</style>


Busque la siguiente línea de código


</body>


Inserte las siguientes líneas de código justo arriba del código que encontró


<!-- Codec Mega Menu Material design -->
<script src='https://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(){$(&quot;#mega-informa&quot;).click(function(){$(&quot;#nav-menu1&quot;).toggleClass(&quot;shows&quot;);});});
$(document).ready(function(){$(&quot;.toggleMenu&quot;).click(function(){$(&quot;.dropdowns&quot;).toggleClass(&quot;shows&quot;);});});
$(document).ready(function(){$(&quot;.oscuro,#closedrop&quot;).click(function(){$(&quot;.dropdowns,.oscuro&quot;).removeClass(&quot;shows&quot;);});});
$(document).ready(function(){$(&quot;.toggleMenu&quot;).click(function(){$(&quot;.oscuro&quot;).toggleClass(&quot;shows&quot;);});});
$(document).ready(function(){$(&quot;#show-menu-small&quot;).click(function(){$(&quot;#mega-menu-material,.adb-open&quot;).toggleClass(&quot;shows&quot;);});});
$(document).ready(function(){$(&quot;.adb-open&quot;).click(function(){$(&quot;#mega-menu-material,.adb-open&quot;).removeClass(&quot;shows&quot;);});});

//<![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 -->


Busque la siguiente línea de código


<body>


Inserte las siguientes líneas de código justo abajo del código que encontró


<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/>


Realice los siguientes cambios:

Cambie los símbolos numerales # por URLs

Cambie todas las palabras que están marcadas

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/AVvXsEhbRdF-oT5rs1ihiN2Xfm9R17CdxEIGOhIZraqgxoyEf1DeSphYcP_Cp6scwRT5xmKuwfK-aiVFHUzrjVVZtfZHnZ3iJZwqsW56LIFZWAqQUVqn8ofBjA7rjSCmf6dnCl2yQBo6vYSawS4/s1600/logo-sidebar.jpg


Cambie la URL de imagen por una nueva, se recomienda que la imagen sea pequeña de un tamaño de 300x250px

Eso es todo

Un clic en Guardar Tema

Visite su blog y mire cómo funciona este nuevo Mega Menú Material design para Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

0 comments:

Publicar un comentario