Si aún no tienes instalado el botón de subir en el blog o te gustaría cambiar la apariencia del que está, hoy te traigo un tutorial sencillito con 5 diseños en varios colores, para que lo hagas en un momentín.
Buen domingo! cómo lo llevas? yo sigo aquí liada intentando entender a mi nuevo colega Wordpress, que tiene su miga, hasta que le cojes confianza, para qué nos vamos a engañar. Cuando dominas algo, se te olvida de lo complicado que son los comienzos y hay temas que te cuesta tocar porque para tí son tan sencillos que piensas que no merece la pena hacer un tutorial de ellos.
Es lo que me pasa a mí con el botón de subir, que de tan simple que me resulta la instalación y personalización de este elemento, casi he estado a punto de pasar por alto crear una explicación sobre el tema. Pero al final me he decidido tras volver a sentirme completamente novata al tocar Wordpress y he pensado que al igual que yo necesito ahora mismo tutoriales para super principiantes en esta plataforma, los que comienzan en Blogger, agradecerán cualquier tipo de tutorial aquí por muy sencillo que sea.
Así que aquí lo tienes. Tanto si aún no lo tienes, como si quieres cambiar su apariencia, te voy a mostrar 2 maneras de hacerlo: usando imágenes o iconos. ¡Vamos allá!
BOTONES DE SUBIR CON IMÁGENES
Si te gustan los botones con imágenes divertidas, he diseñado 5 modelos distintos en varios colores para que puedas usarlos y tenerlo listo en un santiamén. Pero primero vamos a lo que vamos, este es el código que tienes que instalar en la parte de Diseño de tu blog, usando un gadget HTML/Javascript. Lo copias, lo pegas y lo guardas, así de sencillo:
BOTÓN DE SUBIR PARA SIDEBAR EN LA DERECHA
<div class="boton-subir"><a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='SUBIR'><img src="DIRECCIÓN DE TU IMAGEN" width="75" /></a></div>BOTÓN DE SUBIR PARA SIDEBAR EN LA IZQUIERDA
<div class="boton-subir"><a href='#' style='display croll;position:fixed;bottom:120px;left:10px;' title='SUBIR'><img src="DIRECCIÓN DE TU IMAGEN" width="75" /></a></div>¿Tienes dudas? mira el vídeo que te muestro paso a paso el proceso:
FREEBIES DE BOTONES DE SUBIR
Aquí tienes los modelos que he diseñado. Tan sólo tienes que pinchar en las imágenes para descargarlos:
BOTONES DE SUBIR CON ICONOS
Si ya llevas tiempo por este blog y ves mis tutoriales, sabrás cómo instalar Font Awesome o ya lo tendrás instalado, así que me voy a saltar ese paso. Si necesitas verlo, aquí te dejo el enlace al primer post que hice sobre esta serie de tutoriales para personalizar tu blog con iconos. Una vez tengas instalada la cartera de iconos, bajo el vídeo encontrarás los códigos para personalizar tu botón.
Dirígete a Tema/Editar HTML y haz una copia de seguridad antes de ponerte al lío. ¿La tienes? pues dale al play:
Este es el código que tienes que copiar y pegar en un gadget HTML/Javascript en la parte de Diseño:
BOTÓN DE SUBIR PARA SIDEBAR EN LA DERECHA
<div class="boton-subir"><a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='SUBIR'><i class="fa fa-chevron-up" aria-hidden="true"></i></a></div>BOTÓN DE SUBIR PARA SIDEBAR EN LA IZQUIERDA
<div class="boton-subir"><a href='#' style='display croll;position:fixed;bottom:120px;left:10px;' title='SUBIR'><i class="fa fa-chevron-up" aria-hidden="true"></i></a></div>Y aquí tienes los estilos para personalizarlo como más te guste:
BOTÓN DE SUBIR SENCILLO
.boton-subir i{
color: #6EBFD7; font-size: 14px; padding: 15px;
}
.boton-subir i:hover{ color: #FFBDAF;
}BOTÓN DE SUBIR ENMARCADO
.boton-subir i{
color: #b7cdc0; border: 2px solid #ffbdaf; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; font-size: 14px; padding: 15px;
}
.boton-subir i:hover{ color: #ffbdaf; border: 2px solid #b7cdc0; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;
}BOTÓN DE SUBIR CON FONDO
.boton-subir i{
color: #ffffff; background: url(http://i65.tinypic.com/2w6gksh.jpg) repeat; font-size: 14px; padding: 15px;
}
.boton-subir i:hover{ color:#e3abc4; background: url(http://i63.tinypic.com/2nkt6v5.jpg) repeat;
}Para personalizar los bordes de tu botón de subir, puedes consultar la imagen con los tipos de líneas CSS que encontrarás casi al final de este post.
Descubre cómo instalar un botón de subir en tu blog. Incluye tutorial + freebies. Tuitéalo
Bueno, pues esto es todo por hoy. Espero que te haya venido bien este tutorial tanto si empiezas como si ya llevas tiempo en Blogger y te apetece darle un nuevo look a tu blog.
Si te ha quedado alguna duda, podemos charlar en los comentarios. ¿Tenías ya instalado un botón de subir en tu blog? ¿te han gustado los diseños que te he preparado? ¿prefieres usar iconos o imágenes para los enlaces de tu blog? cuenta, que me encanta saber tu opinión!
¡Que tengas un gran día!
¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:
