{"id":996,"date":"2015-09-07T17:13:00","date_gmt":"2015-09-07T20:13:00","guid":{"rendered":"http:\/\/latirus.com\/blog\/crear-un-boton-para-volver-arriba-en-blogger\/"},"modified":"2024-12-08T19:08:33","modified_gmt":"2024-12-08T22:08:33","slug":"crear-un-boton-para-volver-arriba-en","status":"publish","type":"post","link":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/","title":{"rendered":"Crear un bot\u00f3n para volver arriba en Blogger"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"996\" class=\"elementor elementor-996\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2f4ca91d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2f4ca91d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3e378c0f\" data-id=\"3e378c0f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e38efe9 elementor-widget elementor-widget-text-editor\" data-id=\"5e38efe9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Muchos de los temas o themes que se encuentran para <b>Blogger <\/b>o est\u00e1n incompletos, o encontramos grandes problemas a la hora de modificar el c\u00f3digo. Llegado el caso de tener un <b>blog<\/b> extenso en contenido, nuestro usuarios van a querer <b>volver al principio<\/b> del post una vez finalizada la lectura del mismo.<\/p><p>\u00a0<\/p><p>En estos casos lo mejor que podemos hacer es un simple bot\u00f3n que aparezca cuando el usuario no se encuentre al principio del post o la pagina. Gracias a <b>JQuery <\/b>y <b>CSS3<\/b>, el dise\u00f1o y la funci\u00f3n del bot\u00f3n sera mas \u00e1gil.<\/p><p>\u00a0<\/p><p>El siguiente tutorial muestra como <b>agregar el bot\u00f3n para volver arriba en Blogger<\/b>, aunque muy f\u00e1cilmente es adaptado a cualquier pagina web. Para hacer mas f\u00e1cil el uso del mismo existen dos posibilidades de instalar el siguiente bot\u00f3n para <b>volver arriba<\/b>:<\/p><p>\u00a0<\/p><ol><li>Modo F\u00e1cil: Solo copiar y pegar el c\u00f3digo. Realizando modificaciones en el color.<\/li><li>Modo Complejo: Ir Copiando por partes en nuestro tema modificando el c\u00f3digo <b>HTML<\/b>\/<b>XML <\/b>de <b>Blogger<\/b>.<\/li><\/ol><p>\u00a0<\/p><p>Ninguna de las dos maneras es dif\u00edcil, solo que una lleva mas tiempo que la otra y el resultado es el mismo. Comencemos con el m\u00e9todo mas complejo, para explicar en que consisten las partes del mismo:<\/p><h2>\u00a0<\/h2><h2>Instalar Bot\u00f3n Volver Arriba en Blogger<\/h2><p>\u00a0<\/p><p>Requisitos:<\/p><p>\u00a0<\/p><ul><li>jQuery:\u00a0<a href=\"http:\/\/code.jquery.com\/jquery-2.1.4.min.js\" rel=\"nofollow\">http:\/\/code.jquery.com\/jquery-2.1.4.min.js<\/a><\/li><\/ul><p>\u00a0<\/p><p>Lo primero en tener en cuenta, es que necesitaremos tener el plugin de jQuery instalado en nuestro tema de <b>Blogger<\/b>. Si no estas seguro de tener el plugin instalado, intenta lo siguiente:<\/p><p>\u00a0<\/p><p>&#8211; Dentro del panel principal de Blogger, entra en Plantilla y luego dale click a &#8220;Editar <b>HTML<\/b>&#8220;<\/p><p>\u00a0<\/p><div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/i0.wp.com\/4.bp.blogspot.com\/-WDW6g3ccdAo\/VeirBeqQIYI\/AAAAAAAAA0E\/ScEHRK0sM2k\/s1600\/editarHTML.png\"><img decoding=\"async\" data-recalc-dims=\"1\" class=\"aligncenter\" title=\"Volver Arriba | Ir Arriba - FeddyPerez\" src=\"https:\/\/i0.wp.com\/4.bp.blogspot.com\/-WDW6g3ccdAo\/VeirBeqQIYI\/AAAAAAAAA0E\/ScEHRK0sM2k\/s1600\/editarHTML.png\" alt=\"Volver Arriba | Ir Arriba - FeddyPerez\" border=\"0\" \/><\/a><\/div><p>\u00a0<\/p><p>Lo siguiente sera tocar (Ctrl + F) dentro del c\u00f3digo, para conseguir buscar &#8220;<i>.js<\/i>&#8221; hasta encontrar alg\u00fan script que contenga el nombre de <b>jQuery<\/b>. Si tu b\u00fasqueda falla deber\u00e1s agregar el enlace de <b>jQuery<\/b> de la siguiente manera, tal como se muestra en la imagen:<\/p><p>\u00a0<\/p><div><pre>&lt;<span style=\"color: maroon; font-weight: bold;\">script<\/span> src='http<span style=\"color: #808030;\">:<\/span>\/\/<span style=\"color: maroon; font-weight: bold;\">code<\/span>.jquery<span style=\"color: #808030;\">.<\/span>com\/jquery-2.1.4.min<span style=\"color: #808030;\">.<\/span>js'\/<span style=\"color: #808030;\">&gt;\n<br \/>\n<\/span><\/pre><\/div><div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/i0.wp.com\/1.bp.blogspot.com\/-pgHmZayiwQw\/Veiu5Ip4m0I\/AAAAAAAAA0c\/-fYM5lbvSmI\/s1600\/buscarjQuery.png\"><img fetchpriority=\"high\" decoding=\"async\" data-recalc-dims=\"1\" title=\"Volver Arriba | Ir Arriba - FeddyPerez\" src=\"https:\/\/i0.wp.com\/1.bp.blogspot.com\/-pgHmZayiwQw\/Veiu5Ip4m0I\/AAAAAAAAA0c\/-fYM5lbvSmI\/s640\/buscarjQuery.png?resize=640%2C260\" alt=\"Volver Arriba | Ir Arriba - FeddyPerez\" width=\"640\" height=\"260\" border=\"0\" \/><\/a><\/div><p>\u00a0<\/p><p>Una vez que tenemos nuestro <b>jQuery <\/b>funcionando en nuestro blog, vamos a agregar el estilo del bot\u00f3n para <b>volver arriba<\/b>, en mi caso lo voy a hacer redondo para que salga en el margen derecho inferior de mi pagina web:<\/p><p>\u00a0<\/p><div style=\"background-color: white; border-radius: 5px;\"><pre>&lt;<span style=\"color: maroon; font-weight: bold;\">style<\/span><span style=\"color: #808030;\">&gt;<\/span>\n <span style=\"color: maroon; font-weight: bold;\">a<\/span><span style=\"color: #808030;\">.<\/span>upbt <span style=\"color: purple;\">{<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">background<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: green;\">94C2F9<\/span> <span style=\"color: #400000;\">url<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #0000e6;\">'<\/span><span style=\"color: #666616;\">https<\/span><span style=\"color: purple;\">:<\/span><span style=\"color: maroon; font-weight: bold;\">\/\/<\/span><span style=\"color: #5555dd;\">cdn3.iconfinder.com<\/span><span style=\"color: #40015a;\">\/data\/icons\/faticons\/32\/arrow-up-01-32.png<\/span><span style=\"color: #0000e6;\">'<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: #074726;\">no-repeat<\/span> <span style=\"color: #074726;\">scroll<\/span> <span style=\"color: #008c00;\">50<\/span><span style=\"color: #006600;\">%<\/span> <span style=\"color: #008c00;\">50<\/span><span style=\"color: #006600;\">%<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">height<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">48<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">padding<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">10<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">width<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">48<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">position<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #074726;\">fixed<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">border-radius<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">100<\/span><span style=\"color: #006600;\">%<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">transition<\/span><span style=\"color: #808030;\">:<\/span> background-color <span style=\"color: #008c00;\">500<\/span><span style=\"color: #006600;\">ms<\/span> <span style=\"color: #074726;\">ease<\/span> <span style=\"color: #008c00;\">0<\/span><span style=\"color: #006600;\">s<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">bottom<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">45<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">right<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">50<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">display<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #074726;\">none<\/span><span style=\"color: purple;\">;<\/span>\n <span style=\"color: purple;\">}<\/span> \n <span style=\"color: maroon; font-weight: bold;\">a<\/span><span style=\"color: #808030;\">.<\/span>upbt<span style=\"color: purple;\">:<\/span><span style=\"color: maroon; font-weight: bold;\">hover<\/span><span style=\"color: purple;\">{<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">background-color<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: green;\">398969<\/span><span style=\"color: purple;\">;<\/span> \n <span style=\"color: purple;\">}<\/span>\n&lt;\/<span style=\"color: maroon; font-weight: bold;\">style<\/span><span style=\"color: #808030;\">&gt;\n<\/span><\/pre><\/div><p>\u00a0<\/p><ul><li>Los colores del bot\u00f3n se cambian en <u><i>a.upbt background: #9462F9<\/i><\/u><i> <\/i>y en <u><i>a.upbt:hover background-color: #398969<\/i><\/u>. El primero es el color natural del bot\u00f3n, mientras que el hover es el color al posicionar el mouse encima del mismo.<\/li><li>El tama\u00f1o del bot\u00f3n se cambia, modificando el <u><i>height <\/i><\/u>y el <u><i>width <\/i><\/u>de <u><i>a.upbt.<\/i><\/u><\/li><li>Los margenes se cambian en <u><i>bottom<\/i><\/u><i> <\/i>(que nos dice a cuantos p\u00edxeles del fondo se va a poner el bot\u00f3n) y <u><i>right<\/i><\/u><i> <\/i>(lo mismo pero desde la derecha).<\/li><li>Por ultimo, el icono se cambia en la url de la propiedad <u><i>background. <\/i><\/u><\/li><\/ul><p>\u00a0<\/p><p>El c\u00f3digo del style puede ir colocado justo debajo de la carga del <b>jQuery <\/b>para mayor comodidad a la hora de editar. El siguiente paso sera hacer que nuestro bot\u00f3n aparezca en la pantalla cuando el usuario baje la barra de navegaci\u00f3n lateral y se encuentre navegando.<\/p><p>\u00a0<\/p><p>Lo primero que debemos hacer es crear un bot\u00f3n en <b>HTML<\/b>, y para eso copiamos el siguiente c\u00f3digo y lo pegamos dentro del <b>Body <\/b>del tema, el nombre de &#8220;class&#8221; del siguiente bot\u00f3n es upbt, recordemos que en este tutorial usaremos ese nombre para llamarlo en <b>JavaScript<\/b>:<\/p><p>\u00a0<\/p><div style=\"background-color: white; border-radius: 5px;\"><pre><span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: maroon; font-weight: bold;\">a<\/span> <span style=\"color: #074726;\">class<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"upbt\"<\/span> <span style=\"color: #074726;\">href<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"#\"<\/span><span style=\"color: #a65700;\">&gt;<\/span><span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">i<\/span><span style=\"color: #a65700;\">&gt;<\/span><span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">a<\/span><span style=\"color: #a65700;\">&gt;\n\n<\/span><\/pre><\/div><p>\u00a0<\/p><p>Ahora solo nos quedar\u00eda insertar el c\u00f3digo de <b>JavaScript <\/b>para que nuestro bot\u00f3n tenga la funci\u00f3n de volver arriba. El siguiente c\u00f3digo debe estar justo antes de que nuestro <b>Body <\/b>se cierre, tal como se muestra en la siguiente imagen:<\/p><p>\u00a0<\/p><div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/i0.wp.com\/1.bp.blogspot.com\/-EQcM70Qwjc8\/VennsQw4j-I\/AAAAAAAAA1I\/A-FpMl2D35I\/s1600\/botonArriba.png\"><img decoding=\"async\" data-recalc-dims=\"1\" title=\"Volver Arriba | Ir Arriba - FeddyPerez\" src=\"https:\/\/i0.wp.com\/1.bp.blogspot.com\/-EQcM70Qwjc8\/VennsQw4j-I\/AAAAAAAAA1I\/A-FpMl2D35I\/s1600\/botonArriba.png\" alt=\"Volver Arriba | Ir Arriba - FeddyPerez\" border=\"0\" \/><\/a><\/div><div style=\"background-color: white; border-radius: 5px;\"><pre style=\"background: #ffffff; color: black;\"><span style=\"color: #a65700;\">\n&lt;<\/span><span style=\"color: maroon; font-weight: bold;\">script<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n$<span style=\"color: #808030;\">(<\/span>document<span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>ready<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n<span style=\"color: maroon; font-weight: bold;\">var<\/span> width <span style=\"color: #808030;\">=<\/span> window<span style=\"color: #808030;\">.<\/span>innerWidth\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>documentElement<span style=\"color: #808030;\">.<\/span>clientWidth\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>body<span style=\"color: #808030;\">.<\/span>clientWidth<span style=\"color: purple;\">;<\/span>\n\n<span style=\"color: maroon; font-weight: bold;\">var<\/span> height <span style=\"color: #808030;\">=<\/span> window<span style=\"color: #808030;\">.<\/span>innerHeight\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>documentElement<span style=\"color: #808030;\">.<\/span>clientHeight\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>body<span style=\"color: #808030;\">.<\/span>clientHeight<span style=\"color: purple;\">;<\/span>\n\n  $<span style=\"color: #808030;\">(<\/span>window<span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>scroll<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n  <span style=\"color: maroon; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span>$<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">this<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>scrollTop<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: #808030;\">&gt;<\/span> height <span style=\"color: #808030;\">\/<\/span> <span style=\"color: #008c00;\">2<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n    $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #0000e6;\">.upbt<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>fadeIn<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #0000e6;\">slow<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: purple;\">}<\/span><span style=\"color: maroon; font-weight: bold;\">else<\/span><span style=\"color: purple;\">{<\/span>\n    $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #0000e6;\">.upbt<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>fadeOut<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #0000e6;\">slow<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: purple;\">}<\/span>\n  <span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  \n  $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #0000e6;\">.upbt<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>click<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n        $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #0000e6;\">html, body<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>animate<span style=\"color: #808030;\">(<\/span><span style=\"color: purple;\">{<\/span>\n            scrollTop<span style=\"color: purple;\">:<\/span> <span style=\"color: #008c00;\">0<\/span>\n        <span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">,<\/span> <span style=\"color: #008c00;\">600<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n        <span style=\"color: maroon; font-weight: bold;\">return<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: purple;\">;<\/span>\n    <span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  \n<span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">script<\/span><span style=\"color: #a65700;\">&gt;\n\n<\/span><\/pre><\/div><p>Expliquemos para que funciona cada parte del script.<\/p><p>\u00a0<\/p><ul><li>var width, height: Estas dos variables determinan el tama\u00f1o de la pantalla que se esta usando. No determinan el tama\u00f1o de la pagina.<\/li><li>if ($(this).scrollTop() &gt; height \/ 2): Si la barra lateral esta en una posici\u00f3n mayor al tama\u00f1o de la pantalla dividido 2, va a mostrar el boton de &#8220;class&#8221; upbt. Caso contrario lo oculta.<\/li><li>\u00a0$(&#8216;.upbt&#8217;).click(function(): Al darle click al <b>bot\u00f3n <\/b>upbt, hace que la pagina en 0.6segundos (600ms) llegue a la <b>parte de arriba<\/b>. Es posible cambiarle la velocidad de la animaci\u00f3n.<\/li><\/ul><p>\u00a0<\/p><p>Para terminar, &#8220;Guardamos Plantilla&#8221; y nuestra pagina en <b>Blogger <\/b>va a tener un bot\u00f3n para volver arriba hecho en <b>CSS <\/b>+ <b>JQuery<\/b>.<\/p><p>\u00a0<\/p><p>Ahora bien, el modo complejo de realizar el tutorial ha sido ese. A continuaci\u00f3n te muestro la manera f\u00e1cil de realizar el tutorial.<\/p><p>\u00a0<\/p><p>Vamos a &#8220;Dise\u00f1o&#8221; de nuestra plantilla en <b>Blogger<\/b>, y agregamos un nuevo Gadget de HTML en la parte inferior de la pagina.<\/p><p>\u00a0<\/p><div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/i0.wp.com\/3.bp.blogspot.com\/-Z1_ioy1ot1I\/VenrJdg43YI\/AAAAAAAAA1Y\/Zu8NC2589iE\/s1600\/VolverArriba.png\"><img decoding=\"async\" data-recalc-dims=\"1\" title=\"Volver Arriba | Ir Arriba - FeddyPerez\" src=\"https:\/\/i0.wp.com\/3.bp.blogspot.com\/-Z1_ioy1ot1I\/VenrJdg43YI\/AAAAAAAAA1Y\/Zu8NC2589iE\/s640\/VolverArriba.png?resize=640%2C250\" alt=\"Volver Arriba | Ir Arriba - FeddyPerez\" width=\"640\" height=\"250\" border=\"0\" \/><\/a><\/div><p>\u00a0<\/p><p>Luego, copiamos el siguiente c\u00f3digo y lo pegamos. Guardamos el gadget y deber\u00eda funcionar de la misma manera que en el modo anterior.<\/p><p>\u00a0<\/p><p>C\u00f3digo Completo:<\/p><p>\u00a0<\/p><div style=\"background-color: white; border-radius: 5px;\"><pre><span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: maroon; font-weight: bold;\">script<\/span> <span style=\"color: #074726;\">src<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">'http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.1\/jquery.min.js'<\/span><span style=\"color: #a65700;\">&gt;<\/span><span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">script<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: maroon; font-weight: bold;\">style<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n <span style=\"color: maroon; font-weight: bold;\">a<\/span><span style=\"color: #808030;\">.<\/span>upbt <span style=\"color: purple;\">{<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">background<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: green;\">94C2F9<\/span> <span style=\"color: #400000;\">url<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #0000e6;\">'<\/span><span style=\"color: #666616;\">https<\/span><span style=\"color: purple;\">:<\/span><span style=\"color: maroon; font-weight: bold;\">\/\/<\/span><span style=\"color: #5555dd;\">cdn3.iconfinder.com<\/span><span style=\"color: #40015a;\">\/data\/icons\/faticons\/32\/arrow-up-01-32.png<\/span><span style=\"color: #0000e6;\">'<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: #074726;\">no-repeat<\/span> <span style=\"color: #074726;\">scroll<\/span> <span style=\"color: #008c00;\">50<\/span><span style=\"color: #006600;\">%<\/span> <span style=\"color: #008c00;\">50<\/span><span style=\"color: #006600;\">%<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">height<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">48<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">padding<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">10<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">width<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">48<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">position<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #074726;\">fixed<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">border-radius<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">100<\/span><span style=\"color: #006600;\">%<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">transition<\/span><span style=\"color: #808030;\">:<\/span> background-color <span style=\"color: #008c00;\">500<\/span><span style=\"color: #006600;\">ms<\/span> <span style=\"color: #074726;\">ease<\/span> <span style=\"color: #008c00;\">0<\/span><span style=\"color: #006600;\">s<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">bottom<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">45<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">right<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">50<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">display<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #074726;\">none<\/span><span style=\"color: purple;\">;<\/span>\n <span style=\"color: purple;\">}<\/span> \n <span style=\"color: maroon; font-weight: bold;\">a<\/span><span style=\"color: #808030;\">.<\/span>upbt<span style=\"color: purple;\">:<\/span><span style=\"color: maroon; font-weight: bold;\">hover<\/span><span style=\"color: purple;\">{<\/span>\n  <span style=\"color: #bb7977; font-weight: bold;\">background-color<\/span><span style=\"color: #808030;\">:<\/span> <span style=\"color: #008c00;\">#<\/span><span style=\"color: green;\">398969<\/span><span style=\"color: purple;\">;<\/span> \n <span style=\"color: purple;\">}<\/span>\n<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">style<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">head<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: maroon; font-weight: bold;\">body<\/span> <span style=\"color: #074726;\">style<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"<\/span><span style=\"color: #bb7977; font-weight: bold;\">height<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">25000<\/span><span style=\"color: #006600;\">px<\/span><span style=\"color: purple;\">;<\/span><span style=\"color: #bb7977; font-weight: bold;\">margin<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">0<\/span><span style=\"color: purple;\">;<\/span><span style=\"color: #bb7977; font-weight: bold;\">background-color<\/span><span style=\"color: #808030;\">:<\/span><span style=\"color: #008c00;\">#<\/span><span style=\"color: green;\">303030<\/span><span style=\"color: purple;\">;<\/span><span style=\"color: #0000e6;\">\"<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\n<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: maroon; font-weight: bold;\">a<\/span> <span style=\"color: #074726;\">class<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"upbt\"<\/span> <span style=\"color: #074726;\">href<\/span><span style=\"color: #808030;\">=<\/span><span style=\"color: #0000e6;\">\"#\"<\/span><span style=\"color: #a65700;\">&gt;<\/span><span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">i<\/span><span style=\"color: #a65700;\">&gt;<\/span><span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">a<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n\n<span style=\"color: #a65700;\">&lt;<\/span><span style=\"color: maroon; font-weight: bold;\">script<\/span><span style=\"color: #a65700;\">&gt;<\/span>\n$<span style=\"color: #808030;\">(<\/span>document<span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>ready<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n<span style=\"color: maroon; font-weight: bold;\">var<\/span> width <span style=\"color: #808030;\">=<\/span> window<span style=\"color: #808030;\">.<\/span>innerWidth\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>documentElement<span style=\"color: #808030;\">.<\/span>clientWidth\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>body<span style=\"color: #808030;\">.<\/span>clientWidth<span style=\"color: purple;\">;<\/span>\n\n<span style=\"color: maroon; font-weight: bold;\">var<\/span> height <span style=\"color: #808030;\">=<\/span> window<span style=\"color: #808030;\">.<\/span>innerHeight\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>documentElement<span style=\"color: #808030;\">.<\/span>clientHeight\n<span style=\"color: #808030;\">||<\/span> document<span style=\"color: #808030;\">.<\/span>body<span style=\"color: #808030;\">.<\/span>clientHeight<span style=\"color: purple;\">;<\/span>\n\n  $<span style=\"color: #808030;\">(<\/span>window<span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>scroll<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n  <span style=\"color: maroon; font-weight: bold;\">if<\/span> <span style=\"color: #808030;\">(<\/span>$<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">this<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>scrollTop<span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: #808030;\">&gt;<\/span> height <span style=\"color: #808030;\">\/<\/span> <span style=\"color: #008c00;\">2<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n    $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #0000e6;\">.upbt<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>fadeIn<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #0000e6;\">slow<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: purple;\">}<\/span><span style=\"color: maroon; font-weight: bold;\">else<\/span><span style=\"color: purple;\">{<\/span>\n    $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #0000e6;\">.upbt<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>fadeOut<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #0000e6;\">slow<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  <span style=\"color: purple;\">}<\/span>\n  <span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  \n  $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #0000e6;\">.upbt<\/span><span style=\"color: maroon;\">'<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>click<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon; font-weight: bold;\">function<\/span><span style=\"color: #808030;\">(<\/span><span style=\"color: #808030;\">)<\/span> <span style=\"color: purple;\">{<\/span>\n        $<span style=\"color: #808030;\">(<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #0000e6;\">html, body<\/span><span style=\"color: maroon;\">\"<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: #808030;\">.<\/span>animate<span style=\"color: #808030;\">(<\/span><span style=\"color: purple;\">{<\/span>\n            scrollTop<span style=\"color: purple;\">:<\/span> <span style=\"color: #008c00;\">0<\/span>\n        <span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">,<\/span> <span style=\"color: #008c00;\">600<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n        <span style=\"color: maroon; font-weight: bold;\">return<\/span> <span style=\"color: #0f4d75;\">false<\/span><span style=\"color: purple;\">;<\/span>\n    <span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n  \n<span style=\"color: purple;\">}<\/span><span style=\"color: #808030;\">)<\/span><span style=\"color: purple;\">;<\/span>\n<span style=\"color: #a65700;\">&lt;\/<\/span><span style=\"color: maroon; font-weight: bold;\">script<\/span><span style=\"color: #a65700;\">&gt;\n<\/span><\/pre><\/div><p>\u00a0<\/p><p>Nuestro resultado final, sera un bonito dise\u00f1o de<b> bot\u00f3n para<\/b> <b>volver arriba<\/b> hecho en <b>CSS <\/b>y <b>jQuery<\/b> para <b>Blogger<\/b>, aunque muy f\u00e1cilmente se puede adaptar a todo tipo de paginas web ya sean <b>HTML <\/b>o <b>WordPress<\/b>.<\/p><p>\u00a0<\/p><div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/i0.wp.com\/2.bp.blogspot.com\/-VMhOUQ-gUjs\/VeisITf9f-I\/AAAAAAAAA0U\/aqhDlJOxqbs\/s1600\/temporalBotonArriba.png\"><img decoding=\"async\" data-recalc-dims=\"1\" class=\"aligncenter\" title=\"Volver Arriba | Ir Arriba - FeddyPerez\" src=\"https:\/\/i0.wp.com\/2.bp.blogspot.com\/-VMhOUQ-gUjs\/VeisITf9f-I\/AAAAAAAAA0U\/aqhDlJOxqbs\/s640\/temporalBotonArriba.png?resize=640%2C306\" alt=\"Volver Arriba | Ir Arriba - FeddyPerez\" width=\"640\" height=\"306\" border=\"0\" \/><\/a><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t        \t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Muchos de los temas o themes que se encuentran para Blogger o est\u00e1n incompletos, o encontramos grandes problemas a la hora de modificar el c\u00f3digo. Llegado el caso de tener un blog extenso en contenido, nuestro usuarios van a querer volver al principio del post una vez finalizada la lectura del mismo. \u00a0 En estos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1083,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[222,220],"tags":[106,107,91,92,129,131,55,130],"class_list":["post-996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-tutoriales","tag-blogger","tag-botones","tag-css","tag-html","tag-ir-arriba","tag-jquery","tag-tutorial","tag-volver-arriba"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crear un bot\u00f3n para volver arriba en Blogger - Latirus<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un bot\u00f3n para volver arriba en Blogger - Latirus\" \/>\n<meta property=\"og:description\" content=\"Muchos de los temas o themes que se encuentran para Blogger o est\u00e1n incompletos, o encontramos grandes problemas a la hora de modificar el c\u00f3digo. Llegado el caso de tener un blog extenso en contenido, nuestro usuarios van a querer volver al principio del post una vez finalizada la lectura del mismo. \u00a0 En estos [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/\" \/>\n<meta property=\"og:site_name\" content=\"Latirus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/latirus\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-07T20:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-08T22:08:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1252\" \/>\n\t<meta property=\"og:image:height\" content=\"601\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Federico Perez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Federico Perez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/\"},\"author\":{\"name\":\"Federico Perez\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c\"},\"headline\":\"Crear un bot\u00f3n para volver arriba en Blogger\",\"datePublished\":\"2015-09-07T20:13:00+00:00\",\"dateModified\":\"2024-12-08T22:08:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/\"},\"wordCount\":862,\"publisher\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1\",\"keywords\":[\"Blogger\",\"Botones\",\"CSS\",\"HTML\",\"Ir Arriba\",\"jQuery\",\"Tutorial\",\"Volver Arriba\"],\"articleSection\":[\"JQuery\",\"Tutoriales\"],\"inLanguage\":\"es-AR\"},{\"@type\":[\"WebPage\",\"ItemPage\"],\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/\",\"url\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/\",\"name\":\"Crear un bot\u00f3n para volver arriba en Blogger - Latirus\",\"isPartOf\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1\",\"datePublished\":\"2015-09-07T20:13:00+00:00\",\"dateModified\":\"2024-12-08T22:08:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1\",\"width\":1252,\"height\":601,\"caption\":\"VovlerArribaCSSJQUERY\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/www.latirus.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un bot\u00f3n para volver arriba en Blogger\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#website\",\"url\":\"https:\/\/www.latirus.com\/blog\/\",\"name\":\"Latirus\",\"description\":\"Desarrollo de Sistemas\",\"publisher\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.latirus.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#organization\",\"name\":\"Latirus\",\"url\":\"https:\/\/www.latirus.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png\",\"contentUrl\":\"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png\",\"width\":340,\"height\":150,\"caption\":\"Latirus\"},\"image\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/latirus\/\",\"https:\/\/linkedin.com\/company\/latirus\",\"https:\/\/www.youtube.com\/channel\/UCiTW7a7aDCBFg0qbIA5bq_Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c\",\"name\":\"Federico Perez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g\",\"caption\":\"Federico Perez\"},\"sameAs\":[\"http:\/\/latirus.com\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un bot\u00f3n para volver arriba en Blogger - Latirus","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/","og_locale":"es_ES","og_type":"article","og_title":"Crear un bot\u00f3n para volver arriba en Blogger - Latirus","og_description":"Muchos de los temas o themes que se encuentran para Blogger o est\u00e1n incompletos, o encontramos grandes problemas a la hora de modificar el c\u00f3digo. Llegado el caso de tener un blog extenso en contenido, nuestro usuarios van a querer volver al principio del post una vez finalizada la lectura del mismo. \u00a0 En estos [&hellip;]","og_url":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/","og_site_name":"Latirus","article_publisher":"https:\/\/www.facebook.com\/latirus\/","article_published_time":"2015-09-07T20:13:00+00:00","article_modified_time":"2024-12-08T22:08:33+00:00","og_image":[{"width":1252,"height":601,"url":"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg","type":"image\/jpeg"}],"author":"Federico Perez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Federico Perez","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#article","isPartOf":{"@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/"},"author":{"name":"Federico Perez","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c"},"headline":"Crear un bot\u00f3n para volver arriba en Blogger","datePublished":"2015-09-07T20:13:00+00:00","dateModified":"2024-12-08T22:08:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/"},"wordCount":862,"publisher":{"@id":"https:\/\/www.latirus.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1","keywords":["Blogger","Botones","CSS","HTML","Ir Arriba","jQuery","Tutorial","Volver Arriba"],"articleSection":["JQuery","Tutoriales"],"inLanguage":"es-AR"},{"@type":["WebPage","ItemPage"],"@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/","url":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/","name":"Crear un bot\u00f3n para volver arriba en Blogger - Latirus","isPartOf":{"@id":"https:\/\/www.latirus.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage"},"image":{"@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1","datePublished":"2015-09-07T20:13:00+00:00","dateModified":"2024-12-08T22:08:33+00:00","breadcrumb":{"@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/"]}]},{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#primaryimage","url":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1","width":1252,"height":601,"caption":"VovlerArribaCSSJQUERY"},{"@type":"BreadcrumbList","@id":"https:\/\/www.latirus.com\/blog\/2015\/09\/07\/crear-un-boton-para-volver-arriba-en\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/www.latirus.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Crear un bot\u00f3n para volver arriba en Blogger"}]},{"@type":"WebSite","@id":"https:\/\/www.latirus.com\/blog\/#website","url":"https:\/\/www.latirus.com\/blog\/","name":"Latirus","description":"Desarrollo de Sistemas","publisher":{"@id":"https:\/\/www.latirus.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.latirus.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/www.latirus.com\/blog\/#organization","name":"Latirus","url":"https:\/\/www.latirus.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png","contentUrl":"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png","width":340,"height":150,"caption":"Latirus"},"image":{"@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/latirus\/","https:\/\/linkedin.com\/company\/latirus","https:\/\/www.youtube.com\/channel\/UCiTW7a7aDCBFg0qbIA5bq_Q"]},{"@type":"Person","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c","name":"Federico Perez","image":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g","caption":"Federico Perez"},"sameAs":["http:\/\/latirus.com\/blog"]}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2015\/09\/VovlerArribaCSSJQUERY.jpg?fit=1252%2C601&ssl=1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts\/996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/comments?post=996"}],"version-history":[{"count":7,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts\/996\/revisions"}],"predecessor-version":[{"id":1091,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts\/996\/revisions\/1091"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/media\/1083"}],"wp:attachment":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/media?parent=996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/categories?post=996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/tags?post=996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}