La venganza de Ariadna Manual de perdidas ¿Y si fuéramos nosotros? La destructora. Ruinas y Cenizas El tiempo esta próximo Rojo y Oro Historia de una flor Un encantamiento de cuervos La curva de tu sonrisa pinceladas de Harmonia Arritmia Chico conoce a chico Butter Donde quiera que estés A todos los chicos de los que me enamore El fénix de hielo El pergamino de la reina El sacamantecas Blackwood El elfo de Wellindor

miércoles, 14 de noviembre de 2018

De manual #1: Imágenes en el blog


¡Hola Viajantes! Hace mucho que no os traía ninguna entrada con mini ayuda. Esta la voy a dedicar a una pregunta que me hacen mucho vía Instagram: ¿cómo puedo poner las fotos en los laterales? Ya sean fotos de las portadas de los libros o de las editoriales con las que se colabora. Voy a ir explicándoos paso por paso y mediante fotos, tanto la opción que tenía anteriormente (foto parada) como la actual (foto en movimiento). ¿Preparados? Vamos.

Paso 1. Para poder poner la foto necesitas subirla a una web que te aporte un enlace. La web que yo utilizo es tinypic.com, es la que mejor me ha funcionado y la más sencilla de manejar.
Cuando estás aquí solo necesitaras subir una foto dándole a seleccionar archivo después vas a cambiar tamaño para adaptarlo a lo que más te convenga, yo suelo utilizar el de Avatar para las editoriales y el de Thumbnail para las fotos de portada. Pinchas sobre cargar ahora, puede que te salga lo típico de poner una palabra/frase y ya obtienes el enlace.

Concretamente te van a salir 4 enlaces diferentes pero nos quedamos con el primero que pone: dirección HTML para sitios Web, hay que copiar el enlace entero, sin dejarte ni un punto atrás.

Paso 2. Ya tenemos nuestro link, ahora solo necesitamos donde colocarlo. Accedemos a nuestro blog, vamos al apartado de Diseño, una vez aquí dentro tenemos que buscar ya sea en el lateral o en la barra de arriba horizontal: añadir un gadget

Saldrá una venta emergente y aquí tendremos que buscar donde pone HTML/Javascript, le damos al símbolo de + de la derecha y listo.

Después de pinchar sobre el + nos aparecerá una pantalla como la de abajo y si se quiere se puede poner un título o no hace falta. Lo que manejaremos más será la parte de contenido, en este sitio iremos poniendo los enlaces.

Paso 3. Ahora que está todo listo toca la parte importante: el link.

3.1 Imagen sin movimiento.

Hemos copiado el enlace de tinypic y lo colocamos en contenido, tendremos: 

<a href="http://es.tinypic.com?ref=nweag7" target="_blank"><img src="http://i68.tinypic.com/nweag7.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

Las letras en rojo serán suprimidas y colocaremos el enlace de la entrada correspondiente a la foto que subimos. Las letras en azul recomiendo no tocarlas por nada del mundo o no os aparecerá la foto. Y las letras en color verde las podemos sustituir si queremos y poner el nombre del libro o editorial.

3.2 Imagen con movimiento.

No sé exactamente de donde saque el código pero creo que me lo pasó una compi de grupo ya que no me servía ninguno de los que encontraba por internet.

<center><div class="widget-content">
<marquee direction="left" scrollamount"4" style=background- text-align:center; width: 600px;height:190px;border:0px solid #f2fbef;padding:1px" onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" >

Con el código hay que tener mucho cuidado ya que si quitamos o ponemos aunque sea una coma de más, se cae entero. Hay cosas que ponemos cambiar como la dirección (direction), tambien la parte de width y height, con ello manejamos el largo y ancho que van a recorrer las fotos. Luego tenemos scrollamount, esto nos indica la cantidad de pixeles por movimiento, yo deje 2 ya que venía por defecto pero puedes ir probando el que te venga mejor. Luego esta scrolldelay este apartado nos va a indicar la velocidad a la que va a ir la foto, yo lo tengo puesto a 100, si lo quieres más lento solo tienes que poner un número mayor y si lo quieres más rápido tendrás que poner uno más bajo.

Una vez listo esto no lo volvemos a tocar, se quedara de forma permanente, ya si en un futuro quieres ir modificando algunas de las cosas que te he marcado ya es tema aparte.

¿El enlace de tinypic me vale para este formato? Sí y no. Lo que yo hago es copiar el enlace tal cual y luego insertarle modificaciones porque sino no sirve.

LINK TINYPIC: <a href="http://es.tinypic.com?ref=nweag7" target="_blank"><img src="http://i68.tinypic.com/nweag7.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

ENLACE MODIFICADO: <a href="http://viajantedetinta.blogspot.com/2018/10/resena-53-chico-conoce-chico.html"><img style="width:130px; height:190px;" src="http://i68.tinypic.com/nweag7.jpg" border="0" alt="Chico conoce a chico" /></a>

Como veis, cambiamos lo que esta en rojo y ponemos nuestro enlace, tras esto vamos a borrar lo que esta en amarillo (target="_blank"). Entre ><img y src vamos a colocar style="width:130px; height:190px;" esto podemos modificarlo a lo que mejor le convenga a nuestro blog (las medidas del blog, de la columna o fila…). Y el resto es igual.
Le daremos a guardar, una vez que se cierra nos saldrá de nuevo la pantalla de Diseño le daremos a guardar disposición y listo.

Espero que os pueda ayudar y cualquier duda puedes dejármela en los comentarios y a través de MD en Instagram o twitter. PD: si queréis algún tema en particular del que os hable dejádmelo en los comentarios y os lo traeré lo más rápido que mis dedos puedan teclear.


No hay comentarios:

Publicar un comentario