Como adicionar um menu suspenso no Blogger (sem Javascript!)

Os menus suspensos podem ajudar a organizar e categorizar links do seu conteúdo. Enquanto muitos webmasters debatem entre si sobre essas boas ou más práticas, não há dúvida de que eles podem ajuda-lo no seu projeto, caso você tenha um blog cheio de conteúdo. Se o seu blog contém uma grande quantidade de informações e você está interessado em categorizar seus links um pouco melhor, um menu suspenso pode ser a solução! Uma vez que o Blogger não oferece a opção de adicionar automaticamente um menu suspenso como o WordPress, então teremos que fazer o nosso próprio. Isso requer um pouco de conhecimento em CSS e HTML, mas vou orientá-los através deste tutorial para que não lhes pareça tão difícil como você ta pensando, certo! 

O menu que eu coloquei é construído inteiramente com CSS3 e HTML. Nenhum Javascript aqui, por isso é agradável, leve e fácil de configurar. Você pode ver uma demonstração aqui . 

Para começar, você precisará encaminhar-se para a página Layout no painel do Blogger e adicionar um gadget HTML / Javascript na área do topo/cabeçalho : 
Adicione o código abaixo ao seu novo widget, personalizando os títulos e os links correspondentes ao seu blog:

<Ul id = "menuofs">
  <Li> <a href="#"> Home </a> </ li>
  <Li> <a href="#"> Sobre </a> </ li>
  <Li> 
    Tópicos 
    <ul> 
      <li> <a href="#"> Estilo de vida </a> </ li> 
      <li> <a href="#"> Tutoriais </a> </ li> 
      <li> <a href="#"> Arte e design </a> </ li> 
    </ ul> 
  </ li>
  <Li> <a href="#"> Portfólio </a> </ li>
  <Li> <a href="#"> Contato </a> </ li>
</ Ul>

Aqui está o exemplo deste menu:

Você precisará substituir os caractere # com os links reais de suas páginas, e os títulos do menu correspondentes as páginas de sua preferencia. O texto que está em VERMELHO mostra um título de menu ("Tópicos") com três itens de sub-menu que aparecem quando você rola sobre ele.

Agora, você deseja exibir a página Modelo> Personalizar do Blogger e desloque-se para Avançado> CSS. Adicione o seguinte código para dar esse menu algum estilo:

.tabs-inner .widget ul#menuofs {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#menuofs li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Fonte do menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* Cor do background do menu*/
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#menuofs li a {
padding:0;
font-family: sans-serif; /* Fonte dos links do menu */
border:0;
}
.tabs-inner .widget ul#menuofs li:hover {
  background: #555; /* Cor do background  em estado hover */
  color: #fff; /* Cor da fonte em estado hover*/ 
}
.tabs-inner .widget ul#menuofs li:hover a {
  background: transparent;
  color: #fff; /* Cor do titulo do menu em estado hob */ 
}
.tabs-inner .widget ul#menuofs li ul {
  z-index:1000; 
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#menuofs li ul li { 
  background: #555; /* cor do background dos submenus */
  display: block; 
  color: #fff; /* Cor da fonte dos submenus */
  text-shadow: 0 -1px 0 #000;
}
ul#menuofs li ul li a{
  color:#fff  /* Cor do link dos submenus*/
}
.tabs-inner .widget ul#menufs li ul li:hover { 
  background: #666; /*Cor do background dos submenus em estado hover*/
}
.tabs-inner .widget ul#menuofs li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Você pode mudar as cores quando quiser e se você quiser centralizar o seu menu, basta adicionar: <center> antes do código HTML no gadget que você adicionou e </center> no final dele.

Se este post ajudou você, então compartilhe. Até a próxima!