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
Kiss
Que legais!
ResponderExcluirEu gostaria de ver a preview do check it out!
Beijos//Fireflies Things
Obrigada. Ele está no antepenultimo gadget daqui do blog :D
ExcluirO menu é bem legal gostei, mais a ilustração é linda.
ResponderExcluirObrigada. Sobre a ilustração, sempre tento inovar :D
Excluirbelo tuto, gostei *3*
ResponderExcluirObrigada ^u^
ExcluirOs dois menus são lindos!^3^
ResponderExcluirBjs
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.
ResponderExcluirKuusou World
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 ♥
ExcluirAdorei os menus, muito lindos
ResponderExcluirCAT GIRL
Obrigada :D
ExcluirEu gostaria de like previews nos dois menus, mas ok, eu testo e vejo se fica bom *uu*
ResponderExcluirBeijos,
Juu-Chan do Nescau com Nutella.
Obirgada, mas eles são do layout daqui mesmo. O primeiro é do cabeçalho e o segundo é do antepenultimo gadget :D
ExcluirSuper o tutorial! amei, esse menu é mesmo lindo né?!
ResponderExcluirAdolescente Nerd
Aiwm, obrigada sua fofa, eu adoro esse menu, pois é muito simples e útil rsrs
Excluire igual o do Go Imagine
ResponderExcluirSim 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
ExcluirLegal o menu com a sombra, mas, uma sugestão: experimente colocar uma transição, deixaria o menu mais gostosinho de passar o mouse :3
ResponderExcluirbezzo, sarah
http://agd-doce.blogspot.com.br/
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