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
A continuación mire su demostración
Desktop
Móvil
Primero:
Se recomienda realizar una copia de seguridad de su blog de Blogger por si algo no le sale correctamente
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:" ";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/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:'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(https://reatlat.github.io/Material-Design-Blogspot/fonts/fontello.woff2?37618884) format('woff2')
}
</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(){$("#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 -->
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
Comentarios