Añade Widget Back to Top en Blog de Blogger

En este articulo te dejare unos botones de De Vuelta arriba (^) – podran haberlo visto en mi blog como el muchisimas sitios web una flecha en la parte de abajo de la pagina que cuando es presionada o das click en la misma te retorna al comienzo de la pagina. Esto es de gran utilidad al lector o visitante.

 Por lo regular tendrias que darle a la barra para subir o bajar tomandote tiempo para llegar a la parte superior es la razon por la cual la gran matoria de sitios en la web lo utilizan.

Como Añadir el boton de Vuelta a la Parte Superior en  blogger

Es muy sencillo añadir este boton en blogger solo sigue estos simples pasos-
1.Entra en tu cuenta de blogger
2.Selecciona el blog donde deseas Añadir el Widget
3.Ve a la opcion de Diseño
4. En la opcion de diseño  escoje añadir un gadget (mira la imagen)

5.Despues de seleccionar Añadir un Gadget una ventana se abrira  ( Ventana de Añadir un Gadget window ) (ver imagenes).


6.      Luego selecciona el gadget “HTML/JavaScript”
Despues copia cualquiera de los codigos de abajo que desees añadir en tu blog y pegalo en caja de contenido de HTML/JAVA Script

Estilo 1

Codigo HTML para Estilo 2

<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.ciudadblogger.info-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7l3WYwpZUP0KQncNIzGLufgXjkyXBuUHWNayMvqZIT6aIT3ZOLYAxkVZ6TaFcZwwr0riJe1ud081dMhyphenhyphen5bXaHXeVJbbzj0DL_H0uAGdKil_240zExMfcFaMp4RXq_dxEnWB6bAVwv_tU/s1600/go+to+top+button.gif'alt=”go" to top image” /></a> <!—www.ciudadblogger.info-- > <!--BACK-TO-TOP-STOPS-->

Estilo 2

Codigo HTML  para Estilo 2

<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.ciudadblogger.info-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkMYyGyZPcuLsGzcOC3AUzpltj1cz01wCxwsFru3OB51cW-jGzwBJGjnP6nJN2SdeYf1z54FsnSssnLSCxg4rtF3HlPQtgXncVmVdwXXZN0EWBZAU640zIuLygpvVsBQhTQZxhjyohQg/s1600/up+arrow+image.png'alt=”go" to top image” /></a> <!—www.ciudadblogger.info-- > <!--BACK-TO-TOP-STOPS-->

Estilo 3

Codigo HTML para Estilo 3

<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.ciudadblogger.info-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOqDzLH1OoTAJlk20fhD1w1hZ91IfWb5SL34NJsu_QmSIm5YOWiuwetwghTlRBV6sf4SbiSlt4XtXXCn6z7ipmGQ7vviDhBdrbjTubt28_TxWFsR4Cx9xbi0tWOvFtRFulzGdye4MjLI/s1600/go+to+top+button.jpg'alt=”go" to top image” /></a> <!—www.ciudadblogger.info-- > <!--BACK-TO-TOP-STOPS-->

Nota:Puedes reemplazar  "right" a "left" si deseas mostrar el boton al lado izquierdo.

Para finalizar guarda tu html/java y todo esta listo para utilizar el boton de regreso a tope de la pagina en tu blog de blogger.

Read More

Nuevo Boton De "Back To Top" Para Blogger

Como hacer que tus visitantes del blog pueden desplazarse desde un punto de abajo de la pagina a  la parte de arriba de la pagina con solo dar un click a un boton.

En este articulo te presentare la forma mas simple de anadirlo a la parte de abajo esquina derecha de tu blog siguiendo estos pasos.

Como Anadir el nuevo boton  Back To Top a tu  Blogger

1.Entra a la interface de blogger>>Diseño --Elementos de Pagina.

2.Da Click en 'Anadir un Gadget' en la barra del lado.


3.Selecciona 'HTML/Javascript' anadir codigo siguiente.

<!--Back to top Start bloggertricksandtoolz.com-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAU-tzloXBdcz-hcA_63_VFjTLG3MLLo40rp-K_jPyzNVeOzjVAkeB2lE1dCLBzT01qN_TNv6hQengJuy-ncMDt8d7nfIZue94WPPvFc0NQHI5BJfTy8vocbwvQjiPGRawsKB_WZOeqbM/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50KVUDXBhcdnO0RMba0qImiMd3M_SqQBsVhtmq4pZzoJaCmFsZ6J8fwMiHc2U36z54yNwodSvmU2vm19VVYXcNavYBinZeGaEwuqxV4Z74lJ6R0N6qvWH1nJ4gEyv1DD4_uqi0Vc9Olw/" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50KVUDXBhcdnO0RMba0qImiMd3M_SqQBsVhtmq4pZzoJaCmFsZ6J8fwMiHc2U36z54yNwodSvmU2vm19VVYXcNavYBinZeGaEwuqxV4Z74lJ6R0N6qvWH1nJ4gEyv1DD4_uqi0Vc9Olw/&#39;" /></a>
<!--Back to top End bloggertricksandtoolz.com-->

Nota: Cambie la frase Back to Top Con una que les guste

4.Ahora esta listo

Read More