Usamos cookies propias y de terceros para ofrecer info personalizada según su navegación. Si continua navegando consideramos que acepta el uso de cookiesOKMás información

Boton subir deslizante para el blog

Boton subir deslizante para el blog


¿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 aquiAqui 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.
Boton subir deslizante para el blog


¿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 aquiAqui 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.

Botones Twitter

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


Botones para Sigueme 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.

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


Botones para Sigueme 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.

Iconos sociales con otro estilo

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







FacebookTwitterRSSGoogle+RSSBlog



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.

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.
 







FacebookTwitterRSSGoogle+RSSBlog



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.

Flotantes botones de medios sociales para Blogger


botones


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.





botones


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.




Como poner botones Me Gusta, Twittear, Google+.

botonesBajo 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>

botonesBajo 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>

Como Poner Un Botón para Subir

botones




















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





botones




















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





Sencillo botón, con un sencillo codigo

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

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





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

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





Botón Volver Atras con un codigo

Unknown
botonesCon 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,
botonesCon 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,

Botón para cerrar Página con sencillo codigo

Unknown
botonesCon 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">

botonesCon 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">

Botón en color con solo añadir este codigo

Unknown
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:
boton

<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:
    
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:
boton

<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: