Menu - Composto Teenage Plus

Demorou mas chegou! Esse menu é muito prático, foi muito difícil e complicado de ser feito... Mas mesmo assim, eu construí um tutorial e se tornou fácil de ser instalado no seu blog!

Para colocar o menu abaixo no seu blog

Basta criar um gadget HTML/Javascript,
contendo o enorme código abaixo alterando conforme o seu perfil.

<center> <style> /*---- Inicio da Barra ----*/ .barra{ width:100%; /*--- Comprimento (não precisa mexer) ---*/ height:63px; /*--- Altura (não precisa mexer) ---*/ margin:0 auto !important; /*--- Centralizar a Barra ---*/ display:block; position:fixed; /*--- Deixar fixo ---*/ top:0;left:0; right:0 !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYzbx6sLRfPxlFQJdvME9keo3oOOsqJ8T_c62IZ4dq08ig5bhAkAq1IWP9v2Gzb9jCzSF_kWyjMlhmguYHwPrjku1aMTfckVVx9JrTmRo_S5GceFUN4CB6qVgYcr-7zgG3IrOR3TNJoic/s1600/Menu+fixo.png); /*--- Fundo da Barra ---*/ } .barra li{ list-style:none; } /*--- Menu de Links ---*/ .barra-links{ padding: 15px; /*--- Margem externa ---*/ text-shadow:0 1px #FFCC99; /*--- Sombra do texto ---*/ font-size:18px; /*--- Tamanho da Fonte ---*/} /*--- Logotipo ---*/ .logo{ position:absolute; width:214px; /*--- Largura da imagem ---*/ height:55px; /*--- Altura da imagem ---*/ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_uIiB5THUh7o0mz6TG_AShXQi61z49DT3gR4peOKKBNsox_VZThazL4kzcV_ap9HKFz-Jk__jwUPl1QEy-pr3mJjc_UW8BzkUxjhChazmEK8uwgxKf_ohne3_0l9QF_td1HyOXM2bY0/s1600/Logo.png)no-repeat; /*--- Imagem ---*/ margin-left:-10px; /*--- Movimentação a esquerda ---*/ margin-top:-10px; /*--- Movimentação a cima ---*/ } /*--- Menu Deslizante ---*/ .botão-deslizante-1 { position:absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYXjQBkUwRd1Ajyg6jTAaMcHE7Vd7L5lJFoRfxeUlpT4idivlDeJmj1ExmzwNOfEF7aHcvZEWxdcWA8nzLmyZ7EEF5nQnLV_N9lvuuNUMh4aQLHsgOSac_4w9ZCYl1KF5Q6zrG6T4B94/s1600/Menu+Deslizante+bot%C3%A3o+01.png)center bottom; /*--- Imagem 1 ---*/ width:106px; /*--- Largura da imagem ---*/ height:40px; /*--- Altura da imagem ---*/ top:50px; /*--- Movimentação a cima ---*/ right:0; /*--- Movimentação a direita ---*/ -webkit-transition: 0.4s ease-out; /*--- Valores de Transição ---*/ -moz-transition: 0.4s ease-out; transition: 0.4s ease-out; } .botão-deslizante-1:hover { height:107px; /*--- Altura da imagem com o mouse em cima ---*/ } .botão-deslizante-2 { position:absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVzdpvYNdx440ez0FE-7ns3gxF5OFC8kf2eg8SKeDcASeZkbQddBS_FmVavWpGhJjAtufbbK4IxvNK9RDWuCy90Fzhvp03PQS0TC1v1O9l42mWpnLlOtekhII4x1XXOze73klAbEi3f9g/s1600/Menu+Deslizante+bot%C3%A3o+02.png)center bottom; /*--- Imagem 1 ---*/ width:106px; /*--- Largura da imagem ---*/ height:40px; /*--- Altura da imagem ---*/ top:50px; /*--- Movimentação a cima ---*/ right:100px; /*--- Movimentação a direita ---*/ -webkit-transition: 0.4s ease-out; /*--- Valores de Transição ---*/ -moz-transition: 0.4s ease-out; transition: 0.4s ease-out; } .botão-deslizante-2:hover { height:107px; /*--- Altura da imagem com o mouse em cima ---*/ } /*--- Caixa de Pesquisa ---*/ .busca{ width:270px; height:50px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoBvk_3IJlgLsVj2rRdZ60IFATNNY2zDaPNTiNnInJBAakMjtG2285rjFPhdKg4AS4EvuSQg9Za5BxplygSIugV7TGR_2iicY3JzoJmqsabhiJ5h0J-KNzPk9ygb14f2PwM6XSTg1wJaw/s1600/Menu+fixo+busca.png); background-repeat:no-repeat; float:right; } .search{ margin-left:-10px; margin-top:0px; float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */ font-family: Tahoma, Tahoma; /* Fonte */ } .searchbar{ height: 25px; width: 210px; margin-top:9px; background: none; border: 0; color: #8F8F8F; } .searchbut{ display:block; background:none; width:42px; height:36px; float:right; margin-top:-31px; margin-left:4px; border: 0; } </style> <!---- Caixa de Pesquisa ----!> <div class='barra'> <ul> <li class='busca'><form action="/search" class="search" method="get"> <input class="searchbar" id="s" name="q" type="text" value="Procurando?" /> <input class="searchbut" type="submit" value="" /> </form> </li> <!---- Menu deslizante ----!> <a href="BOTÃODESLIZANTE1"> <li class='botão-deslizante-1'></li> </a> <a href="BOTÃODESLIZANTE2"> <li class='botão-deslizante-2'></li> </a> <!---- Logotipo ----!> <a href="LINKDOBLOG"> <li class='logo'></li> </a> <!---- Menu de Links ----!> <div class="barra-links"> <a href="LINKAQUI" style="margin-left:225px;">Link01</a> | <a href="LINKAQUI">Link01</a> | <a href="LINKAQUI">Link01</a> | <a href="LINKAQUI">Link01</a> | <a href="LINKAQUI">Link01</a> | </div> </ul> </div> <div class='clear'/> </div> <!----Fim da Barra----!> </center>
não coloque titulo e arraste para o final da sidebar .
--
Para o logotipo, use uma imagem de  214 de largura e 55 de altura. Materiais Backgrounds para a Barra:

Estilos para Caixa de Busca:

          

 Imagens para o Menu Deslizante:

   

Espero que fique tudo claro! C: Obrigado por ler!