Como criar um Super Menu Drop Down no Blogger

Durante os últimos dois anos, o mundo da Blogosfera progrediu muito generosamente. Hoje em dia blogueiros e webmasters estão se concentrando mais em seus sites e estão projetando ao invés de focar apenas em seu conteúdo. Sem dúvida, ter um site bonito é a última tendência e faz com que até mesmo os visitantes admirem os blogs, que são altamente profissionais em termos de layout, cabeçalho , rodapé, menu, e etc. Portanto, ter uma navegação limpa e bem proximo do que se pode considerar "perfeita" são as necessidades básicas de todos e de cada blog. No entanto, a maioria dos blogs ainda estão usando menus de navegação antigos, o que mata a primeira impressão de um blog. Se a navegação do seu site não é boa, então, como você pode esperar que os seus visitantes venham a procurar algo em seu site? Hoje vamos aprender como criar um novo mega menu drop-down para blogs do Blogger.

Demonstração

Por quê usar um Menu Drop Down

A maior vantagem de ter um menu de navegação Mega Drop Down é que ele mantém tudo o que você precisa em um só lugar, para que os visitantes não tenham que gastar muito tempo em busca de uma categoria específica de seu interesse. Por outro lado, ele vai manter em seu blog um olhar limpo e elegante, pois a navegação completa o site e mantém as coisas no lugar.

Como o Mega Menu Drop Down se parece

Ao contrário de outros menus Dropdown, esse tem um design elegante, que irá combinar o seu site ou blog, pois você pode facilmente mudar de cor de acordo com suas necessidades desejados. É fino em tamanho por isso é bastante claro que ele pode facilmente se adaptar a qualquer site, sem qualquer problema. A animação seguinte representa um prévia do Menu.

Como criar um Mega Menu Drop Down no Blogger

Assim como nossos tutoriais anteriores, os passos são muito simples e mundo dificilmente levar 10 minutos para completar a integração. Basta seguir as seguintes instruções corretamente.

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

2° passo: Selecione Editar HTML →  Continuar.

3° passo: Agora, dentro da busca modelo para ]]> </ b: skin> e cole os seguintes códigos de folha de estilo:

