sábado, 16 de abril de 2011

Botão "Topo da página" Com efeito

Botão Ir para o topoJá foi postado aqui no cblogger um botão semelhante a este - Veja o post – mas o que vou ensinar agora, é um outro tipo de botão com efeito muito bacana. Como falei no outro post, este botão se torna útil para páginas extensas, e o botão permite facilitar a navegação do usuário, que ao chegar ao fim de uma página, o usuária apenas clica no botão e vai até o começo dela novamente com um efeito de rolagem até o topo.
Para instalar no seu blog, vá em “Design” – “EditarHTML” e procure por:
]]></b:skin>
Acima dessa tag cole o seguinte código CSS:
#toTop {
width:110px;  /* Largura do botão * /
background: #FF0000; /* Cor do botão*/
border:1px solid #000; /* Cor da borda */
text-align:center; /* Alinhamento do texto */
padding:5px; /* Distancia entre texto e borda */
position:fixed; /* Posição que faz com que ele corra por toda a página*/
bottom:5px;
right:5px;
cursor:pointer;
color:#555; /* Cor da letra */
background:#fff; /* Cor da letra */
text-decoration:none;
font-weight:700;  /* Tamanho da letra */
-moz-border-radius:5px;  /* Definições para o angulo do botão */
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
Agora procure por:
</body>
Acima dessa tag cole esse outro código.
<a href='#' id='toTop'><span class='Apple-style-span' style='font-family: Arial, Helvetica, sans-serif;'>&#9650; Ir para Topo</span></a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    /*-----------------------
    * jQuery Plugin: Scroll to Top
    * by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
    *
    * Copyright (c) 2009 Ph.Creative Ltd.
    * Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling.
    * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
    *
    * Version: 1.0, 12/03/2009
    -----------------------*/
    $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
      $(function() {
                    $(&quot;#toTop&quot;).scrollToTop();
                });
            </script>
Depois salve e pronto!

Testado no Google Chrome 

Marcadores: , , ,

Criando um rodapé para seu blog

Criando um rodapé para seu  blog

Acho difícil um template pronto que não tenha um rodapé, mas se você foi “privilegiado” com isso, vou ensinar como colocar um rodapé simples no seu blog, até por que, um bom template não pode faltar um rodapé para colocar algumas informações, como por exemplo, “Proibida qualquer cópia sem autorização ©” , “Tecnologia do Blogger” , “Template criado por…” e entre outras informações que ficam ao seu critério. Mais adiante ensinarei como colocar colunas no rodapé para a inserção de Gadgets/widgets.

Para colocar o rodapé no seu template, faça o seguinte:

1. Clique na aba “Design” – “Editar HTML”.

2. Em seguida dê um CTRL + F e procure por:

</body>

3. Acima dessa linha cole o seguinte código:

<center><div id='rodape'>
Aqui você pode colocar frases, imagens e links
</div></center>

4. Modifique a parte destacada de acordo com o que se pede.

5. Agora procure por:

]]></b:skin>

6. Acima dessa linha cole o seguinte código CSS:

#rodape {
width: 940px;
padding: 15px;
background: #606060 ;
border:1px dotted #888 ;
text-align: center;
color: #fff;
font-size: 12px;
}

7. Modifique as seguintes partes destacadas:

Negrito: Tamanho da largura do rodapé em pixels.
Vermelho:
Cor do fundo do rodapé.
Rosa: Cor da borda.
Azul: Cor da letra.
Verde: Tamanho da letra.

Caso entenda bem de CSS, você pode acrescentar outras códigos no CSS.

8. Salve o Modelo e veja como ficou.

Marcadores: , , ,