MEGA MENÚ PARA BLOGGER

MEGA MENÚ PARA BLOGGER .

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.

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?

Tutorial

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 plantill

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

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

Busque la siguiente línea de código

</head>

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

Busque la siguiente línea de código

</body>

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

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

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/AVvXsEh3AiQyaPAMx4AVI4CVblZxMi2YamC1AitRDor-sEty5JoP1I3r-ZcLda1nXp6wFwT4OO3jSqy_2VxVA84TfpW4YLmeWWtN5S7f4hRvIYWzFtF_S9SvwxYtQPXIx_Yc9MsL3Ioq9FwFoMQ/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