Mostrando entradas con la etiqueta Dificultad media. Mostrar todas las entradas
Mostrando entradas con la etiqueta Dificultad media. Mostrar todas las entradas

miércoles, 1 de abril de 2015

¿Cómo pongo un botón para subir?

Esto es aún más fácil que personalizar blockquotes ;D Solo hay que crear un gadget del tipo HTML/Javascript y copiar lo siguiente:
<a style="display:scroll;position:fixed;bottom:20px;right:20px;" href="#" title="Subir"><img src="url de la imagen" /></a>
Y eso es todo, todito, todo.

Bonus track! ¿Cómo pongo un botón para subir con efecto scroll (vamos, que en vez de subir sin más, se deslice)?


De nuevo otra cosilla que parece más complicada de lo que realmente es. Es un pelín más difícil que el botón simple, porque hay que meterse a tocar HTML, pero nada, igualmente sencillo. Así que bueno, ¡manos a la obra!

Primero, vamos a crear una copia de seguridad de nuestra plantilla, que siempre es importante antes de tocar nada del HTML, que luego nos arrepentimos del cambio y no nos acordamos de todo lo que hemos cambiado y bueno, ¡mejor prevenir que curar!


La copia de seguridad es, para que nos entendamos, la plantilla del blog (nada de entradas ni imágenes o archivos que hayamos subido), y se guarda en el ordenador a buen recaudo por si en algún momento queremos volver a ella (para eso solo habría que subirla dándole al mismo botoncito y buscándola en nuestros archivos).

Y una vez hecho eso, ¡al HTML propiamente dicho!


Una vez dentro, buscamos (clicando en cualquier parte del HTML y pulsando ctrl + F) la etiqueta </body>

Justo encima copiamos lo siguiente:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/>
<script>
   $(function () {
   $(&#39;.go-to-top&#39;).click(function () {
   $(&#39;html,body&#39;).animate({
   scrollTop: 0
    }, 500);
   return false;
    });
    });
</script>
Esto por no tener, no tenemos ni que entenderlo.

Y después modificamos el gadget que teníamos hecho ya en el botón sencillo, añadiendo href="wrap" y class="go-to-top":
<a style="display:scroll;position:fixed;bottom:10px;right:40px;" href="#wrap" title="Subir arriba" class="go-to-top"><img src="url de la imagen" /></a>
Hacer un botón de subida (que no tiene porqué ser la pera limonera) no es demasiado difícil en PicMonkey o en Pixlr, pero hay gente majísima que ya ha hecho algunos por nosotros, por ejemplo Blanca en Personalización de blogs, Trini en Trucos Diseña Web, o Laura en Miss Lavanda.

¿Cómo personalizo las blockquotes?

En un primer momento puede parecer algo complicado, pero ¡para nada! Empezamos por abrir el diseñador de plantillas de blogger, y vamos a la opción de añadir CSS:


Y ahí copiamos lo siguiente:

.post-body blockquote {
border-left: 15px solid; border-color: #bf0000
border-right: 1px solid; border-color: #bf0000;
border-top: 1px solid; border-color: #bf0000;
border-bottom: 1px solid; border-color: #bf0000;
background: #ffffff;
padding: 25px;
font-size: 15px;
color: #323232;
font-family: 'Hanuman', serif; 
font-style:italic; 
border.radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Y voilà!, eso es todo... si quieres que tu blockquote sea exactamente igual que la mía.

Para adaptarla a tus gustos, podemos modificar los colores (siempre usando el sistema hexadecimal. Yo siempre me ayudo con esta página para seleccionar el color perfecto ;)), la letra (tamaño, color y fuente) e incluso redondear los bordes (para eso sirven las tres últimas líneas, y a más píxeles más redondeados quedarán los bordes, si solo los quieres curvarlos un poquito, pon un valor más cercano a 0px en las tres líneas).

Ah, si queremos cambiar el estilo de los bordes, podemos cambiar solid por dashed (para que estén formados por guiones), dotted (para que estén hechos de puntos) o incluso double (para que haya dos líneas).

Bonus track! También podemos poner una imagen de fondo, añadiendo simplemente esta línea:

background-image: url('url de la imagen');

Aquí os dejo algún ejemplo de blockquotes que yo misma he hecho en un momentín :D (sí, lo sé, lo siento, sé que son bastante horteras, pero tenía que exagerarlo todo mucho para que vieseis las distintas opciones sin para eso hacer ochenta modelos):



.post-body blockquote {
border-left: 12px solid; border-color: #EC1789;
border-right: 12px solid; border-color: #EC1789;
border-top: 3px solid; border-color: #EC1789;
border-bottom: 3px solid; border-color: #EC1789;
padding: 15px;
font-size:17px;
color: #EC1789;
font-family: 'Pacifico', serif;
background: #FFDCEF;
border.radius: 15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;

}




.post-body blockquote {
border-left: 12px solid; border-color: #907249;
border-right: 1px solid; border-color: #907249;
border-top: 1px solid; border-color: #907249;
border-bottom: 1px solid; border-color: #907249;
padding: 30px;
font-size:13px;
color: #000000;
font-family: 'Times New Roman', serif;
background: transparent;
border.radius: 0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}



.post-body blockquote {
border-left: 7px solid; border-color: #FF0731;
border-right: 7px solid; border-color: #FF0731;
border-top: 7px solid; border-color: #FF0731;
border-bottom: 7px solid; border-color: #FF0731;
padding: 70px;
font-size:16px;
color: #FF0731;
font-family: 'Coming Soon', serif;
background-image: url('http://feelgrafix.com/data_images/out/13/871810-polka-dot-wallpaper.jpg');
border.radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}





Eso es todo lo que tienen las blockquotes. ¿Algo que no quede claro, alguna duda, pregunta, ruego o sugerencia?