12 de set de 2011

Bordas diferentes no menu

Tumblr_lmzcv39rt81qdep2ao1_500_large

  Como todos sabem, e usam, eu disponibilizo um menu simples para vocês editarem. E ele tem bordas arredondadas, hoje vou ensinar vocês a deixar apenas algumas 'pontas' do menu arredondadas. Primeiramente você irá entrar neste site, que é super-hiper-mega útil. Nele é possível você arredondar o box model (caixa de modelo) para que pegue o código e utilize depois. Primeiramente, você põe um número qualquer para por as bordas (no caso, eu coloquei 15), assim que você digita 15 em um dos quadradinhos em um dos cantos em todo o resto também fica com este valor. Mais você consegue alterá-los e por um numero diferente em cada um. Clique no link abaixo para ler o resto do tutorial.

Veja alguns exemplos, e entenda melhor:

Clique para ampliar as imagens.
Seguindo os passos dos prints, vocês agora deverão abusar da criatividade e aproveitar dos números (estou tola hoje kkk), assim que terminar copie todo o código que estará na caixa central. Certamente, você estará com o código das bordas no seu CTRL+V. Guarde ele no bloco de notas. Agora, iremos copiar o código do menu, copie e cole o código ACIMA da tag ]]></b:skin>
/*** MENU SIMPLES extras-placefame.tk ***/
.menusimples {
background-color:#f8f8f8; /*** cor do fundo ***/
float:left;
text-shadow: 1px 1px 0 #E4E4E4; /*** cor da sombra da letra ***/
color:#707070; /*** cor da fonte ***/
font-variant:small-caps;
width:150px; /*** largura da aba ***/
font-size: 10pt; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menusimples:hover {
background-color:#FF99CC; /*** cor do fundo ***/
float:left;
color: #fff; /*** cor da fonte ***/
text-shadow: 1px 1px 0 #acacac; /*** cor da sombra da letra ***/
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
  As partes destacadas de azul, são as bordas arredondadas que já vem no menu. Agora vá até o bloco de notas, e copie novamente o código. Substitua as partes azuis pelo que está no seu CTRL+V, e salve. Agora instale (Design > Elementos de página > Adicionar um gadget > HTML/Javascript) e copie e cole o código abaixo: 
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
Salve! Enfim, você também pode usar para por em qualquer outra situação. Como por exemplo aqui no Extras, o quadro de postagem. Perceberam? É isso por hoje pessoal! Desculpe a demora, espero que gostem. Comentem. Beijos, Emily.

24 comentários:

  1. Melhor faço siim 100 melhor quer ver? Fazereei um template imediatamente para ver quem é a sem creatividade aki , e nao cupio nada voce que é chata fika atormentando a vida dos outros. mim esquece. Toma vergonha na cara!

    ResponderExcluir
  2. Poois é, Invejosa é vooce, PQP(PHUTA QUE PARIU)
    Vooce vive mim atormentando MENINA VOCE NAO SABE LER?

    MIM ESQUECE.

    ResponderExcluir
    Respostas
    1. Kkkk invejosa ela? Imagina, ela é muito mais melhor do que você! Ela é minha diva, esse blog é perfeito, diferente do seu que não merece nem ter nem um seguidor, sabe o por que? "Extras true-luvr Place." exclui o seu blog, pois ele é uma vergonha para os mundo dos blogger, e você veio aqui para que? Pra xingar? Se você quer xingar, não é melhor só clicar no "X" lá na tela? Fala sério, você é muito perua, a Emily é perfeita, ensina coisas, o design é perfeito, o blog, tudo! Kkkk e to achando que ela já te esqueceu, pois a Emily esquece das pessoas que são bruxas, e ve se esquece dela ok? Aew, agora que me lembrei, que você não vai esquecer dela, pois você tem inveja, né bebe?
      Emily, não ligue para pessoas que nem ela ok? Você é muito melhor, seu blog está cada vez mais melhor, parabéns (:

      Excluir
    2. FIA, PRA VIR AQUI BRIGAR, APRENDE PORTUGUÊS ANTES OKAY?

      Excluir
    3. Essa Extras true não sei das quantas não sabe nem escrever e quer arrumar brigas com outros! QUERIDA! "MIM" Não conjuga verbo!

      Excluir
  3. adorei o tutorial... aprendi bastante.
    beijos
    boa semana.

    ResponderExcluir
  4. Bloog de quinta é o seu e olha que nem no de quinta o seu chegaah.

    ResponderExcluir
  5. Minha queridinha eu nao tenho muitos seguidores pq eu maus começei meu bloog, espera uns 3 meses para voce ver vai tar melhor que o seu! agr eu tbm nao vou ficar perdendo meu tempo tenho coisa melhor pra fazer bye!

    ResponderExcluir
  6. estou lendo o blog pra aprender mais sobre html! acho que corrigir as pessoas não é só pra professoras pq se eu não falar ninguém mais fala entende? e eu fico pensando que a pessoa pode escrever errado em uma redação e talvez ir mal no vestibular e.. enfim, exagero mesmo, foi mal :/

    ResponderExcluir
  7. Adorei o tutorial.Muito útil!
    Emily,você poderia fazer um tuto explicando como colocar essas imagens ao lado das postagens?
    Obrigada!

    ResponderExcluir
  8. Oi Emily, mil desculpas por ter as pegado, foi provisoriamente, enquanto não termino as minhas.. mas não se preocupe, provavelmente será até amanhã, e dei os devidos créditos :)

    Beijos, Carol - The Fashion Wonderland.
    www.conselhosdostardoll.blogspot.com

    ResponderExcluir
  9. Emily, eu tou com problemas...

    olha esta imagem:

    http://img855.imageshack.us/img855/6553/capturadetela20110914s2.png




    pinkpimenta.blogspot.com

    ResponderExcluir
  10. Oláá Flor, queria perguntar como você fez para colocar os marcadores com uma imagem !!
    Ficaria Grata se explicasse atravez de um Tutorial ?? Você faz

    Beijinhos
    chicretiililas.blogspot.com

    ResponderExcluir
  11. Completei a meta de 250 seguidores, então, vim te perguntar: aceita afiliação?

    Beijos, Carol.
    www.conselhosdostardoll.blogspot.com

    ResponderExcluir
  12. Obrigada por aceitar, o link da imagem é esse aqui: http://3.bp.blogspot.com/-OnFL2ZnEs7U/TnTDS4e603I/AAAAAAAACn4/38OfG-7Fsyk/s1600/af6.jpg

    Me manda sua ou quer que eu escolha?

    Beijos, Carol.
    www.conselhosdostardoll.blogspot.com

    ResponderExcluir
  13. Gostei muito e até já mudei o meu menu.
    Visita?
    girlteen-s2.blogspot.com

    ResponderExcluir
  14. E como faz para mudar no quadro de postagem?

    ResponderExcluir
  15. oiiiiiiiiii tem selinho pra voce http://s2mundodaisa.blogspot.com/p/selos.html

    ResponderExcluir
  16. Olh, só respondendo o comentário da Ingrid Gonzales: Ingrid, isso também já aconteceu comigo, mas é porque o modelo é assim mesmo, não tem jeito. Para retirar, é só trocar o modelo que você escolha do template Travel pelo segundo modelo e ir nesse tutorial para personalizar:
    http://s2meh.blogspot.com/2011/05/big-tutorial-criando-um-blog-fofo.html

    Ok?
    Beijos,
    Ana Lola

    http://s2cb.blogspot.com

    ResponderExcluir
  17. Gosteeeiii, ótimo!!!
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  18. Nossa, o tutorial foi perfeito! Todos os tutoriais eram dificeis demais ou eu não achava o code. Muito obrigada :)
    to superhipermega agradecida :D

    ResponderExcluir
  19. amei o tutorial me ajudou bastante eu não achava, em nenhum lugar um tutorial perfeito assim ,parabéns

    ResponderExcluir
  20. Gostei e Aprovei Visita Meu Blog! Por que esse é de MAAAAIS

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.