subir ao topo do blog


fonte e créditos deste presente post:
gemablog

Seguimos subiendo

Hay varias formas de añadir una imagen para ir a inicio del blog, algunas las llamábamos flotantes,aleatorias  incluso añadimos no una sino dos imágenes para subir y bajar con efecto deslizante.Tampoco faltó la misma finalidad para las entradas. otras


¿Falta alguna? pues falta la que tengo ahora mismo funcionado pero en realidad no es una imagen, se añade en unos sencillos pasos nada distintos de las anteriores.


Justo antes de </body> añadimos lo siguiente:

<a href='#' id='backtotop'>&#8593;<br/>
<br/>top</a>
<script type='text/javascript'>
$(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>

Si nos fijamos veremos que en negrita dice top y lo podemos cambiar por cualquier otro texto "subir" por ejemplo. La flecha está formada con caracteres unicode añadiendo &#8593;

A continuación nos situamos justo antes de ]]></b:skin> y ahí empieza el entretenimiento porque añadiremos los estilos comprobando en vista previa hasta conseguir un resultado de nuestro agrado.

#backtotop {
width:*;padding:5px;
position:fixed;
bottom:10px; /* distancia alto */
right:15px; /* distancia ancho */
cursor:pointer;
font:text-decoration:none;
font-family: 'century gothic','avant garde',sans-serif; /* fuente */
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 25px; /* tamaño del texto */
line-height: .8em;
font-size-adjust: none;
letter-spacing: -3px;
font-stretch: normal;
padding:10px;
color: #ffffff !important; /* color de texto */
background:#333333; /* color de fondo */
border: 1px solid #C0C0C0; /* borde */
text-shadow: 1px 0px 0px #000000; /* sombra */
-moz-border-radius:6px; /* esquinas redondeadas */
}



traduzido:

Acompanhamento

Existem várias maneiras de adicionar uma imagem para ir ao iniciar o blog, alguns foram chamados flutuante outros aleatória adicionar mesmo não uma, mas duas imagens para cima e para baixo Missed efeito deslizante.Tampoco o mesmo fim para Ingressos.


Você está faltando algum? falta-lhes o que tenho agora funcionou, mas realmente não é uma imagem, adicione em algumas etapas simples, diferente das anteriores.


Pouco antes de </ Corpo> acrescentar o seguinte:

<a href='#' id='backtotop'>&#8593;<br/>
<br/>topo</ A>
type='text/javascript'> <script
$ (Função (){$( função = (){$. fn.scrollToTop isso). Hide (). RemoveAttr ("href") if ($ (janela). ()!=" ScrollTop 0 ") {$ (this) fadeIn. ("lento")} scrollDiv var = $ (this), $ (janela). scroll (function () {if ()==" ($ (janela). scrollTop 0 ") {$ (scrollDiv). fadeout ("slow")} else {$ (scrollDiv). ("")}});$( lento este corpo. clique em (html (){$(" função)," fadeIn .;) {animar scrollTop: 0} ("")})}}); lento

$ (Function () {

$ ("# ToTop") ScrollToTop ().;

});
</ Script>

Se você olhar vai ver que em negrito diz topo e nós podemos mudar a qualquer outro texto "Carregar" por exemplo. A seta é feita com caracteres Unicode adicionar &#8593;

Aqui estamos nós, pouco antes ]]></ B: skin> e aí reside o entretenimento que vai adicionar os estilos visualizado testes para obter um resultado a nosso gosto.

# {Backtotop
width: *; padding: 5px;
position: fixed;
bottom: 10px; / * distância * alta /
direita: 15px; / * largura da distância /
cursor: pointer;
fonte: text-decoration: none;
font-family: 'gótico do século', 'vanguarda', sans-serif; / * fonte * /
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 25px; / * tamanho do texto /
line-height: .8 em;
font-size-adjust: none;
letter-spacing:-3px;
trecho da fonte: normal;
padding: 10px;
cor:! # ffffff importante; / * cor do texto /
background: # 333333; / * cor de fundo /
border: 1px solid # C0C0C0; / * borda * /
text-shadow: 0px 1px 0px # 000000; / * sombra * /
-Moz-border-radius: 6px; / * cantos arredondados /
}


Stumble
Delicious
Technorati
Twitter
Digg
Facebook
Reddit

Translate

[+/-]

Marcadores

Postagens Pop.

Subccribe

 

Cloud

AdSense (1) aqui (1) blog (1) blogger (1) blogspot (1) dicas (2) Envia (1) feedburner (1) Google (1) Icones (1) links (3) parcerias (1) pesquise (1) Política (1) Privacidade (1) saúde (1) seguir (1) topo (1) Tutoriais (1) visitas (1) Widgets (1)

►aquienvialinks - AEL Copyright © 2009 LKart Theme is Designed by Lasantha