¿Como poner botón con efecto deslizante?

Lo primero, te recomendaría hacer una copia de seguridad de la plantilla, por si surge algún problema.

Iremos a:

1. Plantilla

1. Editar HTML

1. Ctrl F, dentro de la plantilla, y buscaremos

1. </head>

Antes de </head> ponemos el siguiente script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
$(function () {
$(&#39;.go-to-top&#39;).click(function () {
$(&#39;html,body&#39;).animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

Una vez echo esto iremos a: 

1. Diseño, 
2. Añadir gadget

y pegaremos lo siguiente:

 <a style="display:scroll;position:fixed;bottom:50px;right:50px;" href="#wrap" title="Subir arriba" class="go-to-top"><img width="85px" height="85px" style="border:0;" src="La imagen que tu quieras aqui"/></a></div>
</a>

Tenemos que tener en cuenta que podemos modificar varios parametros de nuestro código:

50px;right:50px;  esto en cuanto a la posicion en pantalla

85px" height="85px  esto en cuanto a la medida de nuestra imagen

 "La imagen que tu quieras aqui" Aqui tendras que poner tu imagen, previamente alojada en tu servidor favorito, copias la URL de la imagen y la cambiar por la frase "La imagen que tu quieras aqui" respetando las comillas.

Recuerda subir a tu servidor la imagen, y copiar la URL de la imagen.

                   

Con esto ya tendrás tu botón  subir deslizante en tu blog, si te ha sido útil, si te ha gustado, compártelo.

Un post que mucha gente me ha preguntado como podemos poner unos botones para que nos sigan en Twitter

Podemos elejir un boton para:

Compartir
Seguir
Hashtag
Mención

Tendremos varias opciones, para elegir nuestro botón.
Y para terminar, vista previa y si esta como queremos, copiaremos nuestro codigo y lo podemos pegar en  HTML, si queremos ponerlo en un gadget.
Iremos a Diseño , añadir gadget y en edición html, pegaremos nuestro código.
Luego pondremos nuestro gadget donde queramos.
La página donde tendremos todas las opciones para tener nuestro botón es:

Botones para Twitter

Espero que os sea útil, y aprovecha mi botón y hazte seguidor mio.

Bueno, no penséis que nos hemos ido, solo que hemos tenido una temporada intensa de trabajo y nos ha sido imposible llegar a todo. Lo lamento mucho pero a veces las situaciones nos las encontramos de esta manera. Bueno y como decía Fray Luis de León: Decíamos ayer... y vamos con el tema.  Estos son los iconos con los logos originales, pues bien vamos a decorarlos un poco. De mas esta decir que es solo un color al azar, si alguien los quisiera en otro color, pues un mensaje y veremos que es lo que podemos hacer.  

Para usarlos, guardar como y ya los podréis subir a nuestro alojamiento preferido, para utilizarlos.

Espero que os sirvan, y si los utilizáis no dejéis de dejar el enlace para verlos.

Una manera de poner  Botones Flotantes de medios sociales para Blogger, Seguir este enlace  

Botones Flotantes

Bastara con que rellenemos los requisitos y veamos la vista previa, si nos convence tendremos nuestros botones flotantes en unos momentos.

Bajo el Título del Post podemos poner los  botones Me Gusta, Twittear, Google+. 

Lo primero que haremos es ir a plantilla, Edición de Html, continuar Con Ctrol F buscaremos:

<div class='post-header-line-1'/>

debajo pondremos lo siguiente:

<table border='0' cellpadding='6' style='width: 50%;'><tbody><tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td></tr></tbody></table>

Si tenemos entradas resumidas y queremos que los botones solo sean visibles dentro de la entrada entonces pondremos en mismo código anterior pero encerrado dentro de una condicional, de la siguiente forma:

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <table border='0' cellpadding='6' style='width: 50%;'><tbody><tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td></tr></tbody></table> </b:if>

Si por el contrario, queremos que aparezca al final de la entrada buscaremos este código:

<div class='post-footer'>

y pondremos debajo:

 <table border='0' cellpadding='6' style='width: 50%;'><tbody><tr><td><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share'>Tweetear</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td><td><g:plusone size='medium'/></td><td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px'/></td></tr></tbody></table>

Me ha preguntado María, como podría poner un botón que al bajar al final del blog, te suba.

Si quieres un botón que cuando llegues al final del blog te suba rápidamente,  solo tendrás que alojar la imagen que quieras utilizar, en un servidor o en el mismo blog.

Una vez que tengas la URL de la imagen, ponerla en este codigo:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="AQUI LA IMAGEN QUE TU QUIERAS" /></a>

Tan solo tendrás que ir a Diseño y añadir un
Gadget Html
y copiar y pegar el el codigo anterior y guardarlo... y ver el blog.
Veras que ya esta tu botón .

Espero que te resulte fácil, si tienes algún problema contacta conmigo

<a href="http://lasredesteayudaran.blogspot.com.es/">

<button>La Red te Ayudara</button></a>

Con este sencillo código, seremos capaces de tener un botón Volver Atras, para utilizarlo según nos interese

Este código sera:

<input type="button" value="Volver atrás" onclick="history.back()" style="font-family: Verdana; font-size: 10 pt">

Resultado:
 

"font-size: Cambiando este numero podrá se mas grande o mas pequeño, el botón,

Con este sencillo código, podremos poner un botón para cerrar la pagina con un click.

<input name="button" type="button" onclick="window.close();" value="Cerrar Página">

Si no te gusta el típico color gris de los botones de "ok" o "aceptar"... y quieres añadirle un botón de color puedes añadir esta línea en donde quieras poner tu botón:

<a href="http://google.es/"></a></span><a href="http://google.es/"><input name="button" value="Google" style="color: #ffffff; background-color: #9748e9; " type="submit"></a>

Cambiamos "Google" por el nombre de nuestro blog o web.
Cambiamos "http://google.es/" por la URL (dirección) de tu blog o web.

Puedes cambiar:-color:#ffffff; el color de texto.
-background-color: #9748e9; el color de fonfo

El resultado sería este: