Follow by Email

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

Redes Sociais Compartilhar Sidebar


fonte e créditos deste presente post:
/linkselinksnethttp://linkselinksnet.blogspot.com/2011/03/share-sidebar-redes-sociais.html

Share Sidebar Redes Sociais


share-sidebar

Share Sidebar é um gadget  que exibe ícones flutuantes na lateral do seu site ou blog, permitindo assim que o leitor compartilhe seus artigos em Redes Sociais como Facebook, Twitter, Delicious, Digg, Google Buzz, StumbleUpon, Reditt e Yahoo Buzz.
Para adicionar, vá até a pagina do Share Sidebar,clicando no logo abaixo, configure as suas preferências, digite seu endereço de e-mail e URL do site ou blog e clique em GET THE CODE.1. Acessar o Painel do Blogger. 
2. Ir para o Design >>> Elementos da página. 
3. Clique em Adicionar um gadget. 
4. Na janela que se abre, adicionar um Gadget HTML / Javascript . 
5. Copie o código abaixo e cole-o dentro da caixa de conteúdo.
6. Salve o gadget
7. Arraste o gadget para reposicioná-lo acima do gadget de postagem do seu blog.
8. Clique no botão Salvar.
Se o template é muito largo, pode ser que a coluna de ícones fique desalinhada. Então vá testando as posições, arrastando-o e clicando em VISUALIZAR, até que fique tudo certinho e depois salve as modificações.
Se este gadget não for adequado para o seu modelo ou se você não gostar, é só exclui-lo e tudo voltará a ser como antes!!! 


logo-sharesidebar
Leia também:                                                           
Adicionar Ícones Sociais Flutuantes

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