Como fazer menu acima do Header Blogger responsive com botões sociais

- 11:18:00
como fazer menu acima header blogger responsive com botões sociais


Hoje vamos compartilhar um tutorial de como fazer um menu responsive acima do header do Blogger isso é muito útil uma vez que podemos colocar os botões das redes sociais bem como sitemap disclamer e outros então para adicionar isso a seu Blogger template siga os passos abaixo:

Faça login no blogger então va no menu modelo editar HTML
com as teclas combinadas CTRL+F busque por ]]></b:skin> e logo acima disso copie e cole o seguinte código.

/*Topmenu plus Social Icon */
.menu-wrapper {background:#fff;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;border-bottom:1px dashed #eee}
.top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;}
.top-menu ul {width:100%;padding:0;margin:0;text-align:left;}
.top-menu li {list-style-type:none;float:left;padding:0;margin:0;}
.top-menu li a {position:relative;font-size:14px;font-weight:400;background-color:transparent;color:#666;display:block;margin:0;padding:8px 12px 8px 0;line-height:100%;transition:color 0.3s;}
.top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;text-decoration:none;}
.top-menu li.socialwrap {float:right;}
.top-menu li.socialwrap a i{text-align:center;color:##666;transition:initial;}
.top-menu li.socialwrap a:hover{background:#ef4824;color:#fff;}
.top-menu li.socialwrap.pinterest {border-right:0;}
.top-menu a#pull {display:none;}
.top-menu li .fa {font-size:16px;}
@media only screen and (max-width:768px) {
.menu-top li ul {background:#222; border:none; box-shadow:none; }
.menu-wrapper {margin:0;border:1px solid #e6e6e6;background:#fff;}
.top-menu {display:block;width:100%;padding:0}
.top-menu ul {text-align:center;}
.top-menu ul {display:none;height:auto;}
.top-menu a#pull{color:#c00;display:inline-block;font-size:14px;font-weight:700;padding:10px;position:relative;text-align:left;width:100%}
.top-menu a#pull:before{content:"\f03a";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:20px;color:#c00;display:inline-block;position:absolute;right:15px;top:5%;margin-right:10px;line-height:30px;}
.top-menu a#pull:hover{background:transparent}
.top-menu li {display:block;width:50%;text-align:left;border-right:none;}
.top-menu li a {padding:15px 20px;display:block;color:#616161}
.top-menu li a:hover, nav a:active {background:#f0f0f0;border:none;color:#666;}
.top-menu ul li a:hover {background:#ef4824;color:#fff;}
.top-menu li.socialwrap {float:left;}
.top-menu li.socialwrap.twitter {border-left:0;}
.active {display:block;}
}
@media only screen and (max-width:640px) {
.menu-wrapper {margin:0 auto 20px auto;}
}
@media only screen and (max-width:480px) {
.top-menu li {display:block;width:100%;text-align:left;border-right:none;}
}

Então adicione o seguinte código acima de </head> ou </body> 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});
//]]>
</script>

Então vamos adicionar o HTML isso pode ser colocado sob <body> ou acima de <div id='header'> ou <div clas='header'>:

<div class='menu-wrapper'>
<nav class='top-menu'>
<ul>
     <li><a href='/p/about.html' title='About Us'>About</a></li>
     <li><a href='/p/sitemap.html' title='Our Sitemap'>Sitemap</a></li>
     <li><a href='/p/kontak.html' title='Contact us'>Contact</a></li>
     <li><a href='/p/disclaimer' title='Disclaimer'>Disclaimer</a></li>
<li class='socialwrap pinterest'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest fa-fw'/></a></li>
<li class='socialwrap youtube'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-fw'/></a></li>
<li class='socialwrap rss'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-rss fa-fw'/></a></li>
<li class='socialwrap google'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-fw'/></a></li>
<li class='socialwrap twitter'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-fw'/></a></li>
<li class='socialwrap facebook'><a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-fw'/></a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav></div>


Salve e pronto.

.


EmoticonEmoticon

 

Start typing and press Enter to search