Trucos para el blog (1)
Insertar un mapa o unas indicaciones
Para insertar un mapa o unas indicaciones en un sitio web o blog, sigue los pasos que se indican a continuación:
- Abre Google Maps.
- Comprueba que aparecen el mapa, la imagen de Street View o las indicaciones que quieres insertar.
- En la esquina superior izquierda, haz clic en Menú
.
- Haz clic en "Compartir o insertar el mapa".
- En la parte superior del cuadro que aparece, selecciona "Insertar mapa".
- Selecciona el tamaño que quieras y, a continuación, copia el código de inserción HTML y pégalo en el código fuente de tu sitio web o blog exactamente en el lugar que quieras que aparezca el mapa.
Notas:
Si estás usando Maps en el modo básico, no podrás insertar un mapa.
Es posible que en el mapa insertado no se incluya información de Maps como el tráfico o similar.
El código de inserción del mapa es, en este caso:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d31255.029897020133!2d37.622980201622966!3d55.75068325640403!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1500360506694" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Los números en rojo puedes variarlos para adaptarlos al ancho y alto de la ventana de mapa que se adapte a tu blog (al margen de que previamente se te permita escoger el tamaño del mapa).
Si quieres que el mapa salga centrado el código será:
<div style="text-align: center;">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d31255.029897020133!2d37.622980201622966!3d55.75068325640403!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1500360506694" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Trucos para el blog (2)
Incluir un video en el blog
Para insertar un video en HTML5 debes incluir este código en tu página:
<video width="320" height="240" controls>
<source src="URL del archivo mp4" type="video/mp4">
<source src="URL del archivo ogv" type="video/ogg">
¡Hola usuario de Internet Explorer!, ¿qué crees? aquí se está reproduciendo un video increíble, pero no puedes verlo porque tu navegador es antiguo :(
</video>
En rojo lo que tienes que cambiar tú. El hecho de tener que ponerlo en dos formatos es para que puedan verlo distintos navegadores ya que hay alguno que no abre archivos mp4.
- controls permite que se muestren los controles y el reproductor en sí.
- autoplay hace que el archivo se reproduzca al cargar la página.
- loop reproducirá el archivo una y otra vez.
- muted quitará el audio del archivo.
- preload define si el reproductor se debe cargar cuando se cargue la página.
Acuerdate que para centrar el video tienes que poner antes del código la etiqueta:
<div style="text-align: center;"> y no te olvides de cerrarla con </div>
En el presente caso hemos incluido el siguiente código:
<div style="text-align: center;">
<video width="670" height="480" controls>
<source src="https://www.aviasalon.com/2017/media/MAKS17_5_x264_2.mp4" type="video/mp4">
<source src="URL del archivo ogv" type="video/ogg">
¡Hola usuario de Internet Explorer!, ¿qué crees? aquí se está reproduciendo un video increíble, pero no puedes verlo porque tu navegador es antiguo :(
</video>
<source src="https://www.aviasalon.com/2017/media/MAKS17_5_x264_2.mp4" type="video/mp4">
<source src="URL del archivo ogv" type="video/ogg">
¡Hola usuario de Internet Explorer!, ¿qué crees? aquí se está reproduciendo un video increíble, pero no puedes verlo porque tu navegador es antiguo :(
</video>
</div>
Trucos para el blog (3)
Incluir una canción en el blog
Para insertar un audio en HTML5 debes incluir este código en tu página:
<audio controls>
<source src="URL del archivo mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
¡Hola usuario de Internet Explorer!, ¿qué crees? aquí se está reproduciendo una canción increíble, pero no puedes oirla porque tu navegador es antiguo :(
</audio>
En rojo lo que tienes que cambiar tú. El hecho de tener que ponerlo en dos formatos es para que puedan verlo distintos navegadores ya que hay alguno que no abre archivos mp4.
- controls permite que se muestren los controles y el reproductor en sí.
- autoplay hace que el archivo se reproduzca al cargar la página.
- loop reproducirá el archivo una y otra vez.
- muted quitará el audio del archivo.
- preload define si el reproductor se debe cargar cuando se cargue la página.
Acuerdate que para centrar la barra de audio tienes que poner antes del código la etiqueta:
<div style="text-align: center;"> y no te olvides de cerrarla con </div>
En el presente caso hemos incluido el siguiente código:
<div style="text-align: center;">
<audio controls>
<source src="https://sites.google.com/site/marinovassite/home/Katie%20Melua-Halfway%20Up%20The%20Hindu%20Kush.mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
¡Hola usuario de Internet Explorer!, ¿qué crees? aquí se está reproduciendo una canción increíble, pero no puedes oirla porque tu navegador es antiguo :(
</audio>
<source src="https://sites.google.com/site/marinovassite/home/Katie%20Melua-Halfway%20Up%20The%20Hindu%20Kush.mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
¡Hola usuario de Internet Explorer!, ¿qué crees? aquí se está reproduciendo una canción increíble, pero no puedes oirla porque tu navegador es antiguo :(
</audio>
</div>
Trucos para el blog (4)
Centrar el título del blog
Ve a tu administrador o escritorio del blog
selecciona "Tema"
selecciona "Personalozar"
selecciona "Avanzado"
selecciona "Añadir CSS"
incluye el siguiente código (copiar y pegar):
.header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper {text-align: center;}
presiona "Enter"
Acuérdate de "Aplicar al blog" (arriba a la derecha)
Trucos para el blog (5)
Modificar la separación entre la columna de la derecha y la central o entre la de la izquierda y la central de tu blog
Ve a tu administrador o escritorio del blog
selecciona "Tema"
selecciona "Personalozar"
selecciona "Avanzado"
selecciona "Añadir CSS"
incluye uno o los dos siguientes códigos (copiar y pegar):
.main-inner .column-right-inner { padding: 0 35px;}
.main-inner .column-left-inner { padding: 0 35px;}
cambiando el 35 por la separación que tu deseespresiona "Enter"
Acuérdate de "Aplicar al blog" (arriba a la derecha)
Hola:
ResponderEliminarEn los dos últimos trucos le diré algo: los cambios que se hacen con CSS hay que plantearlos en función de las "clases" o "ids" de la plantilla que se esté usando y cada plantilla tiene las suyas propias, esta muy bien que compartas tus experiencias pero te diré algo sobre el siguiente CSS:
.main-inner .column-right-inner{ padding: 0 35px;}
.main-inner .column-left-inner{ padding: 0 35px;}
Las clases son lo que esta en negrita, si a la plantilla que se aplica no son exactamente iguales no funciona
Gracias por la aclaración, entonces solo me queda decir que al menos en la plantilla "Tema Picture Window. Con la tecnología de Blogger" que es la que yo uso, sí funciona.
Eliminar