Que tal aprender a colocar um botão em CSS perfeito que leva seus leitores ao topo com elegância em seu blog?
O Vídeo está logo abaixo e a qualidade é HD. Lhe ajudeu? me ajude também, basta deixar um comentário aqui no blog.
- CÓDIGO 1
]]></b:skin>
- CÓDIGO 2
/* to top */
#toTop {
width:50px;
background: #FF0000;
border:1px solid #000;
text-align:center;
padding:5px;
position:fixed;
bottom:5px;
right:5px;
cursor:pointer;
color:#eee;
text-decoration:none;
font-weight:700;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
- CÓDIGO 3
</body>
- CÓDIGO 4
<a href='#' id='toTop'>▲ Voltar ao Topo</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 "Scroll to Top" 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("href");if($(window).scrollTop()!
="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop
()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click
(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
- OBS 1
COR DO BOTÃO: background: #FF0000;
- OBS 2
BORDA: border:1px solid #000;
- OBS 3
LETRA: color:#eee;
- OBS 4
TAMANHO LETRA: font-weight:700;
- OBS ESPECIAL
TROCAR: <a href='#' id='toTop'>▲ Voltar ao Topo</a>POR: <a href='#' id='toTop'> <img src="URL da sua imagem"> </img> </a>
CÓDIGO DAS CORES: http://html-color-codes.info/Codigos-de-Cores-HTML/
Atenção: O blogger tem um certo limite de animações em CSS, caso você tenha muitas animações em CSS, você deve remover algumas para que o efeito CSS do botão funcione, aqui no Vídeo Blogueiro, você pode notar que o efeito CSS do botão não está funcionando devido ao alto número de efeitos existentes neste blog, mas vou deixar como está.