Links de navegação personalizados

Olá, bombons. Queria pedir desculpa pela ausência, ocorreu um problema na escola e eu tive que resolver o mais rápido possível. Vocês já sabem como é escola, quando você pensa que se livra de tudo aparece mais alguma coisa para você fazer. Enfim, me pediram o tutorial da navegação personalizada, porém como todos que acompanham meu blog há um tempo, já sabem que eu havia postado o tutorial, mas resolvi excluir por conta de alguns bugs que ocorreram. Termine de ler.

1- Vá no modelo do seu blog e procure por ]]></b:skin> e acima do resultado cole o seguinte código:

@font-face {
font-family: "silkscreen";
src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');
}
#blog-pager a {
background-color: #cor de fundo;
color: #cor da fonte!important;
text-transform: uppercase;
font-family: Arial;
text-align: center;
font-size: 12px;
color: #cor da fonte de novo;
text-shadow: 1px 1px 0px #fff;
box-shadow: inset 0 0 15px transparent;
text-shadow: transparent 0px 1px 1px;
box-shadow: 2px 2px 0px transparent;
padding: 5px 5px 5px 5px;
border-radius: 3px;
-webkit-transition-duration: .50s;
}
Pra quem não quer ficar escolhendo cor, eu resolvi deixar o código de um modelo pronto, quem quiser usar use a vontade.
#blog-pager a {
background-color: #fff;
outline-offset: -0px;
color: #dfddee!important;
text-transform: uppercase;
font-family: Arial;
text-align: center;
font-size: 12px;
color: #bababa;
text-shadow: 1px 1px 0px #fff;
outline: 1px solid #fff;
border: 1px solid #fff;
box-shadow: inset 0 0 15px transparent;
text-shadow: transparent 0px 1px 1px;
box-shadow: 2px 2px 0px transparent;
padding: 5px 5px 5px 5px;
border-radius: 0px;
-webkit-transition-duration: .50s;
}
FONTE ALTERADA PARA ARIAL POR CONTA DE ERROS COM A OUTRA. 

14 comentários:

  1. Esses modelos estão tão cutes amei <3
     Beijos || Brigadeiro Vintage & Fairy Of Html

    ResponderExcluir
  2. O modelo realmente é bem bonito , talvez eu use!

    Beijos http://c-quente.blogspot.com.br

    ResponderExcluir
  3. Adorei o tutorial, já estou até usando no meu layout.
    Beijinhos,
    Acalentar || Wanderlustsx. blogspot . com xoxo

    ResponderExcluir
  4. Eu acho super fofo esses modelinhos de navegação, principalmente esse tá um amor gente.

    Beijos <3
    p-perfectsthings.blogspot.com.br

    ResponderExcluir
  5. Tá desculpada ashuas' É bem simples personalizar os links de navegação haha' O modelo ficou bem fofo *u*

    Diamond Resources

    ResponderExcluir
  6. Imagino, tem coisas que impede nós de postar no blog >< enfim, o modelo está lindo, mds. Talvez use no layout free que estou fazendo ^-^

    Shaw~
    html-always.blogspot.com ♥

    ResponderExcluir
  7. Aike bonitinho, adorei o tutorial. É desse jeito na escola, quando vc pensa que acabou, sempre tem mais ¬

    below average ✌

    ResponderExcluir