Barra de funções no topo do blog

 

Hello friends ♥
Como vocês estão? Eu estou muito contente e triste ao mesmo tempo, o que obviamente não vem ao caso dessa postagem. Queria avisar também que estou muito feliz com o resultado das postadoras, e vejo que o blog anda mais atualizado. Espero que a Soshi possa voltar logo a postar, mas enquanto isso vou postar no lugar dela até ela voltar. Estou feliz com a nossa seleção que fez por merecer, mas tinha que ser contra a Espanha ? :'( e me encheu de orgulho ao dar a volta por cima.
Então, me pediram na ask faz dias de como colocar a barrinha de funções no topo do blog, que pra quem não sabe, é essa que temos aqui no blog, que parece uma cortininha.
Bom, vamos ao tutorial?
Créditos pelo tuto: {www}

Vá no seu editor de html, e procure pela tag <b:skin>, e cole depois dela:

#navtop {

background:#df005a; /* -- Cor de Fundo -- */
height: 35px; /* -- Altura -- */
width: 100%; /* -- Largura: Todo o Painel -- */
margin: 0 auto 24px auto; /* -- Margem -- */
font-family: Arial;  /* -- Fonte -- */
text-decoration:none; /* -- Decoração do Link: Nenhuma -- */
font-weight: bold; /* -- Negrito -- */
color:#fffff; /* -- Cor da Fonte -- */
font-size: 12px; /* -- Tamanho da Fonte -- */
z-index:2000; /* -- Não Altere -- */
position:fixed; /* -- Não Altere -- */
top:0; /* -- Não Altere -- */
left:0;  /* -- Não Altere -- */
}
.nav {
width: 950px; /* -- Tamanho da Área Onde Fica a Barra -- */
margin: auto;
}
#navtop img {
margin-left:30px; /* -- Margem Esquerda da Imagem -- */
display: inline; /* -- Não Altere -- */
float:left; /* -- Não Altere -- */
margin-top: -7px; /* -- Margem do Topo -- */
}
#navtop img a {
margin: 12px; /* -- Não Altere -- */
display: inline; /* -- Não Altere -- */
}
#jumpMenu2 {
display: inline; /* -- Não Altere -- */
margin-top: -4px; /* -- Margem do Topo -- */
margin-left: 8px; /* -- Margem Esquerda -- */
}
#jumpMenu2form {
line-height:25px; /* -- Não Altere -- */
float:right; /* -- Não Altere -- */
margin: 0px; /* -- Não Altere -- */
padding: 0px; /* -- Não Altere -- */
}
ul.navtop {
padding: 0px; /* -- Não Altere -- */
}



ul.navtop li {
list-style: none; /* -- Não Altere -- */
display: inline;/* -- Não Altere -- */
}
ul.navtop li a {
color: #ffffff; /* -- Cor do Link Normal -- */
display: block; /* -- Não Altere -- */
float: left; /* -- Não Altere -- */
margin-right: 3px; /* -- Não Altere -- */
text-decoration: none; /* -- Não Altere -- */
}
ul.navtop li a {
color: #ffffff; /* -- Cor do Link Normal -- */
display: block; /* -- Não Altere -- */
float: left; /* -- Não Altere -- */
padding-left: 7px; /* -- Não Altere -- */
margin-right: 3px; /* -- Não Altere -- */
text-decoration: none; /* -- Decoração do Link: Nenhuma -- */
}
ul.navtop li a:hover {
color: #fff5b4; /* -- Cor do Link com o Mouse em Cima -- */
text-decoration: none;  /* -- Decoração do Link: Nenhuma -- */
}
ul.navtop li ul {
float:left; /* -- Não Altere -- */
margin:0; /* -- Não Altere -- */
padding:0; /* -- Não Altere -- */
}
.search{
line-height:25px; /* -- Não Altere -- */
float:right; /* -- Não Altere -- */
font-family: arial; /* -- Fonte -- */
display: inline; /* -- Não Altere -- */
margin-top: -6px; /* -- Margem do Topo -- */
}
.searchbar{
height: 20px; /* -- Altura da Barra -- */
width: 140px; /* -- Largura da Barra -- */
color: #ff0066; /* -- Cor da Fonte -- */
background: #FFF; /* -- Cor de Fundo da Barrinha -- */
border: none; /* -- Não Altere -- */
}
.searchbut{
width:75px; /* -- Largura do Botão -- */
height:21px; /* -- Altura do Botão -- */
border: 0; /* -- Não Altere -- */
background: #8B2252; /* -- Fundo do Botão -- */
color: #fff; /* -- Cor da Fonte do Botão -- */
font-weight: bold; /* -- Negrito -- */
}
Nesses códigos, você irá personalizar ela, tipo, os menus, as cores, a barra de pesquisa, o tamanho, etc. Agora, vamos adicionar outro código para que ele apareça.
Procure pela tag <head>, e cole acima dela:

<div id='navtop'>

<div class='nav'>
<div id='navtop-img'>
<a href='URL_DO_BLOG_AQUI'><img src='URL_DA_IMAGEM_AQUI'/></a>
</div>
<ul class='navtop'>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
<li><a href='LINK_AQUI'>Nome Aqui</a></li>
</ul>
<select id='jumpMenu2' name='jumpMenu2' onchange='window.open(this.value)' 
style='font-size:10px;'>
<option>Outros Categorias (Seu Blog)</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
<option value='LINK_AQUI'>Nome Aqui</option>
</select>
<form action='/search' class='search' method='get'>
<input class='searchbar' id='s' name='q' type='text' value=''/>
<input class='searchbut' type='submit' value='Pesquise'/>
</form>
</div>
</div>

E aí, gostaram? Eu acho que essa barrinha dá um toque de profissionalismo no blog, e além da simplicidade, é de fácil navegação.
Kiss, em breve vou fazer um joguinho de divulgação, só vou atender os pedidos :)

30 comentários:

  1. Esse tuto é realmente óoooooootimo, adoro ele ><'

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Obrigadaa, peguei do seu blog ahuehue >u<

      Excluir
  2. aaain, vou usar no meu proximo laay kkk , floor, houve um problema com a primeira prova da gincana de férias, então eu resolvi fazer novamente com os comentarios moderados, espero que participe, beijoos!! http://smile-andlove.blogspot.com.br/2013/07/gincana-de-ferias-prova-1-repeteco.html

    ResponderExcluir
  3. Gostei muito desse tutorial,bem útil!!

    ResponderExcluir
  4. Muito bom o tutorial, tudo muito bem explicado, mais você sabe dá minha dificuldade né rsrsrs. Fica bem a vista e ao mesmo tempo deixa o blog organizado.

    http://mundodeliina.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigadaa, não que isso, tenho certeza que com o tempo você consegue :D

      Excluir
  5. adorei o tutu.
    Participe do sorteio que ta rolando no blog !!
    www.mymomentsz.blogspot.com

    ResponderExcluir
  6. Adorei o post Mandi-chan, eu tava precisando *o*
    -kissus-

    ResponderExcluir
  7. Acredite acho que todos aqui, estão satisfeitos com elas, eu mesmo amei elas! Parecem ser legais. Eu também fiquei contente com a seleção, mesmo não gostando de futebol. Sobre o tutorial, eu achei ele bem fácil de se fazer, acho que é impossível de errar, ainda mais que explicou tudo! Enfim, beijos é até um próximo post.

    - Prince Otaku

    ResponderExcluir
    Respostas
    1. Anw, valeu, elas são ótimas :D A seleção me surpreendeu bastante Domingo, muito mesmo. E obrigada, fico feliz por gostar do tuto :D

      Excluir
  8. O menu no topo fica bem sofisticado mas geralmente todos tem usado então fica pra um futuro bem próximo. bezzo, sarah
    http://agd-doce.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É mesmo, sério? Até agora os que eu vi usando são só o meu e o NCN kkk :D

      Excluir
  9. Adorei o tuto!

    Beeijo,
    Gabi

    http://girlswithstyles.blogspot.com.br
    Sigo todas de volta lá hein?

    ResponderExcluir
  10. Ah Mandi, essa barrinha é tão fofa! ^^ Tenho certeza que no meu próximo layout (que já está pra sair) vou usar ela.

    Beijos, Annie
    >>> nerdsfly.#blogspot.com.br <<<
    (Retire o jogo da velha (#), caso venha me fazer uma visitinha *U*)

    ResponderExcluir
    Respostas
    1. Aahnwt, obrigada. Opa, quero ver o seu layout novo hein?

      Excluir
  11. Oi...
    Adorei o seu blog e já estou seguindo...
    Faça uma visita no meu blog, ele é novo e todos os dias tem novidades!!! Se gostar, siga também!

    Espero sua visitinha!

    Bjos
    Andreza

    http://blogdremattos.blogspot.com.br/

    ResponderExcluir
  12. Tuto útil.
    E sim tinha que ser contra a Espanha.
    sorvete-de-limao.blogspot.com

    ResponderExcluir
  13. Oii, estou fazendo um novo lay para o meu blog e barrinha tá linda, mas no meu a parte das opções fica em baixo.

    thingsofmilly.blogspot.com

    ResponderExcluir
  14. Esse tuto é beeeem útil!
    sorvete-de-limao.blogspot.com

    ResponderExcluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