/* MBL Mega Drop Down Menu Bar For Blogger (www.in4mal.blogspot.com) */ ul.dropmenu{ position: relative; margin: 0px; padding: 1px 0px 0px 0px; background:transparent url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0; display:block; height: 35px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size: 12px; } .dropmenu li{ position: relative; list-style: none; float: left; margin: 0px; padding: 0px; } .dropmenu li a{ height: 22px; padding: 9px 30px 0px 15px; display: block; cursor: point; border-right: solid 1px #4a779d; color: #FFFFFF; text-transform: uppercase; text-decoration: none; } .dropmenu li span{ display: block; float: right; height: 10px; width: 10px; background:transparent url(http://1.bp.blogspot.com/-0mKMqQrHeUo/UGck1O8Ip6I/AAAAAAAAFr4/KUFcGh_ZnRs/s1600/arrow_up.png) repeat-x scroll 0 0; position: absolute; top: 12px; right: 10px; } .dropmenu li a:hover span{ background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu li:hover ul, .dropmenu li:hover div{ display: block; } .dropmenu ul{ position: absolute; display: none; width: 140px; padding: 0px; margin: 0px; border-bottom: 1px solid #ccc; background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; } .dropmenu ul li{ border: 0; float: none; } .dropmenu ul a { border: 1px solid #ccc; border-bottom: 0; white-space: nowrap; display:block; color: #0657AD; text-decoration: underline; text-transform: none; } a.selected, a:hover{ color: #0657AD !important; background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; } a.selected span{ background:transparent url(http://1.bp.blogspot.com/-Em6wULHcShc/UGck0F2pikI/AAAAAAAAFr0/5ASpk3CSJRI/s1600/arrow_hover.png) repeat-x scroll 0 0; } .dropmenu ul a:hover { color:#F67A00 !important; text-decoration: none; background-color: #F0F0F0; background-image: none; } .dropmenu div ul{ position: relative; display: block; } .dropmenu li div{ background: #FFFFFF url(http://2.bp.blogspot.com/-o7fbBa3r5K0/UGck2fvSVyI/AAAAAAAAFsE/qrcuwfBBwXM/s1600/gradient.png) repeat-x scroll 0 0; border: 1px solid #ccc; padding: 5px; display: none; position: absolute; } .dropmenu li div ul{ border: none; background: none; position: relative !important; } .dropmenu li div a{ border: none; border-bottom: 1px solid #ccc; } .dropmenu li div div{ display: block; position: relative; background: none; border: none; } .dropmenu li div div a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .dropmenu li div div a:hover{ color: #000; text-decoration: none; } ul.left{ float: left; width: 145px; } ul.right{ float: right; width: 145px; } .small{ color: #666; font-size: 10px; padding: 10px 5px 8px 5px !important; display: block; clear: both; } .products{ width: 300px; padding: 15px !important; } .products ul{ width: 100%; } .products ul li{ border-bottom: 1px solid #ccc; height: 40px; padding: 10px 0px; } .products h2{ font-size: 16px; padding: 2px 0px 3px 0px; margin: 0px; } .products p{ color: #666; font-size: 10px; padding: 0px; margin: 0px; } .products img{ float: left; padding-right: 10px; } .products ul li a{ display: inline; border: none; color: #666; text-decoration: underline; padding: 0px; margin: 0px; text-transform: none; } .products ul li a:hover{ color: #000 !important; text-decoration: none; background: none !important; } .tutorials{ width: 300px; } input{ border:1px solid #4A779D; padding: 3px 8px; margin-bottom: 8px; width: 164px; } label{ padding: 0px 0px 4px 0px; display:block; } button{ background: #4A779D url(http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png) repeat-x scroll 0 0; color: #FFF; border:1px solid #4A779D; padding: 4px 10px; width: 180px; } .emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;} .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

4° passo: Novamente procure por </head> e ACIMA dele cole o seguinte código jQuery:

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script> <script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script> <script>$(document).ready(function(){ $("#nav-one").dropmenu(); }); </script>

Salve as alterações antes de prosseguir a instalação do menu.

Adicionando o Mega Menu Drop Down no Blogger

Agora com a pesquisa do template, procure pelo seguinte trecho no seu código. Lembre-se que não é necessário que você tenha exatamente o mesmo código, apenas que se pareça com o código original que procuramos. 

DICA: Para encontrar rapidamente o código, pesquise por "Header1" ou "(Header)".

<div id='header-wrapper'> <div class='headerleft'> <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Mundo Informal (Header)' type='Header'/></b:section> </div>

Depois de ter encontrado o código similar ao procurado, ABAIXO dela cole o seguinte código HTML do Mega Menu. 

<ul id="nav-one" class="dropmenu"><li> <a href="#">Home</a> </li><li> <a href="#">Forum</a><ul><li><a href="#">Support</a></li><li><a href="#">Help</a></li><li><a href="#">Examples</a></li><li><a href="#">Your work</a></li></ul></li><li> <a href="#item3">Downloads</a><ul><li><a href="#">Tools</a></li><li><a href="#">Office</a></li><li><a href="#">Custom projects</a></li></ul></li><li> <a href="#">Products</a> <div class="products"><ul><li><img src="http://4.bp.blogspot.com/-brA1qvvpyXg/UGcoWTlHWLI/AAAAAAAAFsw/jUSjTHOvh88/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li><li><img src="http://1.bp.blogspot.com/-vhdwdqNcO7g/UGcoXnXac1I/AAAAAAAAFs4/eo2_Cl4GaH8/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li><li><img src="http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li><li><img src="http://3.bp.blogspot.com/-cxh_yK0jF28/UGcoYxhlfuI/AAAAAAAAFtA/QjbZVFg70TM/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li><li><img src="http://4.bp.blogspot.com/-umDs7rKTFZQ/UGcocADb7ZI/AAAAAAAAFtQ/1dTOjPwJc0M/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li><li><img src="http://3.bp.blogspot.com/-AxTQpVFuxbs/UGcodrtWdqI/AAAAAAAAFtY/MA8K3gCE41w/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li><li><img src="http://2.bp.blogspot.com/-KFHxELM1ei0/UGcoeqDaqqI/AAAAAAAAFtc/2jLBgm53Ws0/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li></ul><div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div></div></li><li> <a href="#">Tutorials</a> <div class="tutorials"> <ul class="left"><li><a href="#">Javascript</a></li><li><a href="#">Python</a></li><li><a href="#">PHP</a></li></ul><ul class="right"><li><a href="#">HTML/CSS</a></li><li><a href="#">ASP.NET</a></li><li><a href="#">Actionscript</a></li></ul><div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div></div></li><li> <a href="#">Links</a> <ul><li><a href="#">Programming</a></li><li><a href="#">Inspiration</a></li><li><a href="#">My websites</a></li><li><a href="#">Clients</a></li><li><a href="#">Cool stuff</a></li><li><a href="#">Sitebase</a></li><li><a href="#">Other</a></li></ul></li><li> <a href="#">Subscribe Now</a> <div class="emailsub"> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MUNDOINFORMAL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></li></ul>

Personalização

Substitua MUNDOINFORMAL com o seu usuário RSS feed e e-mail.

Substitua todos os que estiverem com a cor rosa claro, Laranja claro, azul claro de acordo com suas necessidades.

Fonte: Mybloggerlab.com

Share This :