Guia completa da temporada
Janeiro até Março

Lista de animes


sample18
  JoJo's Bizarre Adventure: Parte 6 já está disponível (+)
profile-sample1
sample10
 Perfect Blue - Uma obra marcante e ... (Leia +)
profile-sample5

Menu simples Dropdown (com submenu)


Konnichiwa fadinhas e elfos! Como estão? Desculpe meu sumiço, ainda é pelo mesmo motivo, mas enfim, hoje resolvi trazer tutorial de html/css, como fazer um menu drop-down no blogger. Eu acho super útil e estou pensando seriamente em usar também. As vezes compartilhamos tantos temas nos nossos blogs e acaba não tendo espaço para adicionar tudo, mas com um menu assim fica super mais simples, eaí quer ver como faz? Let's go?
Menu:

Ele fica como esse menu acima. 
Para colocar ele no seu blog, você vai precisar ir em layout, adicionar um gadget javascript/html e nele colar o seguinte código:

<!--Start Navigation --> 
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK1">HOME</a></li> 
<li><a href="LINK2">CATEGORIA</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORIA-1</a></li>
<li><a href='LINK4'>SUB-CATEGORIA-2</a></li>
</ul>
</li>
<li><a href="">CATEGORIA</a></li>
</ul>
</div>   
<!--End Navigation -->

Aonde estão nomeados ''Link'' adicione o link da sua categoria/tag . A primeira CATEGORIA , é a que está com submenus, então coloque o link de submenu em SUB-CATEGORIA-1 E SUB-CATEGORIA-2 , você pode adicionar mais se quiser, ou até mesmo mudar a ordem.
Lembrando que <li> são os links principais e o <ul> é sublinks .

Agora vamos personaliza-lo!
Vá em tema , editar html e procure por /b:skin , após encontra-lo cole acima dele o seguinte código:

/* Estilo do primeiro link do menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}
/* Estilo da barra de navegação geral */
.tabs-inner .widget ul {
background: #F8E6E0;
border: none;
text-align: center;
}
/* Estilo dos links individual*/
.tabs-inner .widget li a {
font: 12px Arvo;
border: none;
color: #ffffff;
}
/* Estilo dos links com hover */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #F8E6E0;
background-color: #ffffff;
text-decoration: none;
}
#navigationbar {
width: 100%; /* alterar a largura da barra de navegação */
height: 35px; /* alterar a altura da barra de navegação */
}
#navigationcss { 
margin: 0 auto;
padding: 0; 
}
#navigationcss ul { 
float: none; 
list-style: none; 
margin: 0; 
padding: 0; 
overflow: visible; 
}
#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #000; /* alterar a cor dos links principais */
display: block;
margin: 0;
padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}
#navigationcss li a:hover, #navigationcss li a:active {
color: #F8E6E0 ; /* altere a cor dos links quando está com mouse encima*/
margin: 0;
padding: 10px 30px; /* Certifique-se de que estes sejam os mesmos que a seção acima! */
}
#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #F8E6E0;  /* altere a cor de fundo da caixa suspensa */
width: 150px;
color: #000000; /* altere a cor dos links suspensos */
float: none;
margin: 0;
padding: 7px 10px; /* semelhante ao acima, altere o espaçamento em torno dos links */
}
#navigationcss li li a:hover, #navigationcss li li a:active {
background: #F8E6E0 ; /*altere a cor de fundo dos itens suspensos no hover*/
color: #fff; /* altere a cor dos links suspensos no hover */
padding: 7px 10px;  /*mantenha o mesmo que a seção acima */
}
#navigationcss li {
float: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 
}
#navigationcss li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 150px; 
margin: 0;
padding: 0;
}
#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 
left: auto; 

Você pode alterar tudo que quiser, está tudo explicado no proprio css para ajudar vocês.
Caso queira alterar as cores você vai precisar trocar por Hexadecimal (#'s) , para saber as cores , recomendo consultar esse site aqui Códigos de cores HTML INFO . E prontinho! Qualquer dúvida é só deixar nos comentários ok?

Resultado de imagem para gif witch anime

OFF: Viram que o blog está de aparência nova? Halloween chegandoo! Resolvi voltar com layouts temáticos, o que acharam? Falta terminar algumas coisinhas ainda hehe, e vou responder todos amanhã, fique de olho!

Por hoje é só, espero que tenham gostado do post! Me segue lá no instagram, as vezes posto stories x'D
Terá postagem toda segunda, quarta e sexta! Então segue o bloguinho e visite sempre! Até mais, Kissus! 

11 comentários:

  1. Adorei a dica! Sempre vejo esse tipo de menu mas nem fazia ideia de como fazer... obrigada! O layout de Halloween ficou uma fofura <3

    Beijinhos
    tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou! <3 Sei como é, quando quiser colocar é só dar uma passadinha aqui agr hehe. Sério? *-* Obrigadaaa! <3 ~Kissus

      Excluir
  2. OMG!! Adoro o visual novo do blog <3 Está mesmo lindo!! *AmooHalloween*
    Obrigada por mais um tuto muito bem explicado e super util para nós <3

    beijinhos
    Rafaela Borges || KnightLand ❤

    ResponderExcluir
    Respostas
    1. Sério? Tá bem laranja kk' fico feliz que gostou! Também amo Halloween *0*
      DE nada, adoro ajudar <3 Kissus e obrigada pela visita!

      Excluir
  3. Oi Juju tudo bem? Espero que sim! Uoou o clima do blog já está em clima de halloween? Olha vou ser sincera eu gosto de terror mas tenho medinho de halloween. Sabe eu deixei de lado o instagram, não fosse por isso eu te seguia. Gosto da ideia de layouts temáticos. Agora falando do menu né, ficou lindo o menu. Também acho que seja útil para organizar o blog e tal. Beijinhos!
    Snack Cheese Fomos para Marte 👽 ~☆v i s i t e - n o s☆

    ResponderExcluir
    Respostas
    1. Oii, +/- mas to indo né kk
      Sim! Aaah mas são tão legais as temáticas de halloween <3 Acho que você falou, fez um do blog e apagou né? Tudo bem Iza ^.^ Awwn que bom que gostou e acha útil! Obrigada! E amei o layout novo do SC <3 KIssus

      Excluir
  4. O meu não tá dando certo
    https://i.imgur.com/EoHJKTw.png

    ResponderExcluir
  5. Respostas
    1. Esse não é feito para ficar fixo no topo, mas você consegue, só pesquisar por ''fixar qualquer elemento com css''

      Excluir
  6. Olá como faço para ter um layout no estilo do seu?

    ResponderExcluir
    Respostas
    1. Oláa, o meu foi muito modificado, mas se tiver interesse, entre em contato por esse whatsapp: (21)97678-2447
      Eu aceito encomendas de layout e posso criar/personalizar para você!

      Excluir

Tecnologia do Blogger.