PASO 1
Lo primero que tenéis que hacer es instalar un botón de los que nos daba Blanca o crear uno vosotras mismas si sabéis Ah, ¿que ya lo tenéis? Pues sigamos entonces.
PASO 2
Aquí tenemos que usar uno poco de html, pero muy sencillo, ya veréis. En concreto, usaremos un pequeño código JQuery que es una extensión del lenguaje de programación Javascript. Dicho esto (que queda muy cool, pero no os ayuda mucho), pasemos a lo interesante. Para hacerlo solo tendremos que:
✎ Ir a Plantilla.
✎ Crear una copia de seguridad de la plantilla (por si rompemos algo :-P).
✎ Ir a Editar HTML.
✎ Ahora tenemos que buscar la cadena de texto </body> en la plantilla del blog (con Ctrl+f por ejemplo). Y poner justo encima el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
$(function () {
$('.go-to-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
Si en vuestro código ya tenéis una línea <script> con un jquery.min.js, entonces no hace falta que pongáis la primera linea. Si no lo sabéis, pues ponedla que no ocurre nada.
✎ Guardamos y salimos
PASO 3
En este último paso, modificaremos el gadget HTML de nuestro botón "Subir arriba". Y lo que tenemos que hacer es:
✎ Ir a Diseño.
✎ Buscar y pinchar en editar el HTML del gadget de vuestro botón.
✎ Ahora simplemente tendremos que añadir sobre el código existente de nuestro botón, el código que os pongo en rojo a continuación:
Botón de muestra original
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="url de la imagen del botón" /></a>
Botón de muestra modificado
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#wrap" title="Subir arriba"class="go-to-top"><img src="url de la imagen del botón" /></a>
Y ya está. Ya lo tenemos hecho :-). Espero que os haya gustado y que lo encontréis chulo y fácil de hacer.
Cómo instalar tu flecha de subir arriba:
✎ Decides qué flecha de las que yo os he preparado te gusta
✎ Copias el código que hay justo debajo
✎ En tu blog, le das a Añadir gadget HTML
✎ Pegas el código
✎ Guardar cambios
✎ Dejarme un comentario para darme las gracias a mi también, no solo a Noe ;)
Os pongo aquí las flechas con sus respectivos códigos debajo (pensad que se ven claritas porque esta columna es blanca, pero irán abajo a la derecha, justo encima de vuestro fondo):
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnDi8ZOBr4aMep61gEWfBH-3t9UMHTwPusPBfLEkIrxrD9vneLynRAYQmWaJ4QnEo0typB7fW7-4Ni707rUjhTgKIEc-021v2C4xIi7aZNURQ2iX1MHDfL2f1onZTYJMzYWqZZFBC_feY/s1600/2_babyblue.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDnYbc4WNO1dLm1CpMP79qmASITyQ-SQBh9-3eYKFSW0yPNc7GCwNfIE5SnATPzJKF7EuokNnog_aoycCbHQ8COVcSe0d8Sd2j81V08Odapf6qsa7L1YqjGB1BJS9OiquhyphenhyphenI1m1nVK2k/s1600/4_babyblue.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mSQhnrnCWReJM-TIRNkvHmwzf46Q6ktzO1_6i3KI9b9Cxqs9KvaJ_qlk6y5SpaIHlJrAKzqMz_Rwj88VpUU7JvE2cd-NAvdwV612KknSF_4q2KSZyTN55rg26bR0qj9D6DmgWQyaNeM/s1600/2_babypink.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbsFajXNfNhYSVsjOEuUq6Mx86tm5iFeLvDSi1oa8jysiZkzBEVizbsSAJFdinfIIlnnpdbhDORTBbW9dXZYw7aN9_2cbJuMjWAgNpX27PwbrT2vGmjUiOqsHDIFKrUMpWtO2CptEUjc/s1600/4_babypink.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhycyBNh7Bc6YQl4zz4REkMSlP45Gm-Y1Y72KPJKAHJgpBhJnulNOK9nCHa0zyfKBAYDRZErzqWxwK1u05_X7uuqeYAFhrLakRBskfkDDsEITe6keporJRFdz8kXEkSg8ur0GPVjsvvbuw/s1600/2_beige.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjiT-PiwxL40VP2k-Czq26jLcQ0kUqaR_JzQEpgjDcJi7T_bQKtMeBZFxVD1kSMsRXST1FBpaoNF1YOFF8R5NPd6DI6CkARQPGUtnNvUAsBJQqK4XybsXwgQcUwJ96MWYAVNv5BPTEfo/s1600/4_beige.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimImFUDXfNtvaNZQS-DsHmbPq4TnVTFRICquybmUR6oQpUEEG9XvBtam9vLHrPyNKl60lF-6xfVjsvXMOTQ8pGIoSTgwHWPvfPStkhh4oOstBMSlDzcAg50z36pT0vtB-L3gGNyticK1A/s1600/2_brown.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtMLZm8Dkpe3o543RObTvBMKwdleKMqJyoEHaYdW-8EdY2nfzZyJQTPSIRPeo3-sBQi-umJpJCo-4SylhbaCFrl64EQDmS1WFSXyO6T6bayegDCZyww_JbaMG8NLPRqPUEmN40AoqpF8/s1600/4_brown.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyThcBCFgqA63sgBfxH7boUmeiXs1E7y0FGhbaHNJlTvS_cAw4dWddKKJn7C-kMbmETDq98BwGrCDPC-VESibsAeSQ8PHDLwe3DrcR6LBwfOKVme3rWT62yMYtkUjAKLi9wWLRzLU_Eto/s1600/2_cream.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMhYPLwef9nGBHupmo8tanirP9cwqhvTc0S1ntjZU6TydgS2Wz2vNX-MCZ1G6JZhFquzXdMJtMSNBExRbIw65b8xWHCu4MXNYExwcHwC5IufnyPyT06c2WR6FVSeJopP0lBZqTQTTXis/s1600/4_cream.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0eD_GUyF0JqcdZGCQNzg4CBB03hgG7SleKd7XMKvyfKUyVyUWnO_djoYmf-B7UYMdKGAj72S8NDUjy78ME3ri5004hFmWz7_16ZlTlOFpyqOSQOZO4EUtxvIN1hwp72FEGjAa4rOnKKI/s1600/2_green.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Wr6ere5_7yvFq89xMBEQIqthMjvpjWKS1Cg0edrK2XFMu2svwXKREgZKWqmMf9v07nBYqLIdo9aQ2X0lA7yjOHCPTpr9j-SM3L_r78uYge1yqZNuvG4ktHCcjuO4R-S5ma6nFQe9wdI/s1600/4_green.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOJErDio7yL1QW0m62LO5sN011dsesReB2FY84MOmsStHWvve2x-rHWQwE1oRiQnbYQlJKu2tyoB9V1iCvNWsBy2sPqCSz4N9pusKQ5S3v-1-PTEVlKzQBDGx1CWdqgdvbMoq5O6Exl9k/s1600/2_grey.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI-YCYh5okJw0SW3VJzROjAEnvlPLMqVx_W5LTTF6wRaSjFk0u4bfD3QMEXIZ0TolfKrxkDv0ujVmC3-WrYEFeakMLR6WJT4g6DY_d3lNayPHaN7awdXabgDbTQFalsnr9Br5urIJgiKc/s1600/4_grey.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0tJpRtc5TdEjkIppmPKaOUEycljblQJzRUR0Ma5xtth9s-a0uH5S-hnI3rnAPH04KT4ToWlp8ELY_YCDzmUO9RDPTexOi6eVz9hm29gZdawpUFSoaR5ohxwvjYK0JzqE6PeSHSIQgc0/s1600/2_pink.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdVlvM53mYWdIn952oUPle-KRqORbmquKP3LBDeuLOBQppzYMZqQUrr_30SzyOa_rDdMnhdy5gbMaUKbfsxPIZLVPUl_FHJcRI542ovP-IT6OOCdKACZYk7Y8UvJHBwGBaEIJZsW6Yvo/s1600/4_pink.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxW93JNUiW4T1atBkGE1mS3KzrD0LfEh4E-jt1peVV2roH_FA2eBEtj04ZYYLLqogWbm81BjjMN8dtuXDBxBp4DbNUui7TCaccJObYc2y6D4YLBnx8GlY9xDawbnmtKtsz2SrO7sEaYw/s1600/2_purple.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeyziF11NQmUtciizC52ydI6libDuyLHlec2u2ldH7lUKwRgyPCfLgFQotOtxuXG8ML1lZH_hiQyA_ktjYBmGaFgzdD_pVC7T5SplunmChQ9pambjLZd4XghOEtCe_7xLrCDsdOUX3P4/s1600/4_purple.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX4XPyCbR5JqrMqMg3vVsVjlZusGzsRWPi1uEHe2zOXq52IWq99ABLH0QmJWyPe1RoDTN23i3ceaY5p17gyECeuMVeeMwpeC6ToNs87rUJ3Uh24V0voP74ajSffP8yIALnuHE-6lVM_Gc/s1600/1_red.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdkHr9wp5LsVABuwmhqTgHkfO1j0-XG5gmOZkcxoPUAwf-o6rjZz6CWL94B2XZm_opP8yAABYnMF0oT_sTUxPq4A7OxuWpDfgpjriYkqS3fZ8DcSPUdAuXUXOIAGJ3XqK0Mj8Rbeta7U/s1600/4_red.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-51CPXOe4Bb_Qy_YFkQlHzHfBFQkmroIydqYEiPmJVWam6fPhcU0Q7tYxsqnT1nlSOFm6wkAwQfapEBI-pGEM91VofCn6thsAlqPL5HixMC1WCP4NqygjDDmuvEgflPTzppwpT-YH_UY/s1600/2_taupe.png" /></a>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Subir arriba"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-Tbfxgj2jdpsu_RzGGoKtqdnD1nhmb3PcYPiCei7hjd3m1IbD3g2S-ePbxMR7ujlFfCAnhH9iIITdCJbD4iMWIHxD4Xcyu5vOD_ELzWPcgvtrZ7REHqVEFksFebAWuYwog4rI2Htnt0/s1600/4_taupe.png" /></a>
Sign up here with your email
Déjame tus dudas y comentarios: Conversion Conversion Emoticon Emoticon