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.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati