• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

28 de julho de 2013

Botões: Atualizar, topo & voltar no blog

- Não consigo conter a emoção de ter 953 seguidores, obrigada super's ! >.<'~
Olá fofos de lindos *--*
Estou trabalhando em um novo layout para blog, dessa vez não iremos fugir das cores rosa e azul '-' again? mais teremos outra cor junto, uma bem bonitinha que nunca usamos em nossos layouts, falta pouco para terminar o layout, só o banner õ/
 - Nossa leitora Lili (www) pediu pelos comentários para que eu ou a Hannah postássemos como fazer esses três botões para subir ao topo, atualizar a página ou voltar a página:

Desculpem pelas poucas palavras, mais é porque quero acabar o post logo, hehe já são 23:24 e eu postando, só eu, viciada sei como é bom postar aqui haha.

Para começar, cole acima de ]]></b:skin>:
#jfooter {
text-align: center;
}
#jfooter a {
padding: 2px 4px 2px 4px;
margin: 0 1px 0 1px;
}
#jfooter a:link, #jfooter a:visited, #jfooter a:active {
color: #b5ca9b;
background-color: #dbe6cf;
font-family: 'Century Gothic', verdana, sans-serif;
border-bottom: 1px solid #b5ca9b;
border-right: 1px solid #a2bd82;
font-size: 12px;
}
#jfooter a:hover {
background-color: #dbe6cf;
border-bottom: 1px solid #c8d8b5;
border-right: 1px solid #c8d8b5;
}
Depois cole em um HTML / Javascript:
<div id="jfooter">
<a href="javascript:history.go(-1)" title="Voltar">Voltar</a> <a href="#" title="Topo">Topo</a> <a href="javascript: window.location.reload()" title="Atualizar">Atualizar</a>
</div>
Prontinho, troque as partes em negrito se quiser trocar o nome dos botões e as partes em roxo para trocar a frase que fica no tooltip, ou seja, quando você passa o mouse sobre o botão.
Beijos gente! espero que tenham gostado do tutorial ^--^~

6 comentários:

  1. Obrigada, vou usa-lo com certeza^-^
    Beijinhos!

    ResponderExcluir
  2. AAAAAH MEGAN SUA DIVONICA *-*
    Adorei esse estilo iri usar com certeza :3

    XOXO
    jovenclube.blogspot.com.br

    ResponderExcluir
  3. Oi,adorei seu blog e as dicas.
    Coloquei no meu blog.
    Obrigada,valeu!!1

    ResponderExcluir
  4. Obrigadaaa!
    Vou usar COM CERTEZA!
    Pftooo!
    http://seaboatscene.blogspot.com.br/

    ResponderExcluir
  5. Deu certo mais qualquer atualização que eu faça no blog o codio java script some da sidbar...como corrigir isso??queria muito

    ResponderExcluir