Mostrando entradas con la etiqueta tutorial blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta tutorial blogger. Mostrar todas las entradas

lunes, 19 de septiembre de 2016

[HTML] Redimensionar imágenes y/o vídeos desde la misma entrada


¡Buenas noches a todos/as!

Traigo un tutorial que creo que será de bastante utilidad.

¿ No os a pasado muchas veces, que al poner una imagen o vídeo en cualquier entrada y/o página, al ser más grande , sobrepasa el límite del post quedando cortada? Pues os traigo la solución ^^.

Nota: Este tutorial funciona al darle en la medida Extra Grande, en otra medida no dará el mismo resultado.

Lo primero es ir a nuestra entrada o página y poner aquella imagen o vídeo que queramos:


Blogger siempre la reducirá al mínimo para que no sobresalga. Pero claro, también nos da las opciones de ampliarla a grande ,extra grande o tamaño original:


En mi caso, al darle a extra grande, al darle a previsualizar, me quedaría así:


A mucha gente le dará igual, pero aquellos que le demos importancia al diseño de las entradas nos molestará. La primera solución en la que pensaríamos es utilizar un editor de imágenes ( como Adobe Photoshop) y si, nos quitaría el problema, pero al reducir perderíamos calidad de imagen o algunos elementos quedarían reducidos.

Os doy una solución más sencilla. 

Volvemos a editar nuestra entrada, y le daremos a la opción Editar HTML. Aquí nos aparecerá el código de todo lo que hay en nuestra entrada: espacios, texto, color de fuente, imágenes etc. Como en mi caso quiero redimensionar una imagen, tendré que buscar este código o uno similar:


No tendremos que modificar toooodo el código, si no solo 2 partes. Primero modificaremos el Ancho de la imagen, buscando el apartado :

"width=xxx"


Modificaremos el valor que hay, en mi caso 640 (px) por el ancho de la columna de posts de nuestro blog. Este valor lo encontraremos en Plantilla/ Editar HTML y buscando la sección:

.post { 

Nota: Aunque ponga un valor de por ejemplo, 600, si tenemos márgenes, deberemos restar la suma de los margenes de ancho.

Una vez tengamos el valor del ancho, lo escribimos. Ahora modificamos el valor de:

" height= XXX" 


Este valor equivale a la altura de nuestra imagen. Aquí deberemos de calcular el valor aproximado mirando la Vista previa de la entrada e ir aumentando o reduciendo el valor. En mi caso lo dejaré en 326 (px).

Al darle de nuevo a Redactar, veremos que se ha ajustado la imagen:


Y si le damos a vista previa veremos que la imagen ya no se sobresale del borde del post.



Resultado Final



Si en lugar de una imagen, quisiéramos modificar el tamaño de un vídeo, deberíamos seguir los mismos pasos que en este tutorial, pero el código del vídeo incluiría la palabra Iframe.

¿ Os ha resultado útil? Es una manera de evitar tener que editar una a una cada imagen y de perder calidad al mismo tiempo ¿ No creéis? ^^. Dejad vuestra opinión en comentarios ^3^/


sábado, 17 de septiembre de 2016

Google Fonts: cambia la fuente de tu blog


¡Buenas noches!

Os traigo un nuevo tutorial que creo a muchos os puede interesar y es: ¿ Cómo cambiar la fuente predeterminada de mi blog? . No es algo dificil de hacer, solamente necesitaremos un poco de conocimiento HTML y CSS ( y si no esta este tutorial ;p)  y utilizar la web Google Fonts.

Google Fonts es una gran galería de google en la que podremos encontrar cientos de Fonts compatibles con blogger, pudiendo poner tantas como queramos pero tampoco sin abusar.

Lo primero iremos a Google Fonts:


Buscamos la fuente o fuente(s) que nos interesen, en mi caso he elegido Dancing Script. La ventaja de esta web es que podremos previsualizar el texto que queramos antes de instalar la fuente:


El siguiente paso, será darle al signo de +:


Veremos que abajo aparece una ventana confirmando la selección. Le daremos al icono - de color blanco:


La ventana se expandirá dando los códigos necesarios para instalar la fuente, NO LA CERRÉIS:


A continuación vamos a nuestro blog, a la pestaña Plantilla y Edición de HTML:


La sección que nos interesa es la que va DESPUÉS de :

 <head>


Cómo podéis ver yo ya tengo algunas fuentes instaladas, pero el proceso es el mismo. Deberemos ir a la página de Google Fonts, donde tenemos los códigos de la fuente y copiar el primer de ellos:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
A continuación lo pegamos en nuestra plantilla:


Google Fonts tiene un fallo importante, y es que este código es erróneo para nuestro blog, y si quisiéramos guardarlo tal cual nos saldría este aviso:


Para solucionarlo, primero deberemos añadir el siguiente código entre "stylesheet" > :

type='text/css'/

Lo siguiente será cambiar las " por ' de tal manera que el código quedará así:


A continuación, buscamos la sección  < b:skin> y la expandimos:


Ahora buscaremos la parte de la plantilla dónde queremos tener la fuente. Yo la pondré en el título de la Sidebar/ Columna del blog, por tanto buscare:
#sidebar-wrapper-left h2{
Aquí veremos que, como en mi caso, ya tengo una fuente instalada.


Tanto si tenemos una instalada como si no, deberemos copiar/sustituir esta parte:
font-family: 'Poiret One', cursive;
Por este segundo código de la pagina de Google Fonts:
font-family: 'Dancing Script', cursive;
Y quedará así:


Finalmente Guardamos los cambios y...


RESULTADO FINAL

Espero que os haya resultado útil este tutorial, y si tenéis cualquier duda, dejadla en los comentarios ^3^.



Related Posts Plugin for WordPress, Blogger...