Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas
Mostrando entradas con la etiqueta Blogger. Mostrar todas las entradas

Imágenes en Blogger: Cambiar tamaño

Blogger nos permite subir imágenes hasta un tamaño de 1600 pixeles de ancho.

Si subimos una imagen de gran tamaño, la podemos mostrar en una entrada con un tamaño mas chico.

Ejemplo:

El tamaño de la imagen es de 200 pixeles por 150 pixeles.


Pero el tamaño original de la imagen es de 1600 pixeles por 1200 pixeles.

Si hacemos clic sobre la imagen nos abrira la original.

El código generado es el siguiente:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s1600/veyron.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s200/veyron.jpg" width="200" /></a></div>

La primera imagen es la original, y la segunda, es la pequeña que mostramos en la entrada.

En la segunda imagen nos marca el tamaño:

El ancho de la imagen: width="200"

La altura de la imagen: height="150"

Si borramos width="200" y height="150"  no afecta en nada la imagen, igual se va a mostrar de 200 pixeles por 150 pixeles.

¿Cómo cambiar el tamaño de la imagen?

Si nos fijamos en el link de las 2 imágenes, son casi iguales, con una sola diferencia.

Primera imagen:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s1600/veyron.jpg
Segunda imagen:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s200/veyron.jpg
La primera tiene s1600  y la segunda s200

Esos números nos da el ancho de la imagen.

s1600  es igual a 1600 pixeles.

s200  es igual a 200 pixeles.

La forma de personalizar el tamaño es cambiando esos números.

Puede cambiar esos números a cualquier medida entre s1 y s1600 que te proporciona imágenes con anchos que van desde 1 pixeles a 1600 pixeles.

Cambiaremos el número según el ancho que quieran, y la altura se ajustara automaticamente en proporción.

Si cambiamos por s377 la imagen tendra un ancho de 377 pixeles.


Su altura se ajustara quedando de 283 pixeles.

Tener en cuenta que hay que eliminar el ancho y altura del código: width="200" y height="150"

Otra cosa que hay que tener en cuenta, es que las imágenes se pueden achicar y NO agrandar a un tamaño mayor a la imagen original subida.

Si subimos una imagen de 650 pixeles de ancho, la misma va a mostrar s1600 y cualquier número que pongamos entre s650 y s1600 la imagen siempre tendra el ancho de 650 pixeles.

En este caso NO se agrandará.

Si, podemos achicarla poniendo entre s1 y s649

De esta forma podemos mostrar las imágenes en nuestro blog adaptadas al diseño.

También podemos cambiar el tamaño de la primera imagen y así mostrarlas al hacer clic sobre ella, con otro tamaño.

O si queremos dar la opciòn de descargar la imagen (visto en la entrada anterior) con otro tamaño, lo hacemos cambiando s1600 por otro número y agregando -d

Ejemplo:

Descargar imágen  de 1600 pixeles por 1200 pixeles.


Descargar imágen  de 1024 pixeles por 768 pixeles.


O lo hacemos mediante unos link:


Descargar Imagen:



Imágenes en Blogger: Descargar, compartir

Esto sirve si queremos compartir las imágenes de nuestro blog.

Cuando subimos una imagen en Blogger nos genera un código así:

Ejemplo:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyY6Wxgo6esgCb_EZS02FgQ7OjS3Y2_ikx5fwZSTl-u7EX_ZtUvHuRbYyGW1nSNYfSn0iw07y_EefA79GXR_glQjgxclCZUmkL8jory6kjLFT2lf6LgdfFfzmfDc365qRXAzvsUkmXBYE/s1600/descargar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyY6Wxgo6esgCb_EZS02FgQ7OjS3Y2_ikx5fwZSTl-u7EX_ZtUvHuRbYyGW1nSNYfSn0iw07y_EefA79GXR_glQjgxclCZUmkL8jory6kjLFT2lf6LgdfFfzmfDc365qRXAzvsUkmXBYE/s1600/descargar.jpg" /></a></div>

La primera imagen es la que va a mostrar si hacemos clic sobre la segunda.

La segunda imagen es la que mostramos en las entradas del blog.

Por lo general la imagen que mostramos es de un tamaño menor y al hacer clic sobre ella se nos abre la imagen que suele ser con el tamaño original.

Lo que vamos a hacer, es un pequeño cambio para que al hacer clic sobre la imagen, se abra una ventana para guardar la imagen.

Modificamos la primera imagen del código, agregandole "-d"

