Boa tarde, pessoal. Desculpe, pela falta de post, nesses dias.Estava com o teclado do meu Computador quebrado e tive que troca-lo. Minhas aulas começam amanhã, e estou sem muito tempo para ficar postando,aqui. Se perceberem que estou sem postar, é culpa da minha escola. Talvez só poste 1 ou 2 vezes por semana. Bom, não estou aqui para falar da minha vida, e sim sobre o post de hoje. Trouxe para vocês um tutorial de como colocar um menu no lugar da navbar.
Créditos: Sim senhorita
Vá em ]]></b:skin> e acima cole o seguinte código:
Salve. Por enquanto não aparecerá nada. Clique em "expandir modelos de widget". Localize <body expr:class='"loading" + data:blog.mobileClass'> e logo abaixo coloque o seguinte código:
#NavbarMenu {
width: 100%;
height: 30px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 0;
background-color: #000000;
}
#NavbarMenuleft {
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 270px;
font-size: 12px;
float: right;
margin: 0;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 12px;
font-family: Trebuchet MS, Arial;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
color: #fff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #0D0D0D;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF;
font-size: 12px;
font-family: Trebuchet MS, Arial;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
background-color: #0D0D0D;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF;
padding: 7px 10px;
background-color: #0D0D0D;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;height: auto;
width: 170px;
margin: 0;padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
Clique em visualizar veja se apareceu, e se sim, vá editando as páginas. Gente, eu não sei direito o que tem que colocar nos lugares pois o tutorial não fui eu que fiz.<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li> <a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a> <ul> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li> </ul> </li> <li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 2</a> <ul> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.1</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.2</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.3</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.4</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.5</a></li> </ul> </li> <li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 3</a> <ul> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.1</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.2</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.3</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.4</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.5</a></li> </ul> </li> <li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 4</a> <ul> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.1</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.2</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.3</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.4</a></li> <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.5</a></li> </ul> </li> </ul> </div> </div> <div style='clear:both;'/>
Se você quiser tirar a navbar, procure por ]]></b:skin> e coloque acima o seguinte código:
#navbar-iframe { height:0px; visibility:hidden; display:none }Espero que tenham gostado. Beijos.
acheo que vou tentar por no meu blog! rsrs, vou por os créditos obvio bjs ;*
ResponderExcluirjuventudedamoda-br.blogspot.com.br
Ps: você tirou meu blog dos afiliados? Pq? :// bjs ;*
ResponderExcluirhttp://juventudedamoda-br.blogspot.com.br
Nossa deve ficar lindo irei usar em um de meus lays consertesa *-*
ResponderExcluirO seu nov lay fico lindo!!1 bjus
Gente, eu estou começando com o meu blog agora, e queria muito que vocês me ajudassem ^-^ basta seguir e comentar, me ajudem? por favorzinho ?! *-*
ResponderExcluirhttp://reinadodasotomeskawaiis.blogspot.com.br/
Otimo tuto *--*
ResponderExcluirPortal Encantado
Flor,irei lhe tirar dos afiliados se você não comentar lá no mínimo três vezes no mês!Estão nas regras,e você não está as comprindo '~'
ResponderExcluirAdorei o tutorial,é ótimo!Só não uso,pois a minha navbar é boa,tenho preguiça de ir no layout,então com a navbar fica mais fácil ^3^
Beijos-ChilliLovers123.Blogspot.Com ♥
Flor Atualizei lá no blog com vídeo, tem selo pra você lá, beijos http://meninascapricho-dada.blogspot.com.br/2013/03/video-selo.html
ResponderExcluirameei essa dica
ResponderExcluirsegue? http://papodabru.blogspot.com.br/ - sigo todos de volta ! bj ;
Adorei o Blog! Já estou seguindo!Segue de volta por favor?
ResponderExcluirBeijos
http://foreveryoungeer.blogspot.com.br/
Oi ta tendo uma campanha em vários blogs chamada diga não ao preconceito, queria saber se você quer participar, é só ver esse post (http://juventudedamoda-br.blogspot.com.br/2013/03/diga-nao-ao-preconceito.html) e responder as mesmas perguntas aqui no seu blog ^~^ beijos Fernanda
ResponderExcluirOlá não deu certo ficou tudo preto e sumiu varias coisas, e agora?
ResponderExcluirBjs.
Eu adorei o blog :33 Esse tutorial foi super útil, tava louca atrás de um menu assim.
ResponderExcluirE pra quem tá confuso sobre a parte do #NavbarMenu {, é puro css, deem uma lida e se vocês tem um inglês por mínima coisa que seja já vão sacar tudo :3 Mas eu fiz isso, se alguém quiser pegar.
#NavbarMenuleft {
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 270px;
font-size: 12px;
float: right;
margin: 0;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /* cor do link que você já clicou alguma vez */
display: block;
font-size: 12px;
font-family: Trebuchet MS, Arial;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
color: #fff; /* cor do link que você acabou de clicar */
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #0D0D0D;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF;
font-size: 12px;
font-family: Trebuchet MS, Arial;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
background-color: #0D0D0D;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /* cor hover do link que você acabou de clicar */
padding: 7px 10px;
background-color: #0D0D0D;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;height: auto;
width: 170px;
margin: 0;padding: 0;
}
eu só coloquei o básico mas as propriedades básicas pra vocês entenderem melhor (aquilo que suponho que seja o básico que todos querem mudar):
font-family: é a fonte do menu
font-size: tamanho da fonte
font-weight: se trata do espaço entre as letras
text-transform: tranformar todas as letras de uma forma
ex: text-transform: lowercase; > letras todas em minúsculo. O oposto de lowercase seria uppercase (e caso você não queira nem upper nem lower, apague toda a linha text-tranform)
background-color: cor do fundo
lembrando que cada abertura de chave
ex: #nav li a:hover, #nav li a:active {
se trata de uma parte do menu, no exemplo acima nós estaríamos mexendo na aprte do menu em relação aos links ativos (por ex: você clicou em 'faq' e agora está naquela página, o link fica de outra cor) e nos hovers
só pra quem não sabia : > achei que seria legal dar uma ajudada
Desculpe mas, esse tutorial foi uma bosta ♥ Eu não gostei, mas seu blog é lindo :33
ResponderExcluirNossa fiquei encantada com seu blog! me ajuda rsrs
ResponderExcluireu quero deixar um espaço personalizado na parte de cima do meu blog assim como o seu mas nao sei como!!! me jauda?!