Menu flash shadow + menu check it out

Hooy gostaram da nova ilustração? Estou tentando fazer algo original rsrs.
Então, pela primeira, na minha ask teve 2 pedidos de uma vez ^u^. Ambos são sobre menu. Um é o menu flash down (aquele do cabeçalho que eu inventei,) e o outro é o menu check it out do tumblr, mas que eu adaptei para o blogger. Vamos conferir?


Menu flash shadow(aquele do cabeçalho)

Vá no seu editor de html e procure por */ Tabs.
Vai estar mais ou menos assim no seu html:
/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}
.tabs-inner .section {
  margin: 0;
}
.tabs-inner .widget ul {
  padding: 0;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
  border: none;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: 1em 1.5em;
  color: $(tabs.text.color);
  font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
  color: $(tabs.selected.text.color);
}
Susbtitua todo esse código (inclusive o /* Tabs) e cole:

/* Menu flash shadow feito pelo blog With You
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: -32px; /*para subir ou descer o menu troque o número*/
margin-left: 140px; /*para afastar o menu para esquerda ou direita troque o número*/
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
}
.tabs-inner .widget li {
border: none;
}
/*Estado normal do menu*/
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #939292; /*cor da fonte*/
font-family:'Economica';
font-size: 35px;
padding: 12px;
background: transparent; /*cor do fundo normal*/
margin-left: 8px; /*espaço entre os botões*/
}
/*Estado hover e selecionado*/
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: transparent; /*cor do fundo hover/selecionado*/
color: #6fa48c; /*cor da fonte*/
padding: 12px; /*espaçamento interno*/
text-shadow:10px 10px 10px #bababa; -webkit-transition-duration:.1s; -webkit-transition-duration:.6s ;
Então, você vai modificando as cores e a posição de acordo com a sua preferência.
Não precisa adicionar nenhum gadget, pois esse é o menu baseado no seu menu básico. Mas tem um detalhe, suas páginas do seu menu tem de estar visíveis, e na posição horizontal. Pronto, seu menu está pronto.

Menu check it out

É um menu muito bom para as tags, ou destaques. Vá no seu editor de html, e cole depois de <b:skin>:

 /* Menu check it out */ 
.desq {display: inline-block;}
.desq a {background: url(http://static.tumblr.com/23ogsyz/mOomi4rxf/taged2.png)no-repeat left center #eee; width: 240px; padding: 3px; padding-left: 17px; border-radius: 4px; color: #afafaf; font-size: 10px; font-family: 'Scada'; text-transform: uppercase; text-shadow: 1px 1px 1px #fff; border-bottom: 1px solid #d9d9d9; float: left; margin: 1px; -webkit-transition-duration: 0.9s; text-decoration: none;}
.desq a:hover {color: #d07484; background: url(http://static.tumblr.com/23ogsyz/TDmmi4rx5/taged.png)no-repeat left #eebfc7; border-bottom: 1px solid #de9ba7}
 /* fonte personalizada muchhelp */
@font-face {font-family: Scada; src: url('http://themes.googleusercontent.com/static/fonts/scada/v1/uIa9-L3o-vNXk-UyBI3PSw.woff')}
Depois, adicione um gadget HtmlJavaScript e cole:

<div class="desq">
<a href="SEU LINK">ESCREVA AQUI SOBRE</a>
</div>
Salve. Gostaram dos menus? Quero agradecer para quem pediu >u<
Kiss

20 comentários:

  1. Que legais!
    Eu gostaria de ver a preview do check it out!

    Beijos//Fireflies Things

    ResponderExcluir
    Respostas
    1. Obrigada. Ele está no antepenultimo gadget daqui do blog :D

      Excluir
  2. O menu é bem legal gostei, mais a ilustração é linda.

    ResponderExcluir
    Respostas
    1. Obrigada. Sobre a ilustração, sempre tento inovar :D

      Excluir
  3. Yo, Mandi-chan, gostei bastante da nova ilustração, é acho que conseguiu passar o que quis, ou seja, a originalidade! Sobre os menus, ambos são bonitos, é acho que vou usar o Check It Out, no meu próximo layout, pois ele é lindo! Kisus.

    Kuusou World

    ResponderExcluir
    Respostas
    1. Anwt, obrigada seu fofo. Eu estou tentando inovar mais as ilustrações de post, para não ficarem aquela mesmice de sempre. E obrigada por gostar dos menus, são fofinhos mesmos ♥

      Excluir
  4. Adorei os menus, muito lindos
    CAT GIRL

    ResponderExcluir
  5. Eu gostaria de like previews nos dois menus, mas ok, eu testo e vejo se fica bom *uu*

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. Obirgada, mas eles são do layout daqui mesmo. O primeiro é do cabeçalho e o segundo é do antepenultimo gadget :D

      Excluir
  6. Super o tutorial! amei, esse menu é mesmo lindo né?!

    Adolescente Nerd

    ResponderExcluir
    Respostas
    1. Aiwm, obrigada sua fofa, eu adoro esse menu, pois é muito simples e útil rsrs

      Excluir
  7. e igual o do Go Imagine

    ResponderExcluir
    Respostas
    1. Sim e não. O do Go imagines é um pouco diferente. Eu já sabia desse tuto antes dela publicar no blog dela. Ele também pode ser colocado pela folha de estilos, mas é mais complicado :d Obrigada por comentar, Anônimo, fico feliz que pessoas anonimas também visitem o blog ashuashua

      Excluir
  8. Legal o menu com a sombra, mas, uma sugestão: experimente colocar uma transição, deixaria o menu mais gostosinho de passar o mouse :3
    bezzo, sarah
    http://agd-doce.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada. Bom, eu estava mesmo pensando em colocar uma transição, ou um rotate, mas eu queria mesmo algo bem simples mesmo. No próximo lay, acho que vou usar imagens ;) obrigada pela sugestão!

      Excluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