Disponer de un diseño de calidad de tu web o blog es fundamental para el desarrollo de tu marca. El sitio web se convierte en la carta de presentación de tu proyecto. Del mismo modo que se juzgan personas por su apariencia, se juzgará y decidirá si tu negocio es interesante por el diseño de tu página web, al margen de que tus productos lo sean.
Existen estudios contrastados que señalan que la primera impresión es crítica:
- El 75% de los usuarios evalúan la credibilidad de un sitio basándose en el diseño web.
- El 68% de los compradores desconfían de un sitio que no parece profesionalmente diseñado.
Para atraer más visitantes y lectores a nuestro blog, pagina o sitio web, también utilizamos las herramientas que nos ofrecen los distintos gestores de contenido.
Ese plus de visibilidad nos los proporcionan los widgets o gadgets que permiten incrustar y presentar información relevante para el usuario final.
Blogger pone a nuestra disposición un gadget de muy fácil implementación y de máximo interés: Un carrusel o slider de imágenes con los artículos o entradas recientes.
Éstos son los pasos a seguir:
- Selecciona la entrada Diseño del panel principal de Blogger.
- Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
- Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:
HTML/Javascript
Añade una característica de un tercero u otro código a tu blog.
- Introduce el Título del widgets (por ejemplo Entradas recientes)
-
En la caja Contenido pega el siguiente código:
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/> <div id="slider-rotator" class="slider-rotator loading"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script> <script type="text/javascript"> makeSlider({ url: "https://www.tecnoblog.guru", // Add your blog URL numPost: 5, showDetail: true, summaryLength: 200, titleLength: 50, showThumb: true, squareThumb: false, autoHeight: false, crossFade: true, showNav: true }); </script>
- Por último hacemos click sobre el botón Guardar
Nota importante
El autor de este widget, Taufik Nurrohman compartió libremente el código necesario para su funcionamiento pero los directorios de acceso público dónde se alojaban estas librerías ya no están disponibles.
Todos aquellos que quieran introducir el carrusel o hayan incorporado el carrusel a su blog y deseen seguir utilizándolo, tienen que realizar unos pequeños ajustes para que vuelva a funcionar de forma correcta. Los pasos a seguir son:
- Descagar el fichero comprimido en formato zip: https://storage.googleapis.com/google-code-archive-source/v2/code.google.com/blogger-json-experiment/source-archive.zip
- Una vez descomprido, acceder al directorio resources/blogger-feed-rotator-plugin
- Por último, subimos los ficheros default-style.min.css y blogger-feed-rotator.min.js a un directorio público para referenciarlos desde el blog.
Es decir, reemplazamos http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/ por nuestra nueva ruta.
Vamos a analizar los parámetros de la función Slider:
- url: añade la url de tu blog.
- numPost: número de artículos a mostrar en el carrusel.
- showDetail: 'false' si queremos ocultar el título y descripción del post.
- summaryLength: número de caracteres a mostrar del resumen del artículo.
- titleLength: 'auto' por defecto. Con este parámetro especificamos el número de caracteres del título.
- showThumb: 'false' para ocultar los thumbnails del artículo
- squareThumb: 'true' para mostrar la imagen en miniatura (thumbnail) a escala, con su ancho original y la relación de altura
- autoHeight: 'true' para ajustar la altura del elemento que se muestra.
- crossFade: para hacer el efecto de transición de imágenes de forma simultánea.
- showNav: 'false' para ocultar la barra de navegación (contador numérico y flechas anterior y siguiente).
- newTabLink: 'true' para abrir el link en una nueva ventana.
- labelName: para especificar el nombre de la etiqueta del post o 'null' (por defecto) para mostrar todos los mensajes.
- thumbWidth: tamaño en píxeles del thumbnail del post.
- noThumb: especificamos una imagen por defecto para aquellos post que no tienen miniatura.
- hoverPause: 'false' para que la presentación de imágenes siga corriendo aunque pasemos el ratón por encima.
- interval: intervalo entre slides (en milisegundos).
- speed: velocidad de presentación entre slides (en milisegundos).
-
navText: {
prev: "<", // Texto para mostrar el botón Anterior de navegación
next: ">" // Texto para mostrar el botón Siguiente de navegación
},
Podéis ver el ejemplo funcionando en la columna central del blog, bajo la sección Entradas Populares (visible en la versión de escritorio).
Me ha encantado esta entrada, ya la he aplicado a mi blog.
ResponderEliminarMuchas gracias.
Gracias a ti Yinda :)
ResponderEliminarMe alegro mucho de que te haya servido.
Un saludo!!
Muchas gracias, ya lo implemente en mi blog.
ResponderEliminarFácil y rápido!
ResponderEliminarMuchas gracias por comentar Ana, saludos :))
Muchas gracias, me encantó!
ResponderEliminarGracias a ti Lysmar, me alegro de que te sirva.
ResponderEliminarUn saludo!!
Necesito más información para poder ayudarte Proyecto X.
ResponderEliminarFacilítame la url de tu blog y le echo un vistazo. Gracias.
Hola, lo implemente pero cambia su buen aspecto al agregarle más de 8 entradas, podrá hacerse algo al respecto. Gracias
ResponderEliminarhttp://tecnolisto.blogspot.com/
Un widget estupendo, pero no sé por qué a menudo no se acaba de cargar en mi página. He probado con diferentes parámetros, en cuanto a la longitud del texto, o número de posts a visualizar, introduciendo lo de "speed", pero finalmente lo he dejado como nos has ido recomendando tú, más o menos, y ralentiza mucho la carga del blog. ¿A qué se puede deber? Gracias y un saludo.
ResponderEliminarBuenos días Rebeca,
ResponderEliminarhe estado revisando tu blog y lo que ocurre es que se produce un pequeño retraso en la carga del script externo (jquery) y eso provoca que no encuentra la llamada a la función makeSlider (en fin, asuntos de programación). Por eso a veces funciona y otras no, dependiendo de la velocidad de carga en tu página.
La solución es fácil, introduce el siguiente código javascript resaltado en negrita:
<script type="text/javascript">
$( document ).ready(function() {
makeSlider({
......
});
});
</script>
Muchas gracias por visitar el blog :))
Un saludo. Chema.
Hola puse el slider y esta genial pero en la barra de menu yo ya tenia otro slider y cuando pongo el tuyo en una columna de blog deja de funcionar la otra , como podre solucionarlo?
ResponderEliminarGracias.
Buenos días Rossy, he estado revisando tu blog y lo que ocurre es que se produce un conflicto por la carga de versiones distintas de la librería jQuery.
ResponderEliminarEn ese caso, hay que hacer ajustes para que funcione.
El código que tienes que copiar en el widget te lo he enviado a tu dirección de correo electrónico.
Un saludo!!
Hola, me gusta el slider en carrusel que has compartido porque ha sido muy sencillo de implementar en mi blog en un widget, ya que prefería no tener que tocar la plantilla de HTML. Solo quería preguntarte si hay alguna posibilidad de poder poner solo las flechas sin la numeración, que no me gusta mucho ya que queda muy oscura en mi blog. Y por otro lado si es posible ajustar el slider al ancho del blog para poder ponerlo debajo de la cabecera y por lo tanto que se puedan poner en horizontal varias de las entradas. Ya sé que es mucho tema para un solo widget, pero te lo pregunto de todas formas por si se pudiera desarrollar ;) Te dejo la URL para que me puedas indicar algo y te doy las gracias de antemano: http://elrinconvintagedekarmela.blogspot.com.es/
ResponderEliminarUn saludo¡¡¡
Hola Karmela, me alegro de que te haya sido útil el slider de Entradas recientes y enhorabuena por tu blog!
ResponderEliminarYa veo que has solucionado lo de las flechas, poniendo el parámetro 'showNav' a false.
En cuanto a la cuestión de ajustar el slider al ancho del blog, entiendo que se puede hacer sin mayor dificultad.
Tendrías que ajustar su tamaño al ancho de la página, del mismo modo que el tamaño de las imágenes.
Modifica el siguiente código del widget, con el tamaño (atributos width, height) que desees:
<style type="text/css">.slider-rotator-nav{font-size:9px} #slider-rotator{width:150px!important;height:250px;} .image-wrapper img{width:150px!important;height:150px!important;}</style>
Saludos!!
muchisimas gracias funcionando de maravilla
ResponderEliminarTengo puesto el slider de Entradas, quisiera hacerlo mas pequeño, pero no logro ver donde tengo que cambiar las medidas por mas que miro no encuentro donde esta el texto que veo en la contestación a Karmela. Un saludo.
ResponderEliminarHola de nuevo Jose María, gracias por contestar. Perdona pero no sé a que código del widget te refieres. En el que nos has dejado arriba no hay esa parte de código¡¡ Con lo que me resulta difícil modificarlo. No sé si te refieres a que inserte el código completo que me has dejado ahí. Sería posible que me dejaras todo el widget completo con esto insertado para que lo pueda copiar y pegar en mi blog??? Es que cada vez que lo modifico, se estropea y me toca volver a ponerlo y modificar cada atributo uno a uno¡¡ ;) Gracias¡¡
ResponderEliminarBuenos días Radio Rebelde Republicana y Karmela!
ResponderEliminarTenéis toda la razón, he sufrido un lapsus :( Sorry.
Al final del código de vuestro carrusel tenéis que copiar este bloque de código de presentación o css:
<style type="text/css">.slider-rotator-nav{font-size:9px} #slider-rotator{width:150px!important;height:250px;} .image-wrapper img{width:150px!important;height:150px!important;}</style>
Y por supuesto, "jugar" con los tamaños (width, height) según vuestras necesidades.
Saludos!!
Gracias Jose María, ahora si que funciona, pero desgraciadamente no me sirve para mi propósito. Me explico. Lo que yo quería era que salieran varias entradas del blog seguidas en carrusel una detrás de otra en horizontal debajo de la cabecera del blog, ajustándose a todo el ancho que son 1200 px por un alto de 250 px como máximo, para que no le quite protagonismo a las entradas. De esta manera solo sale una pequeña, y como no se puede acoplar el tamaño de la imagen a todo el ancho de la cabecera sin que se deforme, queda muy soso y raro. Espero haberme explicado bien. No sé si se puede acoplar la imagen a todo ese ancho y alto que te digo y que salga normal, si hay algún atributo que lo consiga, porque también quedaría chulo con una sola imagen, de la misma forma que lo hace tal y como está ahora, pero debajo de la cabecera. Pero tú eres el experto y a ti me encomiendo¡¡ jajajaja
ResponderEliminarMuchas gracias y perdona que sea tan pesada, pero es que deseo mucho tener un slider así y me gusta mucho el funcionamiento de este y su sencillez para implementarlo¡¡¡ ;) Saludos
Hola Karmela,
ResponderEliminarsi redimensionamos la imagen original aumentando su tamaño, vamos a perder calidad.
Hay una web que permite aumentar la resolución de una imagen sin perder calidad.
A lo mejor te sirve para algunas de tus imágenes.
Eso sí, tiene algunas limitaciones:
- no se pueden subir archivos de mas de 3MB y la máxima resolución para ampliaciones es 1280x1280.
La url: http://waifu2x.udp.jp/
Un saludo!
Muchas gracias José Maria. Al final he decidido dejarlo tal y como está. Me resultaba complicado redimensionar cada imagen principal de cada post cada vez que publique! Jajaja. Gracias por todo y espero que pases una Feliz Navidad! Un abrazo ;)
EliminarGracias Jose Mari por tu contestación, ahora si me queda bien, llenando todo el espacio y las fotos bien ajustadas al interior, de esta manera no me distorsiona con la estética del resto de la pagina. El color del interior se puede cambiar también si no quieres que sea blanco?. Gracias de nuevo y un saludo.
ResponderEliminarSi, ya he visto que lo has ajustado perfectamente. Enhorabuena Radio Rebelde!!
ResponderEliminarPara cambiar el color del fondo tienes que añadir el siguiente estilo dentro de la etiqueta <style type="text/css">
.slider-rotator .slider-item {background-color:#714088!important}
El color #714088 lo puedes cambiar por el que mejor se adapte a tu diseño.
Puedes obtener los códigos de colores html en hexadecimal en:
Códigos de colores HTML
Gracias por hacernos las cosas tan fáciles. Un saludo.
ResponderEliminarNo hay de qué Karmela :))
ResponderEliminarFelices fiestas!!
GRACIAS CHAVAL ME SERVICIO ESTE ES MI BLOG http://foxwrestling.blogspot.pe/
ResponderEliminarGracias a ti Roly, por pasarte por el blog :))
ResponderEliminarHola. Gracias, de mucha ayuda. Una consulta. Cómo podría hacer para que en lugar de las entradas más recientes muestre las entradas con una determinada etiqueta.
ResponderEliminarSaludos
Hola una pregunta como hago para modificar el ancho y el alto del widget? agradecería la respuesta, saludos
ResponderEliminarBuenos días y gracias por participar en el blog :))
ResponderEliminarContesto a las dos últimas dudas:
1- El widget está diseñado para mostrar las últimas entradas del blog, definidas por el parámetro numPost. No está pensado para mostrar artículos por etiquetas o categorías.
2- Si queremos modificar el aspecto del widget (borde, ancho, alto, etc) tenemos que añadir un estilo al final del widget, del tipo:
<style type="text/css">#slider-rotator{width:350px!important;height:340px!important}</style>
Un saludo y gracias de nuevo!!
¡Qué belleza de carrusel, de veras me alegró la noche!....mis entradas populares se ven fabulosas. Muchas gracias.
ResponderEliminarIngrid Zetterberg
Gracias a ti Ingrid ;)
ResponderEliminarUn saludo!!
me gusto mucho ese carrser pero quisiera hacerte una pregunta a ver si es posible que en ves de solo verse un solo cuadro y las imagenes pasando se vieran mas de uno si es posible me podrias decir que puedo hacer de antemano muchas gracias
ResponderEliminarHola Ruby, muchas gracias por visitar el blog :))
ResponderEliminarSiento decirte que el widget está diseñado para mostrar un sólo marco de presentación de imágenes.
Saludos!!
Hola Jose Maria, me ha gustado tu carrusel es muy practico pero quiero colocarlo con las entradas populares de varios blogs que tengo en mi blog principal. Estoy utilizando el codigo que has puesto directamente en la plantilla html para que tome algunos parametros de mi plantilla original, pero el problema es que cuando intento colocar los otros no me los admite, me gustaria colocar varios carrusel de mis blogs. te dejo mi pagina http://www.educarteesarte.com.ve/ alli puedes ver que esta un solo carrusel abajo donde dice nuestras secciones, porque el carrusel de arriba lo tengo con otro script. Te agradecería mucho si me pudieras ayudar. Saludos...
ResponderEliminarBuenos días educarteesarte,
ResponderEliminarmuchas gracias por visitar el blog :))
Sienteo decirte que el carrusel está diseñado para mostrar entradas con imágenes en formato slider de un blog.
Un saludo!!
Hola Jose María, soy Karmela que hace tiempo tengo instalado tu gadget en mi blog. Desde hace unos días comenzó a fallar, no sé si es porque los de blogger están cambiando configuraciones o porque, pero hoy directamente ya no se ve. Antes se quedaba como pensando y en momentos no cargaba, pero esta tarde dejó de funcionar por completo. Me gustaría saber si le está pasando a todo el mundo o es solo a mí, la verdad... Tú sabes si es un fallo puntual de blogger o es porque el código se ha estropeado. No sé que pensar, pero queda un hueco muy feo donde estaba ya que se ve nada mas entrar en el blog. Te dejo el enlace para que veas que no se ve: http://elrinconvintagedekarmela.blogspot.com.es/
ResponderEliminarSi mañana sigue sin funcionar me veré obligada a quitarlo porque la estética para mi es muy importante, aunque no quiera ya que me voy de viaje unos días y no voy a poder modificar por temas de conexión... :( Espero tu respuesta¡¡ Gracias.
Hola Karmela,
ResponderEliminaracabo de comprobar que el widget tipo carrusel que proporcionaba Blogger ha dejado de funcionar.
No sé si se trata de un bug temporal o dejará de funcionar definitivamente. Voy a tratar de averiguarlo pero al ser un gadget experimental es posible que lo hayan desaprobado.
Saludos!!
Ohhh que pena¡¡¡ Pues entonces, como me marcho mañana por un tiempo largo, lo voy a quitar, que queda feo, pero vamos que me da rabia porque me encantaba¡¡¡ Pues vas a tener que buscar alguno similar para poder implementarlo de nuevo, porque nos venia genial a los que lo teníamos¡¡. A mi vuelta miraré a ver si has encontrado uno parecido que lo supla.. Muchas gracias y te sigo... Saludos¡¡
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarNO sirve
ResponderEliminar¿me puedes indicar qué es lo que no funciona, todoaquibyalex?
ResponderEliminarBuenas Jose Maria, al final quite el carrusel por que no consigo hacer los cambios, como indicas en la pagina, no se si se puede hacer de una forma sencilla como estaba antes, ya me dirás un saludo.
ResponderEliminarHola Radio Rebelde!
ResponderEliminarcomo indico en el artículo, se trata de subir los ficheros a un directorio público y después referenciarlos desde el blog.
Si te sirve, éste sería el bloque de código modificado que hace que funcione correctamente el carrusel (debes cambiar la url por la de tu blog)
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jmacuna/slider-rotator/master/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jmacuna/slider-rotator/master/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://jmacuna73.blogspot.com", // Add your blog URL
numPost: 5,
showDetail: true,
summaryLength: 200,
titleLength: 50,
showThumb: true,
squareThumb: false,
autoHeight: false,
crossFade: true,
showNav: true
});
</script>
Gracias José Maria, ahora si me funciona, se ve que no lo estaba haciendo bien.
ResponderEliminarMuy buenas,
ResponderEliminarEn primer lugar gracias por el código (así como a su creador por el desarrollo de este slider)
Lo he instalado perfectamente en nuestra web pero nos gustaría saber si se puede cambiar el color de los enlaces y texto así como el tipo de fuente y tamaño de la misma.
Muchas gracias.
Hola Peter Quint,
ResponderEliminargracias por visitar el blog y me alegro de que os haya servido el slider :)
Para cambiar el aspecto del mismo, sólo hay que añadir al final del código las siguientes líneas (en negrita) y jugar con las numerosas características de presentación que proporcionan los estilos css:
<style type="text/css">
.slider-rotator h4 {
font-size: 120%;
color: #3B4B7E;
}
.slider-rotator p {
color: #616161;
}
</style>
dónde
slider-rotator h4 hace referencia al link o enlace al post y
slider-rotator p encapsula la descripción del artículo.
Saludos!!
Buenas de nuevo y gracias por la respuesta tan rápida.
ResponderEliminarTodo perfecto salvo que se nos olvidó comentar si se podía cambiar los colores de los "cuadraditos" bajo la imagen (los que permiten mover el slider) y el color del link al seleccionar tanto el texto como el botón para ajustarlos más a la web.
Muchas gracias y enhorabuena por el blog.
Hola Peter,
ResponderEliminarse puede cambiar la presentación de cualquier elemento del slider.
Para lo que planteas (cuadraditos, color link):
.slider-rotator-nav a{background-color:#333;}
.slider-rotator-nav a.current{background-color:#3B4B7E}
.slider-rotator h4 a:hover{color:#ff8c36}
Siempre puedes utilizar el inspector de Google Chrome para poder seleccionar el elemento a modificar y realizar pruebas antes de subirlas al blog. Te paso una url de ejemplo pero existen infinidad de tutoriales:
http://blog.hostdime.com.co/como-utilizar-las-herramientas-para-desarrolladores-de-chrome/
Saludos!!
De nuevo muchas gracias. Este es el primer slider de este tipo que funciona de verdad. La mayoría o tienen muy poca personalización o directamente las rutas han sido eliminadas del directorio de su creador, así que de nuevo enhorabuena y gracias.
ResponderEliminarPor último, y sintiendo ser un poco pesado, en ocasiones el slider no funciona (de manera temporal) en cualquier dispositivo. ¿Puede ser debido a dónde está alojados los archivos? (en nuestro caso Google Drive)
Un saludo.
No te preocupes Peter ;)
ResponderEliminarHe estado observando la consola de errores de vuestro blog y no devuelve ningún error lo que hace pensar que el script debería funcionar en cualquier dispositivo. Tal vez, por problemas en la conexión o red, en ocasiones, no se produzca la carga de esos ficheros alojados en Google Drive pero no sabría responderte con exactitud.
Otra cosa, os recomiendo que leáis el siguiente artículo: Alojar páginas web con Google Drive no será posible a partir del 31 de agosto de 2016
Por cierto, el slider os ha quedado muy chulo. Enhorabuena a vosotros!!
Buenas de nuevo y gracias por tu ayuda.
ResponderEliminarEn Google Drive tan sólo tenemos los dos archivos que hacen funcionar el slider. ¿Sería necesario subirlos a otro tipo de web (veo que recomiendas GitHub) o sólo afectaría a los que tienen alojada la página entera?
Saludos.
Hola Borja,
ResponderEliminaren su web lo exponen de forma muy clara:
- después del 31 de agosto, cualquier fichero o página web cuya url contenga https://www.googledrive.com/host/... dejará de funcionar.
Un saludo!!
Hola, me encanto el carrusel, muy buena tu pagina. te consulto algo, como hago para eliminar ese texto que aparece al posicionarme sobre el enlace? ("Texto Alternativo" creo que es) ya que muestra el titulo de la entrada.
ResponderEliminarY como hago para que el enlace no se ponga sobre la imagen cuando pongo
showDetail: false,
Gracias, saludos.
Hola Franco, gracias por visitar el blog :)
ResponderEliminarPara tu propósito, bastaría con añadir al final del código de script, antes de su cierre (</script>) la siguiente instrucción:
$('.slider-item a').title = '';
Por cierto, no se trata de un texto alternativo (se usa para describir las imágenes en caso de que no se puedan cargar en la página) sino de un título definido con la etiqueta html title.
Un saludo!!
hola, gracias por la respuesta, pero sigue apareciendo el letrero ese.
ResponderEliminar(https://4.bp.blogspot.com/-UvmH3ECvjnQ/V6ijxXa9KJI/AAAAAAAAF3Q/6_f_DSZUAmAW7mMbKNg5RRLY66_nZiDXQCLcB/s1600/Imagen1.png)
y de paso te consulto
Y como hago para que el enlace no se ponga sobre la imagen cuando pongo
showDetail: false,
Gracias, saludos.
Hola, como hago para que el enlace habra en otra ventana, puse
ResponderEliminarnewTabLink: true,
pero abre el enlace en otra pestaña y necesito que sea en otra ventana y que la ventana tenga medida especifica. Gracias
La solución a vuestras preguntas:
ResponderEliminar- modificamos la función makeSlider para añadir el parámetro onInit de la siguiente forma (en negrita):
makeSlider({
url: "http://jmacuna73.blogspot.com", // Add your blog URL
numPost: 5,
showDetail: true,
summaryLength: 200,
titleLength: 50,
showThumb: true,
squareThumb: false,
autoHeight: false,
crossFade: true,
showNav: true,
onInit: function(){
$('#'+this.containerId).find('a').attr('title',''); //Atributo title de los links
$('#'+this.containerId).find('a').click(function(){ //Abro los links en ventanas de 700x600 (ancho/alto)
window.open(this.href, 'w', 'width=700,height=600');
return false;
});
}
});
Saludos!!
Buenas de nuevo,
ResponderEliminarAl parecer ya no se pueden subir imágenes a Picasa y hay que hacerlo a través de Google Photos para que las imágenes del carrusel sean visibles. El problema es que hoy hemos añadido una nueva entrada con la imagen subida a Google Photos y dicha imagen no se ve.
Tampoco se ve en las vistas dinámicas: http://www.miedoteca.com/view/magazine Como verás la imagen de la primera reseña no es visible desde la página principal.
Investigando un poco al parecer en Photos la URL que te da no tiene extensión .jpg por ejemplo. Añadiendo la coletilla "?.jpg" al final de esta URL tampoco se consigue ver la imagen en el carrusel.
¿Alguna sugerencia?
Gracias de nuevo.
Perdona el doble comentario.
ResponderEliminarAl parecer Google Photos transforma el archivo original de la imagen en una con formato .WEBP (es la primera vez que lo oigo) pero no hay forma de que la suba en JPG. y el carrusel no la reconozca. ¿Podría ser ese el problema?
Hola Borja,
ResponderEliminarla verdad es que cuando necesito una imagen de portada o thumbnail en un nuevo post, lo que hago siempre es utilizar una imagen que me he descargado en local y desde las opciones de edición de Blogger subirla desde ese directorio local.
Lo que puedes hacer para solucionar ese inconveniente es bajarte esa imagen en formato WEBP y abrirla con un editor gráfico (si usas Windows, el programa Paint te servirá). A continuación, guardas la imagen con extensión png.
Por último, sube esa imagen a Blogger y la referencias en tu artículo.
Un saludo!!
Gracias por la respuesta, Jose.
ResponderEliminarAl final la solución más fácil es la que comentas. Yo siempre subía a Picasa las imágenes y allí me hacía con la URL para meterla en el editor de Blogger. Ahora que Picasa no está disponible (lo está pero no te deja subir nada) hay que hacerlo por Google Photos. Me he fijado que la imagen aparecía ahora con una señal de prohibido como si sólo la pudiera ver yo. He estado trasteando y no hay opción posible para cambiar la privacidad desde Google Photos (desde Picasa si la había, la vamos a echar de menos) así que me he decantado por tu opción, mucho más rápida.
Muchas gracias.
Hola de nuevo, José María.
ResponderEliminarMe ocurre una cosa rarísima en el slider. Siempre que subo una nueva entrada en la web, la primera imagen del slider sale cortada pero a partir de la segunda sale todo perfecto (texto e imagen) Lo curioso es que si estamos en la imagen 10, la siguiente vuelve a la 1 (la que da el problema) pero ahora se muestra bien. Es un poco difícil de explicar.
Pasa siempre que visitas la página.
Te dejo un ejemplo gráfico. Primera entrada con imagen cortada: http://oi67.tinypic.com/2lk5ic6.jpg
La siguiente ya sale bien: http://oi63.tinypic.com/mww115.jpg
Y lo curioso es que si retrocedes o esperas a que terminen las 10 entradas, la primera sale bien: http://oi67.tinypic.com/20kt20p.jpg
Hola Borja,
ResponderEliminarlo primero es pedirte disculpas por la demora en la contestación pero he estado fuera y no he podido responderte.
He observado el slider y efectivamente se produce ese efecto que comentas y es debido al parámetro autoHeight que lo tienes puesto a true y no funciona de forma correcta. Si lo pones a false verás como el comportamiento en la visualización de las imágenes es el adecuado.
Un saludo!!
Muy buenas,
ResponderEliminarTranquilo, yo también he estado fuera unos días y no he podido leer la respuesta.
Al final era eso que comentas, era una tontería y me ha dado un montón de quebraderos de cabeza y como dejó de funcionar de repente, pensé que era algo más grave.
¡Muchas gracias!
Saludos, Felicitaciones muy Bueno este Gadget, lo he implementado pero no me Muestra las Imagenes. http://bloggerozweb.blogspot.com
ResponderEliminarHola,
ResponderEliminarno te funciona porque no tienes suficientes entradas publicadas, creo que sólo tienes un artículo.
Un saludo!
hay alguna forma de que en el carrusel slagan mis entradas más populares? qué tendría que modificar?
ResponderEliminarHola Bizarruz,
ResponderEliminarel carrusel está diseñado para mostrar todas las entradas del blog.
Gracias por visitar el blog.
Un saludo!!
Hola Amigo lo implemente pero no me aparecen las entradas
ResponderEliminarHola Villa,
ResponderEliminarsi sustituyes esta url:
blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js
por esta otra:
cdn.jsdelivr.net/gh/jmacuna/slider-rotator@master/blogger-feed-rotator.min.js
debería funcionar el widgets.
Ya me dices.
Un saludo
Hola, a mi no me funciona alguien me ayuda por favor
ResponderEliminarHola Jose, primero decirte que muchísimas gracias por compartir, tienes un gran contenido^-^
ResponderEliminarPero lastimosamente el widget no me funciona, que pena u_u
Hola, ¿me podéis indicar la url dónde habéis implementado el widgets y no os funciona?, así le puedo echar un vistazo y tratamos de solucionarlo.
ResponderEliminarGracias!
Tengo puesto el slider de Entradas, quisiera hacerlo mas pequeño, pero no logro ver donde tengo que cambiar las medidas por mas que miro no encuentro donde esta el texto que veo en la contestación a Karmela. Un saludo.
ResponderEliminarMe podrías indicar el nombre de la plantillas que usas en este sitio. Esta bien minimalista. Me gustaría usarla también. Saludos.
ResponderEliminar