Así:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyY6Wxgo6esgCb_EZS02FgQ7OjS3Y2_ikx5fwZSTl-u7EX_ZtUvHuRbYyGW1nSNYfSn0iw07y_EefA79GXR_glQjgxclCZUmkL8jory6kjLFT2lf6LgdfFfzmfDc365qRXAzvsUkmXBYE/-d/descargar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyY6Wxgo6esgCb_EZS02FgQ7OjS3Y2_ikx5fwZSTl-u7EX_ZtUvHuRbYyGW1nSNYfSn0iw07y_EefA79GXR_glQjgxclCZUmkL8jory6kjLFT2lf6LgdfFfzmfDc365qRXAzvsUkmXBYE/s1600/descargar.jpg" /></a></div>

Ver ejemplo haciendo clic sobre la imagen.


Si tenemos un blog de descarga de wallpapers, nos va a ser muy útil.

Botón para mostrar y ocultar Navbar en plantillas nuevas


El siguiente código lo que hace es ocultar la navbar y con un botón la mostramos y/o ocultamos.

Poner en el lugar que quieran mostrarlo.

Puede ser en un Gadget HTML, o bien dentro del cuerpo de la plantilla entre <body> y </body>

<script type='text/javascript'>
//<![CDATA[
var navbarv = document.getElementById("navbar");
navbarv.style.display="none";
function monavbar() {

if ( navbarv.style.display != "none" ) {
navbarv.style.display = "none";
}
else {
navbarv.style.display = "";
}
}
//]]>
</script>
<a href='#' onclick='monavbar();'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg94rYWM6icgmchBcNzR8GnLMxdUl1myELrp4GpoQnF_O0nWjb1rPxs2LByAmBbGcxQMb1xK7n-sGqmClB3AfGOAcIr5IiNipVMtNHYxaQ7aRP6zn1jV7MC0asm-N7ZlLfFxAx0_8vJRRrp/s1600/p_navbar1.gif" /></a>

Pueden cambiar la imagen o sustituirla por un texto.

Ver ejemplo:

Tener mas de 10 páginas independientes en blogger

Blogger nos da la posibilidad de tener hasta 10 páginas independientes.

Cuando ya tenemos las 10 páginas creadas blogger nos quita el botón de "Página Nueva".

Hoy les voy a mostrar la forma de crear mas páginas independientes.

De la siguiente forma vamos a poder tener 11 o mas páginas independientes.

Seguir los pasos con precaución para no cometer ningún error.

Como vemos en la primera imagen ya tengo creadas 10 páginas.

Para el ejemplo les puse el nombre vku 1 hasta vku 10.


Ya con las 10 páginas creadas vamos a elegir una de las 10 y le damos a "Editar".


Se nos abre el editor.

Ya con el editor abierto vemos el link y lo copiamos en el bloc de notas, para después utilizarlo.

Este paso es muy importante, si no tenemos este link no funcionará el truco.


Cerramos.

Ahora suprimimos esa página independiente.

No se preocupen, después la recuperamos.

Igual es conveniente copiar el contenido de la página.


Ahora ya veremos el botón de "Página Nueva".

Creamos otra página independiente.


Yo le puse para el ejemplo vku 11.

Como vemos, de nuevo tenemos 10 páginas independientes.

Ahora van desde vku 2 hasta vku 11.


¿Se acuerdan el link que pegamos en el blog de notas?

Lo copiamos y pegamos en navegador.


Se abrirá el editor.


Le damos a "Publicar Página".

Como vemos en la siguiente imagen, ya tenemos 11 páginas independientes.


Repetimos los pasos para seguir agregando mas páginas.

Siempre hay que tener 9 páginas para que aparezca el botón de "Página Nueva".

Así que vamos a tener que copiar y pegar en el bloc de notas todos los link y eliminar varias páginas, tantas como quieramos agregar.

Ahora si tenemos el menú de las páginas independientes en el blog, lo editamos desde Diseño, Elementos de la página, moviendo al lugar que prefierán mostrar.


Ver ejemplo:

Problemas en Edición HTML con cambios en plantilla blogger


Hoy me avisan en preguntas dejadas en un comentario y por correo que no les permite realizar algunas funciones.

"Hola amigo, quiero pedir un favor. Tengo problemas con Edición HTML de blogspot o es una problema del blogger?
Te explico entro en Diseño --> Edición HTML y me pongo a modificar algo en CSS o donde sea problema viene AHORA cuando hago click VISTA PREVIA o GUARDAR PLANILLA y nada no puedo guardar y tampoco ver los cambios.

Tu tienes idea que pasa? He comprobado en mas blogs que tengo y pasa igual."

He notada también que no permite Expandir plantillas de artilugios.

Y en Internet explorer me da error de JavaScript.

Mi respuesta para todos es que es un problema momentáneo de Blogger.

Posible solución:

Hacerlo desde otro explorador, a Costán le funcionó con Google Chrome.

Una mejor solución:

Descargar plantilla completa.

Abrir el archivo template-ID.xml con un editor de texto como el Bloc de notas.

Hacer los cambios que quieran y guardar.

Subir el archivo template-ID.xml.

Notarán que de está forma acepta los cambios.