Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) como deixar meu site com aquela barrinha do google?

Exiled

Perguntado por Exiled,

 Share

Pergunta

11 respostass a esta questão

Posts Recomendados

  • 0
Matheus Matos

Matheus Matos

Postado
Postado

Como deixar com aquela do google ou quer uma igual?

Se quer exatamente a do google, precisa utilizar php com file_get_contents() e terás que observar outras coisas.

Agora, se quer uma parecida, é mole.

<ul class="navegacao">
  <li><a href="http://www.google.com.br">Web</a></li>
  <li><a href="http://images.google.com.br">Imagens</a></li>
  <li><a href="http://video.google.com.br/">Vídeos</a></li>
</ul>
No css: 
.navegacao {display: inline;}
.navegacao li {margin-right: 10px;}

Abraços

Link para o comentário
Compartilhar em outros sites
  • 0
Exiled

Exiled

Postado
  • Autor
Postado

é parecido, quando a pessoa bota resolução 1080p no google aquela barrinha de cima continua tomando o horizontal inteiro, é isso q eu quero fazer.

.navegacao {display: inline;}

.navegacao li {margin-right: 10px;}

n consegui botar esse codigo

Link para o comentário
Compartilhar em outros sites
  • 0
Matheus Matos

Matheus Matos

Postado
Postado

Bem, continua simples.

No seu HTML, deve ter uma div chamada navegação. Vejamos:

<html>
   <head>
       <title>Título do seu site</title>
       <link rel="stylesheet" type="text/css" href="estilo.css" />
   </head>
   <body>
       <div id="navegacao">
           <ul class="esquerda">
                <li><a href="http://www.google.com.br">Web</a></li>
                <li><a href="http://images.google.com.br">Imagens</a></li>
                <li><a href="http://videos.google.com.br">Vídeos</a></li>
           </ul>
           <ul class="direita">
                <li><a href="http://www.igoogle.com.br">iGoogle</a></li>
                <li><a href="http://www.google.com.br/preferences">Configurações</a></li>
                <li><a href="http://www.google.com.br/accounts">Fazer lLogin</a></li>
           </ul>
       </div><!-- Fim da Navegação-->
</body>
</html>
O arquivo estilo.css será seu estilo e de acordo com a linkagem, tem que estar no mesmo diretório. CSS: 
#navegacao {
position: absolute;
top: 0px; left: 0px;
width: 100%; height: 25px;
border-bottom: blue 1pt solid;
}

#navegacao .esquerda {float: left;}
#navegacao .esquerda ul li {
display: inline;
margin-right: 10px;
}

#navegacao .direita {
position: absolute;
top: 0px; right: 0px;
}

#navegacao .esquerda ul {float: right;}
#navegacao .esquerda ul li {
display: inline;
margin-right: 10px;
}

Testa aí agora, abraços!

Link para o comentário
Compartilhar em outros sites
  • 0
Matheus Matos

Matheus Matos

Postado
Postado (editado)

Pronto, me empolguei resolvi fazer a parada quase toda logo.

Ficou legal.

Olha só, coloquei o css anexado. Código:

<html>
   <head>
       <title>Título do seu site</title>
            <style type="text/css">
                * {
                  margin: 0px; padding: 0px;
                  font-family: Arial;
                  font-size: 13px;
                  outline: none;
                }
                #navegacao a {color: #0000cc;}
                #navegacao {
                  position: absolute;
                  top: 0px; left: 0px;
                  width: 100%; height: 25px;
                  border-bottom: #c9d7f1 1pt solid;
                }

                #navegacao .esquerda {
                  position: absolute;
                  left: 5px;  top: 5px; height: 15px;
                  float: left;
                }
                
                #navegacao .esquerda span {margin-left: 5px; position: relative;}
                #navegacao .esquerda span strong {
                  position: absolute;
                  top: 6px; left: 28px;
                  width: 14px; height: 7px;
                  color: transparent;
                  background: url(seta.jpg) no-repeat right -7px;
                }
                
                #navegacao .direita {
                  position: absolute;
                  right: 10px;  top: 5px; height: 15px;
                  float: left;
                }
                
                #navegacao .direita span {
                  margin-left: 2px; 
                }
                
                #navegacao #mais {
                  position: absolute;
                  top: 25px; left: 340px;
                  width: 100px;
                  border: #3366cc 1pt solid;
                  border-left: #c9d7f1 1pt solid;
                  border-top: none;
                  display: none;
                }
                
                #navegacao #mais a {text-decoration: none;}
                #navegacao #mais .separador {
                  height: 1pt;
                  border-top: #c9d7f1 1px solid;
                  margin: 5px 0px 5px 10px;
                  width: 80px; 
                }
                #navegacao #mais span {
                  float: left;
                  position: relative;
                  width: 100px; height: 20px;
                }
                
                #navegacao #mais span a {
                  position: absolute;
                  padding: 2px 0px 2px 10px;
                  width: 90px;
                }
                
                #navegacao #mais span a:hover {background: #3366cc; color: #FFFFFF;}

            </style>
   </head>
   <body>
       <div id="navegacao">
            <div id="mais">
                <span><a href="http://books.google.com.br">Livros</a></span>
                <span><a href="http://translate.google.com.br">Tradutor</a></span>
                <span><a href="http://blogsearch.google.com.br">Blogs</a></span>
                <span class="separador"></span>
                <span><a href="http://www.youtube.com.br">Youtube</a></span>
                <span><a href="http://www.google.com/calendar">Agenda</a></span>
                <span><a href="http://picasaweb.google.com.br">Fotos</a></span>
                <span><a href="http://docs.google.com">Docs</a></span>
                <span><a href="http://www.google.com.br/reader">Reader</a></span>
                <span><a href="http://sites.google.com">Sites</a></span>
                <span><a href="http://groups.google.com.br">Grupos</a></span>
                <span class="separador"></span>
                <span><a href="http://www.google.com.br/intl/pt-BR/options/">e muito mais &raquo;</a></span>
            </div>
           <div class="esquerda">
                <span><b>Web</b></span>
                <span><a href="http://images.google.com.br">Imagens</a></span>
                <span><a href="http://videos.google.com.br">Vídeos</a></span>
                <span><a href="http://maps.google.com.br">Mapas</a></span>
                <span><a href="http://news.google.com.br">Notícias</a></span>
                <span><a href="http://www.orkut.com.br">Orkut</a></span>
                <span><a href="http://mail.google.com">Gmail</a></span>
                <span><strong id="seta"></strong>
                &lt;script type="text/javascript">
                function mostrar() {
                 if (document.getElementById('mais').style.display == 'none') {
                   document.getElementById('mais').style.display = 'block';
                   document.getElementById('seta').style.background = ' url(seta.jpg) no-repeat right 0px';
                  }else {
                   document.getElementById('mais').style.display = 'none';
                   document.getElementById('seta').style.background = ' url(seta.jpg) no-repeat right -7px';
                  }
                }
                </script>
                <a href="java script:void(0);" onclick="mostrar();">mais</a></span>
           </div>
           <div class="direita">
                <span><a href="http://www.igoogle.com.br">iGoogle</a></span>
                <span><a href="http://www.google.com.br/preferences">Configurações</a></span>
                <span><a href="http://www.google.com.br/accounts">Fazer Login</a></span>
           </div>
       </div><!-- Fim da Navegação-->
</body>
</html>

Agora é só criar um arquivo .html, e salvar essa imagem no mesmo diretório do html.

Veja aí e fala o que achou!

Não ficou um código muito limpo, mais pelo tempo que eu tinha foi o que deu pra fazer.

Abraços

Editado por Matheus Matos
Link para o comentário
Compartilhar em outros sites
  • 0
Matheus Matos

Matheus Matos

Postado
Postado

o problema foi que o fórum separou o javascript.

Procure no código onde tem &lt;script type="text/javascript"> e coloque um < (sinal de menor) no lugar do &lt; ..

depois procure onde tem <a href="java script:void(0);" e junte as palavras java e script.

Não adianta eu juntar porque o fórum vai separar novamente.

Se não conseguiu, baixe o arquivo e a imagem aqui.

Abraços

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...