Menu Drop down para blog

Unknown 14:08 blog , Drop down , Gadget , menu 4 comentários

Menu Drop down

Ter um menu no blog é essencial para facilitar a navegação entre páginas, posts, e aplicativos, assim como divulgar serviços e facilitar a indexação dos links do seu blog.

E nada melhor do que inserir um menu Drop down moderno em seu blog.

Encontramos este menu na web e resolvemos republicar aqui no BG, ensinando passo a passo, para inseri-lo e configurá-lo em seu blog.

Tutorial - Menu drop down

Pode-se colocar o menu Drop down em qualquer área no blog. Porém, vamos mostrar duas áreas, em seu blog, para inseri-lo.

Primeiro, vamos ensinar a inserir o código de css que vai determinar e estilo do menu:

Vá em modelo, editar html e aperte ctrl+f Procure pela tag ]]></b: skin> e acima dela, cole o código abaixo:

/*  MBL Mega Drop Down Menu Bar For Blogger (www.bloggerenciado.blogspot.com) */ ul.dropmenu{  position: relative;  margin: 0px;  padding: 1px 0px 0px 0px;  background:transparent url(http://4.bp.blogspot.com/_SNYy_9P-Cxc/TLflEEcmZgI/AAAAAAAAAXE/MDP-18Q_QwY/S45/FUNDO%2BPRETO.jpg) 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; }  .tutoriais{  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;}

Ainda dentro da caixa de código do Blogger, procure pela tag </head> e acima dela, cole o código abaixo:

Continuando dentro do sua caixa de códigos html, procure pela tag
<div id='header'> (abaixo desta tag, o menu ficará embaixo do cabeçalho). Caso queira o menu no topo do blog, coloque o código logo abaixo da tag </head>

Copie este código:

<ul class='dropmenu' id='nav-one'>
<li>      <a href='http://bloggerenciado.blogspot.com.br/'>inicio</a> </li>
<li>      <a href='#'>CONTATO</a><ul>
<li><a href='http://bloggerenciado.blogspot.com.br/p/blog-page.html'>CONTATO</a></li>
</ul>
</li>
<li>      <a href='#item3'>BAIXAR</a><ul>
<li><a href='http://bloggerenciado.blogspot.com.br/p/templates.html'>TEMPLATE</a></li>
</ul>
</li>
<li>      <a href='#item3'>LINKS UTEIS</a><ul>
<li><a href='http://bloggerenciado.blogspot.com.br/2013/04/links-uteis-para-voce.html'>LINKS IMPORTANTES</a></li>
</ul>
</li>
<li>   <a href='#'>DICAS PARA BLOGUEIROS</a>   <div class='products'>
<ul>
<li><img alt='Thumb' border='0' height='40' src='http://www.bcb.gov.br/gifs/cifraog2.gif' width='40'/><h2>
</h2>
<p>
<a href='http://bloggerenciado.blogspot.com.br/p/o-que-cpc-cpa-cpm.html'>O QUE É AFILIADO POR CPC CPM CPA E CPL</a></p>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://digital-in.com.br/wp-content/uploads/2012/07/83_contato_fale_home1.jpg' width='40'/><h2>
</h2>
<p>
<a href='http://bloggerenciado.blogspot.com.br/p/como-criar-um-formulario-para-contato.html'>CRIAR UM FORMULARIO PARA CONTATO</a></p>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://ganhardinheiroagora.com/blog/wp-content/uploads/2011/09/programa-afiliados.jpg' width='40'/><h2>
</h2>
<p>
<a href='http://bloggerenciado.blogspot.com.br/p/melhor-afilido-para-iniciante-na.html'>MELHORES AFILIADOS PARA INICIANTES</a></p>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://www.sabertudo.net/wp-content/uploads/2011/08/Image-afiliados.jpg' width='40'/><h2>
</h2>
<p>
<a href='http://bloggerenciado.blogspot.com.br/p/lista-de-afiliado.html'>LISTA DE AFILIADOS</a></p>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://4.bp.blogspot.com/_LaA5vhQoC2k/SXtl1rAYTyI/AAAAAAAABA4/3K-0YzwPUOs/s320/blogger_logo-758360.png' width='40'/><h2>
</h2>
<p>
<a href='http://bloggerenciado.blogspot.com.br/p/melhores-gad.html'>MELHORES GADGETS PARA INICIAR O BLOG</a></p>
</li>
<li><img alt='Thumb' border='0' height='40' src='http://1.bp.blogspot.com/-OAzBVT6q0T8/TpIq3VX8YnI/AAAAAAAAAAQ/IX99-ZKw0ac/s400/qualidade.jpg' width='40'/><h2>
</h2>
<p>
<a href='http://bloggerenciado.blogspot.com.br/p/principais-caracteri.html'>QUALIDADE NO BLOG</a></p>
</li>
</ul>
</div>
</li>
<li>    <a href='#'>Tutoriais</a>   <div class='tutoriais'>
 <ul class='left'>
<li><a href='http://bloggerenciado.blogspot.com.br/p/editando-ou-inserindo-um-menu.html'>menu do blog</a></li>
<li><a href='http://bloggerenciado.blogspot.com.br/2013/04/como-criar-uma-caixa-de-feed-para-blog.html'>caixa de feed</a></li>
<li><a href='http://bloggerenciado.blogspot.com.br/2013/04/criando-sua-caixa-link-me-divulgando.html'>caixa link-me</a></li>
</ul>
<ul class='right'>
<li><a href='http://bloggerenciado.blogspot.com.br/2013/04/configurar-o-uservoice-crie-um-canal-de.html'>canal de comunicação</a></li>
<li><a href='http://bloggerenciado.blogspot.com.br/2013/04/criar-gadgets-de-artigos-relacionados.html'>artigos relacionados</a></li>
<li><a href='http://bloggerenciado.blogspot.com.br/2013/04/como-criar-uma-caixa-de-rede-social.html'>Gadget de rede social</a></li>
</ul>
<center>
<p>
para mais tutorias pesqueise em nosso blog</p>
</center>
</div>
</li>
<li>    <a href='#'>SOBRE NÓS</a> <ul>
<li><a href='http://bloggerenciado.blogspot.com.br/p/quem-somos.html'>QUEM SOMOS</a></li>
<li><a href='http://bloggerenciado.blogspot.com.br/p/politica-de-privacidade.html'>P. DE PRIVACIDADE</a></li>
<li><a href='http://bloggerenciado.blogspot.com.br/p/parceiros.html'>PARCEIROS</a></li>
</ul>
</li>
<li>    <a href='#'>INSCREVA-SE JÁ</a>   <div class='emailsub'>
        <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feeds.feedburner.com/Bloggerenciado', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'>
<p>
ASSINE NOSSO FEED</p>
<img alt='Feed' height='60' src='http://png-4.findicons.com/files/icons/808/on_stage/128/rss_2.png' title='Feed' width='60'/> <p>
<input name='email' style='width:140px' type='text'/></p>
<input name='uri' type='hidden' value='Bloggerenciado'/><input name='loc' type='hidden' value='pt_BR'/><input type='submit' value='Assinar'/> <div style='text-align: center;'>
<small>Gadget by <a href='http://feedburner.google.com/'>Feed Burner</a> modificado por <a href='http://bloggerenciado.blogspot.com.br/'>bloggerenciado</a></small></div>
</form>
</div>
</li>
</ul>

Substitua o endereço do Feed do Blog Gerenciado pelo seu na caixa de Feed do menu.

Siga o modelo abaixo:

onsubmit='window.open('http://feeds.feedburner.com/Bloggerenciado', 'popupwindow',

Agora, entenda a edição dos links no menu Drop down:

Esta etapa é para configurar os nomes e endereços das páginas.

Veja o modelo abaixo:

<li><a href="#">início</a></li>

Vermelho: Endereço para o qual o leitor será redirecionado ao clicar.

Azul: Descrição do link.

Agora entenda a alteração das imagens no menu Drop down:

Veja o esquema abaixo:

<li><img alt='Thumb' border='0' height='40' src='#' width='40'/>

Azul: refere-se a altura e largura da imagens no menu

Vermelho: refere-se ao endereço da imagem que será inserida. Altere todas as áreas dentro do menu com as tags similares.

O que achou? Comente!

4 comentários :

Unknown19/08/2013, 17:14
oi este é o meu blog e eu nao estou conseguindo colocar o menu drop pode me ajudar -->> http://tudosobretudo-quevcquersaber.blogspot.com.br/
ResponderExcluir
Respostas
Consagra Jovem07/03/2014, 21:31
Querido não estou conseguindo localizar a primeira coisa q vc pede para nós localizarmos o que faço?
ResponderExcluir
Respostas
Zélia Dantas17/03/2014, 16:55
Olá tudo bem?
Estou precisando retirar o fundo gradiente azulado do topo do blog. Játentei remover o código: background: transparent $(body.background.gradient) repeat-x scroll top center; mas não deu certo. Tentei colocar none na frente e nada. Nas definições do blog identifiquei que é uma imagem:value="url(//www.blogblog.com/1kt/ethereal/bird-2toned-blue-fade.png) Você tem como me ajudar?
Sempre grata
Zélia Dantas
ResponderExcluir
Respostas
Anônimo18/08/2014, 11:01
ola,eu sou um leigo em html e outros bichos parecidos e sei que como eu tem muitos e pra aprender alguma coisa só com ajuda de verdadeiros webmasters,uma pergunta:quais os requisitos para copiar um artigo seu?to tentando incrementar um blog
ResponderExcluir
Respostas

Adicionar comentário

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.

Assinar: Postar comentários ( Atom )

Menu Drop down para blog

Menu Drop down

Tutorial - Menu drop down

4 comentários :

Conheça nossos serviços

Cadastre seu email e receba novidades

Pesquise no Google

Quem está no blog agora

Visitantes do blog

Andrew Silva