Slider automático para mostrar las últimas entradas del blog (Easy Slider)

2 de mayo de 2012 1111 comentarios ,


Este es un slider que Abu Farhan adaptó del Easy Slider, un slider hecho con jQuery, y que con su adaptación lo ha hecho automático de manera que muestre las últimas entradas del blog tal como el slider automático que vimos hace algunas semanas, es decir, que el slider mostrará las últimas entradas del blog de forma automática, sin necesidad de agregar manualmente las entradas.

Nosotros por nuestra parte, hemos modificado un poco el slider, no mucho en realidad, sólo hemos cambiado la forma como se muestran los resúmenes de las entradas, y en lugar de usar servicios externos para alojar los scripts, los alojaremos directo en la plantilla.

El demo del slider lo puedes ver aquí mismo en esta entrada.

Para poner este slider en tu blog entra en la Edición HTML, y antes de ]]></b:skin> agrega los estilos:
/* Easy Slider (Automático)
-------------------------------------------------------------------- */
#slide-container {
width:480px;
height:320px;
position:relative;
}
#slider {
width:480px;
height:320px;
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}
.slide-desc {
background:transparent url(http://lh3.googleusercontent.com/-jDLwXJiGntk/T29pYcTKb9I/AAAAAAAACUQ/gf-AfWqrTzY/s30/bgtransparent.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
text-align:left;
bottom:0;
width:100%;
z-index:99999;
}
.slide-desc h2{
display:block;
color:#f2f2f2;
font-size:14px;
}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider li {
width:480px;
height:320px;
overflow:hidden;
}
#prevBtn, #nextBtn {
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn {
left:500px !important;
}
#prevBtn, #nextBtn {
display:block;
left:0;
position:absolute;
top:132px;
width:30px;
height:77px;
z-index:1000;
}
#prevBtn a, #nextBtn a {
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://lh5.googleusercontent.com/-KX-r8BDixK4/T6H3kNMb2QI/AAAAAAAACdM/mOwubqm7O8c/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(http://lh6.googleusercontent.com/-tqzRTNYmZk0/T6H4U6ZNmcI/AAAAAAAACdU/MeTCxHfdXqc/s77/flecha-next.png) no-repeat 0 0;
}
/* Estilos de los números */
ol#controls{
margin:8px 25px;
padding:0;
height:28px;
}
ol#controls li{
margin:0 4px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #000; /* Borde de los números */
background:#0B243B; /* Color de fondo de los números */
color:#fff; /* Color de los números */
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1; /* Color de fondo del número activo */
color:#fff; /* Color del número activo */
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
Ahora antes de </head> agrega este script:
<script>
//<![CDATA[
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/sin-imagen.png';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
//]]>
</script>
Lo siguiente será pegar antes de </body> este script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
*/
(function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn',nextText:'Next',controlsShow:true,controlsBefore:'',controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First',firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000,continuous:false,numeric:false,numericId:'controls'};var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery);

$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: false // Cambiar a true si se quiere mostrar la paginación de números
});
});
//]]>
</script>
Por último entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:
<div id="slider">
<script style="text/javascript">
var numposts_gal = 10; // Número de entradas a mostrar
var numchars_gal = 150; // Número de caracteres en el resumen
var random_posts = false; // Cambiar por true si se quieren aleatorios
</script>
<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Cambia el nombre de tu blog donde se indica y listo.
En color naranja puedes ver algunas variantes, una de ellas es que con numeric podemos hacer desaparecer las flechas y en su lugar mostrar una paginación con números para poder navegar por las entradas del slider.
En el último código podrás ver dónde configurar el número de entradas a mostrar, el número de caracteres en el resumen, y si se desea que las entradas aparezcan de forma aleatoria.

Si deseas cambiar el tamaño del slider cambia todos los width:480px; y height:320px; que encuentres, incluyendo los de esta área:
<img src="' + thumburl_gal + '" width="480px" height="320"/>

Las flechas son imágenes, así que si deseas modificarlas en color o forma tendrás que cambiar las URLs que se encuentran en el primer código.

Como puedes ver, es un slider con muchas ventajas, la principal es que muestra el contenido de forma automática, sin necesidad de estar agregando entrada por entrada; pero además, la posibilidad de elegir la paginación y las entradas de forma aleatoria le dan un extra.


Vía | Abu Farhan


1.111 comentarios en:

