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 :)
Esse tuto é realmente óoooooootimo, adoro ele ><'
ResponderExcluirBeijos,
Juu-Chan do Nescau com Nutella.
Obrigadaa, peguei do seu blog ahuehue >u<
Excluiraaain, 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
ResponderExcluirkkk obrigada. Tá, vou lá de novo
ExcluirGostei muito desse tutorial,bem útil!!
ResponderExcluirObrigadaa...Anônimo :P
ExcluirMuito 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.
ResponderExcluirhttp://mundodeliina.blogspot.com.br/
Obrigadaa, não que isso, tenho certeza que com o tempo você consegue :D
Excluiradorei o tutu.
ResponderExcluirParticipe do sorteio que ta rolando no blog !!
www.mymomentsz.blogspot.com
Obrigada, vou lá agora mesmo.
ExcluirAdorei o post Mandi-chan, eu tava precisando *o*
ResponderExcluir-kissus-
Obrigadaa \o/
ExcluirAcredite 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.
ResponderExcluir- Prince Otaku
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
ExcluirAdorei o tuto! <3
ResponderExcluirBeijos!
Bonjour, Une Glacée ♥
O menu no topo fica bem sofisticado mas geralmente todos tem usado então fica pra um futuro bem próximo. bezzo, sarah
ResponderExcluirhttp://agd-doce.blogspot.com.br/
É mesmo, sério? Até agora os que eu vi usando são só o meu e o NCN kkk :D
ExcluirAdorei o tuto!
ResponderExcluirBeeijo,
Gabi
http://girlswithstyles.blogspot.com.br
Sigo todas de volta lá hein?
Obrigada, vou dar uma olha lá
ExcluirAh Mandi, essa barrinha é tão fofa! ^^ Tenho certeza que no meu próximo layout (que já está pra sair) vou usar ela.
ResponderExcluirBeijos, Annie
>>> nerdsfly.#blogspot.com.br <<<
(Retire o jogo da velha (#), caso venha me fazer uma visitinha *U*)
Aahnwt, obrigada. Opa, quero ver o seu layout novo hein?
ExcluirAnwt, valeu, sigo sim sua fofa ♥
ResponderExcluirTuto útil.
ResponderExcluirE sim tinha que ser contra a Espanha.
sorvete-de-limao.blogspot.com
Obrigada. Tinha não u.u
ExcluirOii, estou fazendo um novo lay para o meu blog e barrinha tá linda, mas no meu a parte das opções fica em baixo.
ResponderExcluirthingsofmilly.blogspot.com
Vou lá ver em que posso ajudar :)
ExcluirEsse tuto é beeeem útil!
ResponderExcluirsorvete-de-limao.blogspot.com