Clique e acesse

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



Tutorial: Como colocar uma enquete em seu blog

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

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

Voltar a vídeo aulas antigas
Tecnologia do Blogger.
Protected by Copyscape Plagiarism Check