" Slider automático para mostrar las últimas entradas del blog (Easy Slider) "

  1. Hola Potro
    Quería compartir un link para agregar un buscador en el blog, incluso podrías agregarlo aquí y mejorarlo ya que sos el experto en esto, te dejo el link para que lo veas "http://www.dominioblogger.com/2012/05/como-agregar-un-buscador-personalizado.html", disculpa si este no era el lugar adecuado para dejarlo, cualquier cosa borras el mensaje, por cierto muy bueno el blog, lo visito siempre que me doy un tiempo, cada día esta mejor, saludos.

    Pablo.

    ResponderEliminar
    Respuestas
    1. De hecho hay dos entradas sobre buscadores y ahí hubiera sido mejor que lo pusieras, pero gracias igualmente ;)

      Eliminar
  2. Excelente potro :) un +10 jeje Saludos y Gracias!

    ResponderEliminar
  3. Hola Potro,

    Sólo quería decirte que Una Línea de Ensayos cumple un año, y que la evolución estética que ha sufrido ha sido gracias a los consejos que he ido viendo por aquí...

    Muchas gracias, un abrazo! :)

    Jose

    http://josearnedo.blogspot.com

    ResponderEliminar
    Respuestas
    1. Feliz aniversario José, que vengan más años con el blog ;)

      Eliminar
  4. Genial Potro, Creo que lo voy a implantar en mi blog pero tengo una duda.

    Cuando agrego el elemento HTML/Javascript abajo de la cabecera del blog, me sale en el lado izquierdo. Como consigo que me salga centrado? He probado con un par de códigos pero no lo logro y seguro que es bastante fácil.

    Saludos y gracias!

    ResponderEliminar
    Respuestas
    1. Hola Pablo, para centrarlo encierra el último código entre <center> </center>

      Eliminar
    2. Hola Potro, muchas gracias por responder pero...

      Cuando hago eso, las imágenes si se me centran pero las dos flechas para pasar foto o volver a la anterior se quedan a la izquierda.

      Puedes echarle un vistazo a como queda en: pruebablogan.blogspot.com

      Gracias!

      Eliminar
    3. Cambia el left:0; que está dentro de #prevBtn, #nextBtn { cámbialo por:
      left:275px;

      Luego cambia el left:500px !important; por:
      left:775px !important;

      Eliminar
    4. Hola Potro,

      Gracias por la ayuda, finalmente los valores para dejarlo bien centrado fueron los siguientes:

      #nextBtn {
      left:1042px !important;

      #prevBtn, #nextBtn {
      left:543px;

      Pero también tuve que modificar el top:132px; por top:330px; Ya que las flechas se me quedaban arriba y con esto las bajé para dejarlas centradas en el slider.

      Mil gracias.

      Eliminar
  5. Está bueno!!! Me gustaría que pusieras un carrusel automático pero que uno apriete las flechas para que avance. No sé si me explico. Abu Farhan tiene varios pero hay que estar poniendo las fotos una por una.
    Saludos Potro.
    Gabriela.

    ResponderEliminar
    Respuestas
    1. Aun tengo pendientes los carruseles, al menos uno habrá que publicar después ;)
      Saludos Gabriela.

      Eliminar
  6. Hola Potro, disculpa por escribirte de nuevo tan rápido. Pero estoy viendo que si pongo el slider bajo la cabecera a ambos lados me quedaría un hueco muy feo en blanco.

    Entonces he pensado ¿Podría agregar el slider en una entrada y ésta dejarla siempre la primera (Como ya explicaste en una entrada tuya)?

    He probado a poner los estilos del HTML/Javascript en una entrada, pero obviamente como pensaba, no a dado resultado. Solo se ve una imagen sin ir cambiando.

    Gracias!

    ResponderEliminar
    Respuestas
    1. Sí se puede poner en una entrada, sólo pega el último código en la entrada que deseas sin cambiar a la pestaña Redactar. Pero, es mejor si lo pones en un gadget y ese gadget lo arrastras para que quede justo arriba de las entradas.

      Eliminar
    2. Hola de nuevo Potro!

      Veo que ahora si me funciona lo de ponerlo en una entrada, pero me ocurre lo mismo que te acabo de decir en el comentario de arriba respecto a las imagenes de las flechas, se me quedan arriba a la izquierda.


      Por cierto, cuando dices de ponerlo en un gadger y colocarlo encima de las entradas es como lo tengo ahora mismo en pruebablogan.blogspot.com , pero si te fijas quedan dos huecos a los lados en blanco muy feos. Por eso decía de ponerlo en una entrada, pero no queda igual de bien, pues sale algo descolocado la barra oscurecida de abajo donde sale el título y la descripción.

      Gracias!

      Eliminar
    3. No, yo te decía ponerlo justo arriba de las entradas, no debajo de la cabecera ;)

      Eliminar
    4. Vaya, pues no tengo ahí hueco para meterlo, imagino que para ello deberé crear una sidebar ahi no? La cosa es que no tengo ni idea de tocar esas cosas en la plantilla jejeje.

      Gracias Potro!

      Eliminar
    5. Casi ninguna plantilla tiene "hueco" ahí, sólo tienes que arrastrar el gadget a ese lugar, es todo lo que hay que hacer ;)

      Eliminar
    6. Ajam, ya entiendo lo que decías, he probado en un blog que tengo con plantilla de Blogger y efectivamente se puede poner ahí el gadget.

      Pero en la plantilla que tengo, que es predeterminada de Btemplates no puedo hacer esto que comentas. Cuando me meto en diseño del blog, se me ve todo hacia abajo, no como la estructura del blog, algo asi:

      Cabecera
      añadir gadget
      .
      .
      ...
      .
      añadir gadget (aquí es donde lo estoy poniendo)
      Añadir gadget (Sidebar izquierdo)
      Entradas blog
      Añadir gadget (Sidebar derecho)

      Todo tal cual te lo he puesto, no me viene la forma de mi blog... Es rara la plantillita de marras jeje.

      Saludos!

      Eliminar
    7. Vaya, siempre que te escribo inmediantamente encuentro solución o tengo algo nuevo que comentarte.

      Decirte que estaba haciéndolo con la interfaz antigua de Blogger y no podía hacer lo que decías. He entrado con la nueva interfaz y efectivamente he podido ponerlo donde decías.

      Eres un fenómeno, voy a probar ahora a poner bien las imágenes de las flechas.

      Un saludo crack!

      Eliminar
    8. Qué gusto que hayas podido hacerlo :)

      Eliminar
  7. Es igual que el anterior que hiciste pero con un aspecto mas bonito y de pagina web.
    Muchas gracias! me pondré este
    Saludos

    ResponderEliminar
    Respuestas
    1. Lo he puesto en uno de mis blogs y he visto que la imagen se deforma al tamaño del slider, se podría cambiar alguna cosa para que solo se cortara la imagen y así no se deformase?
      Gracias! espero tu respuesta

      Eliminar
    2. Quizá se pueda añadir un script que recorte la imagen, pero esos scripts la recortan de forma cuadrada, no rectangular, así que el resultado quizá no sea el mejor.

      Eliminar
    3. Si se recorta justo para las dimensiones del slider seria genial, se puede?

      Eliminar
    4. No, como te decía anteriormente, los recortes en las imágenes de Picasa siempre son cuadrados, nunca rectangulares.

      Eliminar
  8. Me gusta, +10 y voy a probarlo. Un saludo al Potro y a todos sus lectores. Me tocó ser el primero.

    ResponderEliminar
    Respuestas
    1. No el primero, pero me da gusto que haya sido de tu agrado :)

      Eliminar
  9. ¿Se puede modificar el alto y el ancho? Lo he intentado y no puedo... Si se pudiese, sería el slider PERFECTO. De todas maneras, GRACIAS!

    ResponderEliminar
    Respuestas
    1. Claro, en la entrada se habla sobre ello.

      Eliminar
    2. YA a lo he visto, eso me pasa por hacer las cosas rápido. Muchas Gracias!

      Eliminar
  10. Una pregunta si ya tengo puesto el scrip de Jquery no hay que volverlo a poner, verdad

    ResponderEliminar
    Respuestas
    1. Salvo algunas excepciones no hace falta ponerlo de nuevo.

      Eliminar
    2. Esta es la entrada que estaba esperando hace mucho tiempo jeje gracias por compartirla!

      Pero como hago para hacer que no haga conflicto con los otros efectos como es el de ocultar comentarios y con el efecto en el que pones "te gusta ciudad blogger"...

      Cuando pongo esta linea de codigo "script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'" donde indicas que la ponga arriba, el slider funciona bien; pero los otros efectos dejan de funcionar.

      Pero cuando me di cuenta que esa linea de codigo ya la tenia mas arriba lo quite y el slider dejo de funcionar y los otros efectos funcionaron nuevamente... como lo puedo arreglarr!

      o deberia poner al codigo que me das jQuery.noConflict();??? espero me puedas ayudar.

      Eliminar
    3. En efecto Iván, si usas Scriptaculous deberás aplicar unas variaciones en los códigos de jQuery:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
    4. Muchas graciass lo hice y me funciono! ;)

      Eliminar
  11. Hola potro cada vez que te pongo un comentario en tu blog nunca aparecen, seras que no me quieres contestar o estaba como Spam

    ResponderEliminar
    Respuestas
    1. Ninguna de las dos. Todos los comentarios se publican y se responden, lo que sucede es que se están moderando desde hace unas semanas, por eso no lo ves publicado de inmediato.
      Te recomiendo que des click en el enlace que dice "Suscripción por correo electrónico", de esa forma sabrás cuando se haya publicado y respondido tu comentario.
      Saludos.

      Eliminar
  12. Grande el Blog, estoy empezando uno nuevo ya un poco más pro, ¿era necesario hacer un cambio previo?

    ResponderEliminar
    Respuestas
    1. Pues no, si ya tenías otro slider y ya no lo vas a usar puedes quitarlo, sino, no hay que hacer nada más ;)

      Eliminar
  13. Muy bueno!
    Potro, como oculto los comentarios en la versión móvil de Blogger?

    ResponderEliminar
    Respuestas
    1. .mobile .comments {
      display:none;
      }

      Eliminar
    2. No veo puesto el código que te he dado.

      Eliminar
    3. Está puesto en Edición de HTML de mi plantilla, o se coloca en alguna parte que afecta sólo la versión móvil?

      Eliminar
    4. Lo puse en Edición de HTML o como es para la versión móvil se coloca en otro lado? :S
      http://i50.tinypic.com/o89dus.png

      Eliminar
    5. Prueba entonces así:
      .mobile .comments {
      display:none !important;
      }

      Eliminar
    6. Tampoco sirve :s se ven igual

      Eliminar
    7. Ni idea entonces, no sé porqué se resisten los estilos para las versiones móviles.

      Eliminar
    8. Es una lastima, porque todas las psronas que entran dese los móviles comentan desde Blogger y no aparecen los comentarios después en Disqus ):
      Hay alguna manera de eliminar todo el código de los comentarios de Blogger? Y cual es exactamente todo lo que habría que borrar?

      Eliminar
    9. Pues inhabilitando los comentarios dejará de mostrarse también ahí. Si aun así no se quitan entonces elimina todas estas que encuentres:
      <b:include data='post' name='threaded_comments'/>

      Los mismo con esta línea, elimina todas las que encuentres:
      <b:include data='post' name='comments'/>

      Eliminar
    10. Eliminé los 2 códigos, pero se ocultaron los comentarios de Disqus en la versión web y en la versión móvil no pasa nada :s No se que hacer. Se puede cambiar o personalizar la plantilla para móviles? :s

      Eliminar
    11. Te comento también que esto empezó a pasar en la versión móvil cuando Blogger hizo esto nuevo de responder los comentarios y eso, anteriormente en la versión móvil me aparecían siempre los comentarios de Disqus.

      Eliminar
    12. No sé decirte, de Discus poco sé, pero si eliminando eso también se ocultan los de Disqus entonces pocas probabilidades quedan.

      Eliminar
    13. Que bajón, todo por el maldito cambio que hicieron en los comentarios.

      Eliminar
  14. Hola Potro,

    Perdona, que te pida ayuda en esta entrada. Por favor, te puedo comentar lo que me ha pasado con la nueva interfaz, al intentar añadir una etiqueta nueva, de repente han desaparecido de la barra lateral en la pagina principal del blog los siguientes contenidos : los diarios de viajes y las etiquetas. Pero, si entro en diseño, continuan ahi los dos, pero vacíos de contenido. Potro, por favor qué puedo hacer para que de nuevo se visualicen en la página principal.

    Muchas gracias, por toda la ayuda y la paciencia que tienes conmigo.
    Un abrazo y muy agradecido.
    Victor

    ResponderEliminar
    Respuestas
    1. Hola Potro,

      Se ha solucionado el problema, ya se visualizan los contenidos en la página del blog.

      Muchas gracias. Un abrazo.

      Eliminar
    2. No sabría decirte a qué se debe Victor, yo acabo de probar hacer lo mismo que haces en la nueva interfaz, y el gadget de Etiquetas sigue intacto :/

      Eliminar
  15. Potro! esto es justo lo que estaba buscando, pero mira, te explico. En mi plantilla actual tenía otro tipo de slider y lo borré y puse este que en el blog de pruebas me funcionaba de maravilla y bueno, ahora en el blog "serio" jiji no me anda! me queda el espacio pero no se muestra nada. Si pudieras fijarte qué hice mal, estoy casi segura que borré algo mal o que debería borrar algo más pero me tira error. Mi dirección es http://lacinerata.com.ar. Ojalá sea algo sencillo!
    Gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Yo lo veo funcionando sin problemas Pabela, supongo que ya has podido resolverlo.

      Eliminar
    2. jajaaj sii apenas te dejé el comentario veo que andaba! ahora aprovecho a preguntarte algo más. Me ha quedado un espacio espantoso al costado del slider, porque no está sobre las entradas sino bajo el header donde estaba el otro peeeero no sé como hacerle para aprovechar ese espacio en blanco y poner otro gadget con, por ejemplo, videos destacados o publicidad. :D me dices como? porque en el buscador no encuentro cómo agregar justo ahi! Gracias!

      Eliminar
    3. Pues si lo tienes en el crosscol puedes dividirlo, si lo tienes encima de las entradas también:
      http://ciudadblogger.com/2011/05/dividir-el-crosscoll-del-blog.html
      http://ciudadblogger.com/2012/01/anadir-dos-columnas-de-gadgets-arriba.html

      Eliminar
    4. SUper!!! gracias Potro!!! :D

      Eliminar
  16. Hermano, no funciona en mi blog, hice todo. Solo me aparece la ultima entrada que publiqué y quiero que salgan 5, podrías ayudarme? Gracias.

    ResponderEliminar
  17. Perdon, este es mi blog http://tecnoscis.blogspot.com

    ResponderEliminar
  18. Disculpame, he decidido quitarlo porque aparecia en todas las entradas, pero de cualquier forma, gracias! :)

    ResponderEliminar
    Respuestas
    1. Vale, si después te animas a ponerlo recuerda que puedes elegir dónde mostrarlo y dónde no:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  19. Buenas potro! espero que estes muy bien, mirá lo puse, pero se me ven mas los titulos de las entradas en el slider, porque esta con el atributo H1 creo y al poner eso se ve con una iamgen de fondo, mira hechale un vistazo ( http://noticias.vacilandounrap.org/ ) es un nuevo proyecto que se viene con todo! jajja, ya saludos man, ojala se pueda sacar el fondo de los titulos solo en el slider y no en los demas gadgets.... SALUDOS!

    ResponderEliminar
    Respuestas
    1. Hola wn, es un H2, puedes quitarle el fondo si debajo de .slide-desc h2 { agregas:
      background: none;

      Saludos.

      Eliminar
  20. muchas gracias potro, queda de lujo, solo espero que no alente mucho el blog, miren como queda http://yanko0.blogspot.mx/

    ResponderEliminar
  21. Respuestas
    1. Esas camisetas... pues, pues... cuando aduana no me cobre tanto por el envío :P

      Eliminar
  22. Fíjate que este slider me gustó mas que uno anterior que publicaste, ya que es más sencillo, y con un poco de personalización puede verse mono ;D

    A ver si me animo a usarlo en alguna plantilla. Parece que el sitio ya arregló el asunto del malware ¿verdad?, ya no aparece la advertencia en el motor de búsqueda, pero hay que tener cuidado con esto al final

    Alhamdulillah… by Catur

    Ese enlace abajo que dice Catur, entré inocentemente y Malwarebytes, uno de los antivirus que uso, me bloqueó el acceso al sitio por supuestamente contener material malicioso...

    ResponderEliminar
    Respuestas
    1. Podría ser que desde ese sitio es donde se mandó el malware y se generó su problema, a mí a los pocos días que me avisaste me desapareció la advertencia, pero supongo que sí habrá que andar con cuidado, quién sabe qué tantas cosas pueda andar alojando en su hosting.

      Gracias por pasar :)

      Eliminar
  23. muy buena entrada, el unico problema que tengo es que en todos los slice me sale encima el texto de la primera entrada , que debo hace??

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog te sucede eso ernesto? Porque en el blog de tu perfil no veo que nada esté encimado.

      Eliminar
  24. Hola, Potro. He probado con el slider y lo único que me sale es "previos next" bajo la cabecera de mi blog. ¿Algún consejo? Mi blog es montetabooks.blogspot.com. Gracias por adelantado.

    ResponderEliminar
    Respuestas
    1. Hola Daniel, no veo puesto el slider en ese blog.

      Eliminar
  25. Pues a mi no me funciona ...
    y mira que le tengo ganas a este artilugio.
    No hay forma.
    me salen los dos indicadores extremos , pero nada de nada de la foto y/o el texto.

    ResponderEliminar
    Respuestas
    1. Tampoco veo el slider en tu blog, sino lo dejan puesto no podré saber qué puede andar mal.

      Eliminar
  26. Hola Potro, Muy bueno, ya lo implemente en el blog http://videoslanus.blogspot.com.ar, lo que queria saber como hago para agregar un link, hacer un clic e ir a la nota.
    Saludos,
    Fabian.

    ResponderEliminar
    Respuestas
    1. Hola FV, el slider ya tiene incluido el enlace directo a la entrada, sólo haz click sobre la imagen y te llevará a ella. Saludos.

      Eliminar
  27. Se me olvido poner el blog
    http://tabloncentral.blogspot.com/

    ResponderEliminar
  28. Hola potro, he cambiado la plantilla y en la cabecera puedes ver el slider automatico que trae la plantilla por defecto. El problema es que al intentar poner ese slider deja de funcionar (las imagenes se quedan estaticas y el texto sale en la parte superior de la misma, vamos que deja de funcionar, así que no hay manera de hacer funcionar nada que funcione con Prototype y Scriptaculous, como por ejemplo las flechas de subir y el gadget con efecto deslizante. Cuando tengas un rato haber si me haces el favor de inspeccionar la plantilla y me dices que es lo que tengo que eliminar o añadir. Un abrazo

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog PC? ¿Has verificado que no tengas más versiones de jQuery?

      Eliminar
    2. En Ciudad PC, www.ciudadpc.com. Ya he probado de todo quitando unos jQuery, poniendo otros, combinando, he puesto hasta las ultimas actualizaciones de jQuery, y nada que no hay manera, así que ya no se por donde cogerlo.

      Eliminar
    3. Pues no lo veo puesto, pero si ya tienes jQuery entonces no repitas esa parte, con eso debería funcionar, a menos que ambos scripts usen las mismas funciones y por eso uno de ellos no te funcione cuando pones el otro.

      Eliminar
  29. Hola potro, me pasaba para darte las gracias, al final hice todo lo que me dijiste, pero no habia manera, el fallo seguía, así que borré toda la plantilla y empecé de 0 y ahora funciona. Gracias por todo.

    ResponderEliminar
  30. Otra cosa que te queria preguntar, igual que en la intro que contiene música de fondo, como se puede hacer para poner la música de fondo pero en el blog? me refiero editando la plantilla o algo, no como reproductor, gracias.

    ResponderEliminar
    Respuestas
    1. Hola Sick Love Drug Empty World, la música de fondo se logra también con un reproductor (en la mayoría de los casos). Lo más simple es poner un reproductor (en la categoría Música puedes ver algunos), y ponerle los valores de ancho y alto (height y width) en cero, de esa forma no se verá, pero, hay que ser prudentes con ello, esto es porque no a todos los usuarios les gusta llegar a un sitio y escuchar música que no ha pedido y que no puede siquiera pausar.

      Buen fin de semana :)

      Eliminar
  31. Me toco quitarla potro! me aparece fusionado con la imagen de arriba de mi blog! Por que puede ser? ademas me desordena los gadgets del blog? Que Puede ser? Gracias

    ResponderEliminar
    Respuestas
    1. Ni idea Blood Creek, sin saber en cuál blog está puesto no puedo siquiera imaginar qué sucede.

      Eliminar
  32. Potro, lo que sucede es que centro el slider, pero no se centran las flechas. me podrias ayudar con esto por favor.

    www.yeferzone.com aca puedes mirar lo q pasa con las flechas.

    ResponderEliminar
  33. potro cuando le doy centrar al slide lo hace,pero no me centra las flechas. q hago??


    gracias

    ResponderEliminar
  34. potro le doy centrar al slide, pero no me centra las flechas. que puedo hacer??

    gracias

    www.yeferzone.com

    ResponderEliminar
    Respuestas
    1. Hola Yeferson, para centrar también las flechas debes cambia el left:0; que está dentro de #prevBtn, #nextBtn { por algún otro valor más alto, por ejemplo:
      left:275px;

      Lo mismo con el left:500px !important; cámbialo por otro valor más alto, por ejemplo:
      left:775px !important;

      Eliminar
  35. Hola! muy bueno, mi pregunta es si se puede hacer que muestre solo las entradas de cierta etiqueta en lugar de las ultimas en general. Gracias!

    ResponderEliminar
    Respuestas
    1. Claro Vero, para que el slider muestre sólo las entradas de una determinada etiqueta cambia esto:
      Sólo cambia en el último código esto:
      http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default


      Por esto:
      http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default/-/Nombre-de-la-etiqueta

      Eliminar
  36. Potro eres el mejor explicando, muchas gracias.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu visita y comentario!

      Eliminar
  37. Master Abu Farhan is the best...xixixixi

    ResponderEliminar
  38. Una pregunta ¿En Respondones como haces para que se muevan las nubes en la cabecera?

    ResponderEliminar
    Respuestas
    1. Así es la plantilla, ya venía con esa característica.

      Eliminar
    2. ¿Y como colocas esa característica en la plantilla?

      Eliminar
    3. Alguna vez iba a hacer una entrada sobre ello, el problema es que ese script funciona sólo con una versión muy antigua de jQuery (creo que con la 2 o 3), así que si alguien tiene truquillos con una versión más nueva (lo más seguro es que sí) entonces dejaría de funcionar, así que no es una buena opción.

      Eliminar
    4. Que pena... estaría bien. Yo no uso jQuery así que podría usarlo.

      Eliminar
  39. me han marcado mi blog como spam y ya envie el e-mail para restaurarlo pero nada T_T ayuda que me aconsejarian? por cierto potro esta finisimo ;) es como el otro solo que con otro efecto y sin los numeros e.e

    ResponderEliminar
    Respuestas
    1. Pues si ya solicitaste que revisen tu blog debes esperar a que te resuelvan, a veces se toman unos días.

      Eliminar
  40. Gracias por todo POTRO. Pero me quedo con el otro carrusel. El que nos propones me trajo muchos problemas de desconfiguración. Por ello mantengo el anterior.
    Si queres pegar un vistazo y evaluar algo: http://psicologia-terapias.com

    ResponderEliminar
  41. hola potro grax por todos los tutos q pones en tu blog me an sido d gran ayuda para el mio bueno tengo una duda espero me puedas ayudar yot engo un blog de cine ya sabras pongo noticias trailer y poster mi duda es como hacer que por ejemplo cuando selecciono la etiqueta "poster" tenga un diseño diferente como si fuera un plantilla de galeria y cuando regrese a blog se normal otra vez enpero verme explicado jejej bueno de antemano gracias

    ResponderEliminar
    Respuestas
    1. Hola ADOLFO, tendrías que usar condicionales para lograr tal cosa. Si no quieres complicarte mucho la vida puedes hacer pequeños cambios para diferenciar una etiqueta de otra:
      http://ciudadblogger.com/2011/06/agregar-una-descripcion-las-etiquetas.html
      http://ciudadblogger.com/2011/08/mostrar-una-cabecera-diferente-en-las.html

      Eliminar
  42. No se porque, pero en mi blog no se ve bien, mi blog es: http://4android-2011.blogspot.com/
    Necesito ayuda por favor porque no me funciona ningun slider, gracias por adelantado potro

    ResponderEliminar
  43. Hola potro, necesito ayuda, no puedo implementar ni este ni ningun slider en mi blog, he probado todos los de abu farhan, y el nivo slider etc, pero se me descuadran las imagenes, no me salen las flechas, sino ant y sig, no me salen los numeros, y el texto me aparece a lo largo de todo el blog. Mi blog es http://4android-2011.blogspot.com/
    Por favor, ayudame

    ResponderEliminar
    Respuestas
    1. Hola Javier, posiblemente haya un error en la colocación de los códigos, pero necesitaría verlo puesto para afirmarte lo anterior o decirte qué es lo que está pasando.

      Eliminar
  44. Hola Potro .Me Gusto mucho este aporte.
    pero no lo puedo centrar. ya e configurado los #prevBtn, #nextBtn
    - se llega a centrar pero se desactiva las animaciones...
    solo se queda estatico.

    aver si hay alguna solucion.
    saludos.

    ResponderEliminar
    Respuestas
    1. Hola Nilton1248, ¿ya has seguido las indicaciones de los comentarios #5.1 y #5.3? ¿en cuál blog lo has puesto?

      Eliminar
  45. Excelente post como siempre. me gustaria mostrarle el blog pero es +18.Gracias

    ResponderEliminar
  46. Que buen slider bro, visualmente sencillo pero completo a la vez. Y eso de "sin necesidad de agregar manualmente las entradas" esta de lujo; recuerdo que me daba mucha pereza tener que colocar cada entrada en el slider ¬¬

    Un abrazo!!

    ResponderEliminar
    Respuestas
    1. A todos nos da pereza bro, y más para quienes publican entradas seguidas (no, no es nuestro caso, jaja), así que con este tipo de gadgets nos podemos relajar un poco y preocuparnos más por la redacción de nuestras entradas que por el mantenimiento de un gadget.

      Gracias por pasar, de haber sabido que venías sacaba la alfombra roja :D

      Eliminar
    2. Jajajajajaja ... demasiado alago para mi bro, el placer es todo mío :)

      Eliminar
  47. hola una duda quiero modificar el ancho y alto de todo, y solo pude modificar el marco digamos, y las imagenes de fondo de cada entrada me quedan del tamaño de los codigos que tu pusiste de 480 y 320...

    de ante mano gracias
    (y tus consejos me han servido mucho muchas gracias :) )

    ResponderEliminar
  48. te dejo una imagen que muestra como se me ve... por si no me exprese bien

    http://i49.tinypic.com/2rz2zp0.png

    ResponderEliminar
    Respuestas
    1. Dentro del segundo código también verás esas medidas, ahí también tienes que modificarlo:
      width="480px" height="320"

      Eliminar
  49. Hola, muy buen post, pero tenga una duda, puedo hacer que la imagen tenga las mismas dimensiones que el slider (me queda la imagen a la izquierda, y ya modifique las dimensiones del slider), o en su contrario, hacer que el resumen de la entrada quede a la derecha ocupando ese espacio, espero me haya expresado bien, JA

    Bueno antes de todo muchas gracias muy buen blog

    http://delvalledelviento.blogspot.com (para que lo puedas ver)

    ResponderEliminar
    Respuestas
    1. Hola Afal, mira el comentario que está arriba del tuyo, también aplica para tu caso que quieres modificar el tamaño de las imágenes.

      Eliminar
  50. Hola Potro, segui todos los pasos y donde debe salir el slider se ve oscuro y solo los numeros :/

    ResponderEliminar
  51. ¿Como hago para que se muestre solamente en la pagina principal?

    ResponderEliminar
    Respuestas
    1. Usa condicionales:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  52. Hola Potro, el slider está estupendo pero me han surgido 2 problemillas. He cambiado el tamaño y ajustado las flechas pero no me sale centrado a pesar de haber puesto lo de center dentro del gadget y otra cosa que me pasa es que se ve la foto de fondo y encima parte del contenido pero un poco descuadrado y con el fondo grisaceo. He puesto lo de background none y nada. Te paso la url a ver si le puedes echar un vistazo. Muchas gracias
    www.elrincondewendyb.com

    ResponderEliminar
    Respuestas
    1. Hola Wendy, para centrarlo mira los comentarios #5.1 y #5.3, es posible que tengas que jugar con otros valores hasta que quede bien.
      Lo otro se ve así porque lo has puesto muy pequeño, así que la descripción es muy grande para un slider tan reducido como lo has puesto.

      Eliminar
    2. Muchas gracias por tu respuesta. Lo pondré a un tamaño más grande :) y para centrarlo intentaré a ver cómo hago. MUchas gracias

      Eliminar
    3. Gracias, al final lo conseguí. Pero quería indicar algo porque tardé en verlo y por si alguien tiene el mismo problema que me pasó a mí, encontré una "solución fácil" para hacerlo. Cuando conseguí centrarlo, conseguí también centrar la flecha de la derecha (next) aquí:
      #nextBtn {
      left:500px !important;
      }
      pero no encontraba en ningún sitio nada igual para la flecha de la izda y todo era prev y next junto. Lo que hice fue crear un ID de prevBtn
      #prevBtn {
      left: xpx
      }
      Espero no irme de listilla, no es mi intención es sólo un apunte por si a alguien le resulta más cómodo

      Eliminar
  53. Vaaaya por dios, tengo otro problemilla con este tema.

    Te comento:

    Cuando hago click en una fotografía del blog se agranda, pero entonces la barra oscura del slider (Donde va el título y la descripción de la entrada) se ve transparentado en la fotografía, dificultando visionarla.

    ¿Alguna solución para esto Potro?

    Gracias y un saludo!

    ResponderEliminar
    Respuestas
    1. No he comprendido Pablo, ¿por qué se agranda la imagen si el slider no tiene esa función? o.O

      Eliminar
    2. Jajaja, releyendo lo mío no me expliqué bien jiji.

      A ver, lo vuelvo a intentar:

      Blogger hace un tiempo puso por defecto el efecto "lightbox" cuando pinchas en una fotografía ésta se agranda para verla mejor.

      Pues resulta que la "barra oscura" del slider, donde está el título y la descripción se ve através de las fotos cuando las agrandas.

      Me refiero a las fotografías publicadas en el blog, no las del slider.

      Lo que pregunto, es si se puede hacer algo para "transparentar" o directamente que no se vea esa molesta barra en las fotos.

      Gracias y espero que lo entendieras ahora mejor jejeje.

      Un saludo y gracias por todas las molestias que te tomas.

      Eliminar
    3. Hola Potro,

      Esto que te he comentado, me acabo de dar cuenta no me pasa con Google Chrome, solo con Mozilla. ¿A tí te ocurre?

      Eliminar
    4. Gracias por los detalles extra Pablo. Si otros elementos (como el del slider) se sobrepone al Lightbox, entonces agrega esto en los estilos:

      .CSS_LIGHTBOX {
      z-index:99999 !important;
      }

      Eliminar
    5. Vaya fenómeno estás hecho. He agregado eso al final de los primeros estilos y solucionado!

      Te voy a molestar una última vez con este tema si me lo permites jeje, prometo que será la última vez jiji.

      Esa misma barra oscura de la que hacía mención donde está el título y descripción de la entrada, se puede hacer más pequeño para que se pueda ver mayor parte de la foto?

      He estado toquetando algunas cosas pero no logro dar con ello. Como puedes ver solo quiero mostrar el título de la entrada, entonces me parece demasiado alto y tapa gran parte de la fotografía del slider.

      Muchísimas racias Potro!!

      Eliminar
    6. Puedes establecer una altura para esa área, por ejemplo, debajo de .slide-desc { agrega:
      height:30px;

      Eliminar
  54. Hola... voy a probar este slide para ver como funciona... Pero tengo otra duda, haber si puedes ayudarme. No se ya hayas hecho un tutorial sobre este tema... ¿Como puedo poner y personalizar un botón para donar a travez de paypal?

    Ya tengo mi cuenta de paypal verificada, pero aun no se como poner el boton de donar.

    ResponderEliminar
  55. Una simple pregunta:
    ¿Como puedo poner y personalizar el boton de donar de paypal?

    ResponderEliminar
    Respuestas
    1. No tengo un tutorial sobre ello, pero en las herramientas para vendedores puedes ver la opción de crear el botón, aunque, la opción de "Donar" ya no está disponible para la mayoría de los países, así que podrías crear un botón de "Comprar".

      Eliminar
  56. Hola :)
    Queria Preguntar si podrias subir como hacer una Coppermine Photo Gallery o si hay algun otro lugar donde pueda recurrir para saber como poder crarla.

    Muchas Gracias & Saludos.

    ResponderEliminar
    Respuestas
    1. Ni idea Sasu Stein, pero en Blogger no creo que puedas hacerlo, esas galerías se instalan en servidores.

      Eliminar
  57. hola potro, quisiera que vieras esto que hice, realmente no se si sea de ayuda para otros user. queria publicarlo por aca pero el formulario no me dejaba poner el code.

    porfa checalo
    http://pastebin.com/Q5LMDmPz

    salu2

    ResponderEliminar
    Respuestas
    1. Gracias Razok, aunque en sí sólo es cuestión de deshabilitar esos datos desde la sección de Diseño, y en caso de que no se vea ningún cambio se puede localizar el código que se desea y eliminarlo:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Quizá eso no te funcionó porque las plantillas tienen dos veces esos códigos, uno es para la versión móvil y otro para la versión web, así que en ambas se debe quitar ;)

      Eliminar
  58. Oye se puede usar en un post con muchas iamgenes ¿? hacer una slide de las imagenes del post... http://kenandice.blogspot.com/

    ResponderEliminar
    Respuestas
    1. No, para eso necesitarías que una entrada tuviera su propio feed y nunca es así, el feed es para todo el blog, y el slider toma sólo la primera foto de cada entrada.

      Eliminar
  59. Hola, me pasa lo mismo que Wendy Batriani no quiere centrar.
    Tambien me gustaria me ayudaras a hacer algo asi: es un banner que esta hasta abajo(arriba de la barra de tareas) y que se muestra oculto(mostrando solo la barra del titulo) y una vez alcanzado el final de la pagina se levanta el banner o simplemente pasando el mouse por encima del banner. Que muestre solo el boton de cerrar (la cruz superior derecha); Que abra el link en otra pestaña y que la muestre (que te pase directamente a la pagina del link)y que se mantenga solo en la pagina inicial sin cerrar a menos que le des clic en cerrar(cruz superior derecha, pero que abra nuevamente al refrescar). Aqui me aparecio un anuncio como lo estaba soñando, espero que salga, por que no es constante.http://kekomundo.com/

    ResponderEliminar
    Respuestas
    1. En los comentarios #5.1 y #5.3 puedes ver cómo centrarlo.
      Lo otro que preguntas no he podido verlo, entré a ese sitio, llegué hasta abajo y no encontré nada parecido a lo que mencionas.

      Eliminar
    2. Hola bloggercito, yo conseguí centrarlo poniendo las etiquitas center al principio del todo y al final del todo. Fue la única manera que lo pude hacer. Espero que te ayude

      Eliminar
  60. Hola Potro
    Gracias por el Dato.
    Pero Aqui intentado Lo Logre.

    Para centrarlo encierra el último código entre "center"

    Cambia el left:0; que está dentro de #prevBtn, #nextBtn { cámbialo por:
    left:100px;

    Luego cambia el left:500px !important; por:
    left:620px !important;

    Eso Es Todo. Quedo Bien. http://nilton1248-pes.blogspot.com
    Saludos.

    ResponderEliminar
  61. como puedo hacer para borrar las flechas del slider??

    gracias

    ResponderEliminar
    Respuestas
    1. Cambia el display:block; que está debajo de #prevBtn, #nextBtn { por display:none;

      Eliminar
  62. hola a todos. Que pena que se haya acabado el curso.
    Muchos Saludos

    ResponderEliminar
  63. Hola a Todos
    Que pena que se haya acabado el curso.
    Muchos Saludos

    ResponderEliminar
    Respuestas
    1. Hola Jaldun Murad, ¿cuál curso ha acabado?

      Eliminar
  64. Hola de nuevo Potro, esta es una duda general que ya no sé donde preguntar. Resulta que no puedo acceder desde hace tiempo a mi cuenta de blogger desde chrome. Se me queda redireccionando y no hay manera. Puedo entar en mi blog pero nada más. Creí que sería una incidencia puntual pero me gustaría saber si es general o sólo me pasa a mí y si hay algún correo o contacto donde poder plantear el problema porque miré en blogger y no hay nada. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Wendy, nadie más ha reportado ese problema; quizá sólo necesites darle una "limpiada" al navegador eliminando cookies, caché e historial, probablemente con eso todo vuelva a la normalidad.
      Saludos :)

      Eliminar
  65. Hola Potro,
    He colocado el slider en mi blog. Funciona muy bien. El problema viene cuando quiero poner un segundo slider. Sólo funciona el primero, y el segundo se queda con una imagen estática. ¿Hay solución?
    Un saludo

    ResponderEliminar
    Respuestas
    1. Es sólo un slider por página Fran. Saludos.

      Eliminar
  66. Dicho y hecho Potro, eres un fenómeno. Ahora todo funciona perfectamente, muchísimas gracias. Un abrazo

    ResponderEliminar
  67. Hola potro, tu sabrias como puedo convertir a cualqier slider en uno automatico?
    Gracias

    ResponderEliminar
    Respuestas
    1. No es cosa sencilla, cada slider tiene una estructura distinta.

      Eliminar
  68. Saludos. Excelente página. Este es nuestro blog www.SeHablaBasket.com tenemos un slider "estático". Si colocamos el automático ¿cómo quitamos el anterior?.

    Y otra consulta. Si abres la página verás que tenemos las fechas de las noticias abajo de la Foto principal, pero la colocamos manual.

    ¿Hay una forma de incluir dentro de la redacción de la entrada algún comando o etiqueta que coloque la fecha de publicación automáticamente?

    Tienes algún artículo que muestre en la página principal las entradas de manera diferente, así como esta página que tenemos de prueba sehablabasket2.blogspot.com

    En donde la foto sale a la izquierda, pero al abrir el artículo sale centrada

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola SeHablaBasket2.
      Elimina el gadget donde tienes el slider, así como todo lo que empiece por .fp-slider de esa forma se irá el slider que tienes puesto.

      La fecha se habilita haciendo click en Entradas del blog (desde Diseño) y en la ventana que se abre verás la opción de habilitar la fecha. Si ya está habilitada entonces debes eliminar esto en tu plantilla:
      h2.date-header{margin:1.5em 0 .5em;display:none;}

      Lo otro que preguntas es el Leer más, mira en esta entrada:
      http://ciudadblogger.com/2010/03/leer-mas-automatico-con-imagenes-en.html

      Saludos.

      Eliminar
  69. un saludo potro es decido hacer mi blog y gracias a tu inmenso conocimiento, es logrado en la plantilla de blogger usar el efecto de agrandar el el titulo usando otros tutoriales en la web el estilo google para los botones de la paginacion igual el menu, igual el efecto deslizante que publicaste lo aplique todo de maravilla tambien logre dividir la cabecera igual tengo las redes sociales a compartir pienso que ya tengo lo ideal casi de un blog, pero aun me hace falta, modificar esto: http://djmanny22dice.blogspot.com/ en la portada hacer que los espacio en los post que no sean ta excesivo por ej: el primer post al final tiene un espacio que no me gusta solo me hace falta eso y si fuese posible me gustaría la opción de expandir los post pero que el primer no se expanda pero que solo sea en la portada asi y que en los otros lugares no se puede hacer potro!! espero que si un saludo hno!

    ResponderEliminar
    Respuestas
    1. Hola Emanuel, busca esta parte en tu plantilla:
      .date-outer {
      position: relative;
      margin: $(date.space) 0 20px;
      padding: 0 15px;

      background-color: $(post.background.color);
      border: 1px solid $(post.border.color);

      -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
      -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
      -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
      box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

      -moz-border-radius: $(widget.border.radius);
      -webkit-border-radius: $(widget.border.radius);
      -goog-ms-border-radius: $(widget.border.radius);
      border-radius: $(widget.border.radius);
      }

      Cambia ese $(date.space) por 10px o el valor que desees.
      Para lo otro que preguntas mira aquí:
      http://ciudadblogger.com/2010/06/leer-mas-automatico-menos-en-el-primer.html

      Eliminar
  70. Saludos Potro Buen Slider ahora quiero esconder el slider que solo aparezca en la portada sigo los pasos tal cual como dice aca http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html y nada sigue aun Ayuda Por Favor. . .

    ResponderEliminar
    Respuestas
    1. Quizá no has aplicado bien la condicional, o la ID del gadget no es el correcto.
      Si se te dificulta encontrar el ID del gadget también puedes usar el ID del slider, que es:
      #slide-container

      Eliminar
  71. Que tal Potro,

    Mira me encanto este slider y lo coloque en mi web (http://www.iemeb.com.ar) , pero tengo una consulta.. Yo tengo en varias entradas imagenes y cuando les hago click para ampliarlas en el blog se sigue viendo el texto del slider mientras esta la foto abierta.

    por ejemplo entra a este link ( http://iemeb.blogspot.com.ar/2012/05/encuentro-omas-030512.html ) .. haz click en una de las imagenes y veras q se sigue viendo el texto del slider.. mi pregunta es si hay alguna forma de solucionar esa falla

    Bueno Potro desde ya muchas gracias por tu atencion.

    ResponderEliminar
  72. Potro pongo todo tal como lo decis pero no me aparecen imagenes ni nada solo se ven las flechitas y el fondo en blanco me falta algo que nunca puse?

    ResponderEliminar
    Respuestas
    1. Puede ser que la URL del blog no esté bien puesta, habría que ver en cuál blog lo has puesto.

      Eliminar
    2. Potro el blog es www.estrella-verde.com y lo que me decis es en el gadget no cierto o hay en otro lugar en el que tenga que poner la url?

      Eliminar
    3. Hola de nuevo Pablo, en ese blog veo todos los códigos, menos el último, sin él no se podrá ver el slider.

      Eliminar
    4. Claro potro por que el ultimo es el del gadget y lo saque por que se me veia vacio, lo saque por que no tenia sentido tener el gadget vacio.

      Eliminar
    5. Potro perdon ahime apareció todo Muchas Gracias!

      Eliminar
  73. Un saludo! Gracias por sus aportes. He aplicado los pasos indicados para crear el slider en mi blog, pero no ha sido posible hacerlo visible. El gadget, sin embargo, se roba el espacio debajo de la cabecera del blog. Qué está fallando? Espero me pueda ayudar.

    http://dl.dropbox.com/u/42886525/Fomomentos.slide.JPG

    ResponderEliminar
    Respuestas
    1. Hola Cristian MÉNDEZ, podría ser por algún estilo de la plantilla que oculta lo que haya en esa área, pero es importante ver el blog donde lo has puesto para asegurarnos que sea eso y de ser así cómo solucionarlo.

      Eliminar
  74. Hola! No puedo verlo y no se por que es. Si le pongo titulo al gadget html me aparece solo el titulo pero no el slide. Podrias ayudarmE?

    Gracias!

    htpp://recomendadores.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola, no veo que tengas puesto el slider en ese blog.

      Eliminar
  75. Hola denuevo potro, ya quedo perfecto el slider en la otra web, pero ahora quiero insertarlo aquí pero por alguna razón se ve muy mal, un poco decentrado y no me aparecen las flechas a los lados para controlar el slider, se vén pero arriba junto al banner, también el texto de la descripcion del slider se ve cortado hacia abajo.... podrias hecharme una ayudadita porfavor porfis qq, aquí esta el diseño en cuestion ( http://weads.blogspot.com/ ) y si no es mucha la molestia bro también quisiera agregarla una imagen de fondo al blog en general, intenté pero tampoco me cuadrava no sé en que he estado fallando esta seria la que quiero agregar: http://3.bp.blogspot.com/-I9f1Fp8ymt4/Tv5-cDCOL4I/AAAAAAAAB0o/50Rz6NSz7-A/s1600/ahoirasi.jpg

    Saludos man espero que estés bien...tiempo sin saber de tí.

    ResponderEliminar
    Respuestas
    1. Hola wn, las flechas no se ven porque como colocaste hasta abajo el slider entonces las flechas se quedaron arriba.
      En esta parte del código puedes manipular su posición:
      #prevBtn, #nextBtn {
      display:block;
      width:30px;
      height:77px;
      position:absolute;
      left:-30px;
      text-indent:-9999px;
      top:71px;
      z-index:1000;
      }
      #nextBtn {
      left:500px !important;
      }
      #prevBtn, #nextBtn {
      display:block;
      left:0;
      position:absolute;
      top:132px;
      width:30px;
      height:77px;
      z-index:1000;
      }


      El top es la distancia desde arriba, y el left la distancia desde la izquierda.
      Para lo de la imagen del blog tendría que ver cómo la agregas (verla puesta en el blog).

      Saludos :)

      Eliminar
  76. Potro, ¿se puede poner un slider que tenga imágenes con los links a las entradas y a su vez videos? Yo he encontrado este: http://css-tricks.com/examples/AnythingSlider/ pero no lo he podido hacer funcionar correctamente en mi blog.
    Saludos!

    ResponderEliminar
    Respuestas
    1. Después lo miro bien y veo si publico una entrada sobre ello, porque por comentarios no podría decirte cómo ponerlo. Aun así, ya debe haber tutoriales sobre ese slider en la red, sería cuestión de que busques.
      Saludos.

      Eliminar
  77. Hola potro mi duda es que como puedo hacer para que la imagen que salga en el slider sea del tamaño que desee y no la que originalmente tiene el la entrada. por ejemplo la entrata tiene una imagen de width: 292px height:383px y quiero que en el slider sea de width: 240px height:340px para que se vea bien ya que al ponerlo queda grande la imagen y no se ve toda.......no se si me explique pero bueno de antemano gracias ...

    ResponderEliminar
  78. potro sobre mi pregunta anterior ya busque como realizar gracias...

    ResponderEliminar
  79. ¡Hola Potro! El Slider ya está instalado, pero entre las imágenes me salen algunas letras de las entradas ¿cómo lo soluciono?
    Desde ahora, gracias

    ResponderEliminar
    Respuestas
    1. Hola Pandora, ¿en cuál blog lo has puesto?

      Eliminar
  80. Hola, muy buena la forma de crear el slider. Pero yo tengo una duda. Espero que puedas ayudarme.

    Tengo un blog al que estoy modificando algunas cosas, y ya tiene un slider integrado (acorde al diseño del blog). Pero no muestra las últimas entradas, sino texto (e imagenes) que se predefinan en el editor de HTML.

    Y lo que me gustaría es que ese slider, en vez de mostrar el texto que se coloque, muestre una imagen de la ultima entrada y una brebe descripción, siguiendo la estructura actual del slider.

    Sería como incluir los códigos pero en algo que ya está estructurado. Simplemente quiero cambiar el contenido y dejar la estructura como está. He intentado varias cosas, pero no funcionan...

    Saludos y gracias de antemano!

    ResponderEliminar
    Respuestas
    1. No es nada sencillo Rodrigo, no a todos los sliders se les puede automatizar, y en los que sí son procesos distintos y complejos. Por ahora puedes elegir entre este slider y el otro que se menciona al inicio de la entrada.
      Saludos.

      Eliminar
  81. Hola, me preguntaba si sería posible utilizar algún color o imagen de fondo en el slider, y de ser así como se podría hacer?

    Un saludo.

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger