Como colocar botão 'ir ao topo' em CSS no seu blog personalizavel com letras ou imagem; Vídeo

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'>&#9650; 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 &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>

  • 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'>&#9650; Voltar ao Topo</a>
POR: <a href='#' id='toTop'> <img src="URL da sua imagem"> </img> </a>


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á.

Dica: 5 Templates perfeitos para seu novo blog

Espero que você adore os templates.
O #VB separou para você, 5 templates que irão te deixar satisfeito(a) com seu blog.

Como fazer um banner, textos, botões e relógios em flash totalmente de graça; Vídeo

Um banner, um menu ou mesmo um texto personalizado feito em minutos; Nunca foi tão fácil fazer um relógio personalizado ou botão em flash.

Como colocar o sistema de comentários DISQUS no seu blog; Vídeo

Um dos melhores, ou o melhor, sistema de comentários da atualidade.
Olá, nesse vídeo você vai aprender de forma rápida como colocar um sistema de comentários moderno e inovador em seu blog; Não perca mais tempo e de play.

Dica: 7 dicas para não se desmotivar com seu blog

Todos, sem exceção passam por momentos difíceis na criação de um bom blog hoje em dia, isso devido à concorrência ser muito grande. No Brasil, existem cerca de 2,5 milhões de blogs.
Mas como fazer para alcançar o sucesso? Como não desanimar diante do fracasso? Eu já pensei assim, e acredite, elaborei algumas dicas que podem surtir efeito no seu blog; Vamos lá?



Como alterar o favicon do seu blog em menos de 1 minuto; Vídeo

Que tal trocar o ícone do seu blog enquanto penteia o cabelo?


Tutorial: Como colocar uma enquete em seu blog

Está precisando colocar uma enquete em seu blog? suas duvidas acabam aqui!

Dica: 5 ótimos sites para você encontrar templates gratuitos

Pois é, revirei a internet em busca de templates perfeitos, e encontrei.

Como colocar pop up do Facebook com contagem de tempo personalizada no seu blog; Vídeo

Que tal colocar em seu blog um mecanismo que pode lhe ajudar a ganhar muitas curtidas?
Com esse pop up você poderá dobrar o número de curtidas em sua página do Facebook. Como? Basta assistir o vídeo e saber como usar o código que você encontra logo abaixo do mesmo.







  • Código:

<style>
#fblikepop {background-color: #fff;display: none;    position: fixed;    top: 200px;    _position: absolute;     width: 450px;    border: 10px solid #6F6F6F;    z-index: 200;-moz-border-radius: 9px;    -webkit-border-radius: 9px;    margin: 0pt;    padding: 0pt;    color: #333333;    text-align: left;font-family: arial,sans-serif;    font-size: 13px;} 
#fblikepop body {background: #fff none repeat scroll 0%;    line-height: 1;    margin: 0pt;    height: 100%;} 
.fbflush {cursor: pointer;    font-size: 11px !important;    color: #FFF !important;    text-decoration: none !important;    border: 0 !important;} #fblikebg {display: none;    position: fixed;_position: absolute;  height: 100%;    width: 100%;    top: 0;    left: 0;    background: #000000;    z-index: 100;} 
#fblikepop #closeable {color: #333;float: right;    margin: 7px 0 0 0;} 
#fblikepop h1 {    background: #6D84B4 none repeat scroll 0 0;    border-top: 1px solid #3B5998;    border-left: 1px solid #3B5998;    border-right: 1px solid #3B5998;    color: #FFFFFF !important;    font-size: 14px !important;    font-weight: normal !important;    padding: 5px !important;    margin: 0 !important;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;} 
#fblikepop #actionHolder { height: 60px;    overflow: hidden;}
#fblikepop #buttonArea { background: #F2F2F2;    border-top: 1px solid #CCCCCC;    padding: 10px;    min-height: 50px;} 
#fblikepop #buttonArea a { color: #999999 !important;    text-decoration: none !important;    border: 0 !important;    font-size: 10px !important;} #fblikepop #buttonArea a:hover {    color: #333 !important;    text-decoration: none !important; border: 0 !important;} 
#fblikepop #popupMessage {font-size: 12px !important;font-weight: normal !important;    line-height: 22px;    padding: 8px;    background: #fff !important;} 
#fblikepop #counter-display {float: right;    font-size: 11px !important;font-weight: normal !important;    margin: 5px 0 0 0;text-align: right;line-height: 16px;}</style> 
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script> 
<script type="text/javascript" src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script> 
<script type="text/javascript">
 //<![CDATA[   
  kakinetworkdotcom01username="VideoBlogueiro",
  kakinetworkdotcom01title="Encontre-nos no Facebook",
  kakinetworkdotcom01time="25",
  kakinetworkdotcom01wait="0",
  kakinetworkdotcom01lang="br"
 //]]>  
 </script> 
 <script type="text/javascript" src="http://mundoblogger.webs.com/scripts/popupFBlikebox.js"></script>
 <script type="text/javascript">
   //<![CDATA[ 
  $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});  
   //]]>
  </script>

Parceiros

Tecnologia do Blogger.

Seguir via e-mail e Google plus