¡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