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)Ahora antes de </head> agrega este script:
-------------------------------------------------------------------- */
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc5quIImWNZG7es6nI64aLpIvSzp0DhzlWbhO_kWiqQsUe7Q4uEgTySqC8PuHiWG_KdnYjPSqOo358vBCs0PyC4VKw8_rrRFudAPQ5aeKxJDfCVdrN9VcAhyphenhyphenXGE60oakEGb83Sj1wF0lc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xiK_Pw2WC0JPtnjzfdJotyBHVK94Oa0Dv6_odsNglLj0SIAZHLckxvpNj3B0xbmFhcwg3tiTuoTOmPyBPBg4vZek_FfsTp6VVU4Qtaj3-e4Y1O0xRHcju0IIdWuru_vIDCWoUYEDrSU/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDqtJnqpVHjBmAdA77MwaZaqfv6q1E_HgXz8a0J2XkEm2uwdHjghWWD4G1aH01HPankuoc95f6oogLplGMKbyXQP55D5tUsEmqsCSpRltXlgdUoUFSb48iZDyWpLwWWkE4Csgul8gH7w/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;}
<script>Lo siguiente será pegar antes de </body> este 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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVXF04jdmAmOyP2QA_0iBu2WkvHsszgdUFcM2NsCudLfLo_ja-MfbxSC-YmZ5RmURsfcc49olvYqRNWiVR4jNJZO6M_aQtC7P_zJoU7Yh7Mka5LnKzUKh2CtIKwGb5A_GvOS6ZBKYhkCU/s0/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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>Por último entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:
<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>
<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:
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.
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
Hola Potro
ResponderEliminarQuerí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.
De hecho hay dos entradas sobre buscadores y ahí hubiera sido mejor que lo pusieras, pero gracias igualmente ;)
EliminarExcelente potro :) un +10 jeje Saludos y Gracias!
ResponderEliminarHola Potro,
ResponderEliminarSó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
Feliz aniversario José, que vengan más años con el blog ;)
EliminarGenial Potro, Creo que lo voy a implantar en mi blog pero tengo una duda.
ResponderEliminarCuando 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!
Hola Pablo, para centrarlo encierra el último código entre <center> </center>
EliminarHola Potro, muchas gracias por responder pero...
EliminarCuando 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!
Cambia el left:0; que está dentro de #prevBtn, #nextBtn { cámbialo por:
Eliminarleft:275px;
Luego cambia el left:500px !important; por:
left:775px !important;
Hola Potro,
EliminarGracias 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.
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.
ResponderEliminarSaludos Potro.
Gabriela.
Aun tengo pendientes los carruseles, al menos uno habrá que publicar después ;)
EliminarSaludos Gabriela.
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.
ResponderEliminarEntonces 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!
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.
EliminarHola de nuevo Potro!
EliminarVeo 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!
No, yo te decía ponerlo justo arriba de las entradas, no debajo de la cabecera ;)
EliminarVaya, 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.
EliminarGracias Potro!
Casi ninguna plantilla tiene "hueco" ahí, sólo tienes que arrastrar el gadget a ese lugar, es todo lo que hay que hacer ;)
EliminarAjam, 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.
EliminarPero 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!
Vaya, siempre que te escribo inmediantamente encuentro solución o tengo algo nuevo que comentarte.
EliminarDecirte 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!
Qué gusto que hayas podido hacerlo :)
EliminarEs igual que el anterior que hiciste pero con un aspecto mas bonito y de pagina web.
ResponderEliminarMuchas gracias! me pondré este
Saludos
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?
EliminarGracias! espero tu respuesta
Cuestión de gustos ;)
EliminarQuizá 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.
EliminarSi se recorta justo para las dimensiones del slider seria genial, se puede?
EliminarNo, como te decía anteriormente, los recortes en las imágenes de Picasa siempre son cuadrados, nunca rectangulares.
EliminarMe gusta, +10 y voy a probarlo. Un saludo al Potro y a todos sus lectores. Me tocó ser el primero.
ResponderEliminarNo el primero, pero me da gusto que haya sido de tu agrado :)
Eliminar¿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!
ResponderEliminarClaro, en la entrada se habla sobre ello.
EliminarYA a lo he visto, eso me pasa por hacer las cosas rápido. Muchas Gracias!
Eliminarmuy buena entrada potro!
ResponderEliminarUna pregunta si ya tengo puesto el scrip de Jquery no hay que volverlo a poner, verdad
ResponderEliminarSalvo algunas excepciones no hace falta ponerlo de nuevo.
EliminarHola potro cada vez que te pongo un comentario en tu blog nunca aparecen, seras que no me quieres contestar o estaba como Spam
ResponderEliminarNinguna 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.
EliminarTe 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.
Grande el Blog, estoy empezando uno nuevo ya un poco más pro, ¿era necesario hacer un cambio previo?
ResponderEliminarPues no, si ya tenías otro slider y ya no lo vas a usar puedes quitarlo, sino, no hay que hacer nada más ;)
EliminarHola Potro,
ResponderEliminarPerdona, 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
Hola Potro,
EliminarSe ha solucionado el problema, ya se visualizan los contenidos en la página del blog.
Muchas gracias. Un abrazo.
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 :/
EliminarPotro! 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!
ResponderEliminarGracias de antemano!
Yo lo veo funcionando sin problemas Pabela, supongo que ya has podido resolverlo.
Eliminarjajaaj 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!
EliminarPues si lo tienes en el crosscol puedes dividirlo, si lo tienes encima de las entradas también:
Eliminarhttp://ciudadblogger.com/2011/05/dividir-el-crosscoll-del-blog.html
http://ciudadblogger.com/2012/01/anadir-dos-columnas-de-gadgets-arriba.html
SUper!!! gracias Potro!!! :D
EliminarHermano, no funciona en mi blog, hice todo. Solo me aparece la ultima entrada que publiqué y quiero que salgan 5, podrías ayudarme? Gracias.
ResponderEliminarPerdon, este es mi blog http://tecnoscis.blogspot.com
ResponderEliminarDisculpame, he decidido quitarlo porque aparecia en todas las entradas, pero de cualquier forma, gracias! :)
ResponderEliminarVale, si después te animas a ponerlo recuerda que puedes elegir dónde mostrarlo y dónde no:
Eliminarhttp://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
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!
ResponderEliminarHola wn, es un H2, puedes quitarle el fondo si debajo de .slide-desc h2 { agregas:
Eliminarbackground: none;
Saludos.
muchas gracias potro, queda de lujo, solo espero que no alente mucho el blog, miren como queda http://yanko0.blogspot.mx/
ResponderEliminarY CUANDO vas a vender polos?
ResponderEliminarEsas camisetas... pues, pues... cuando aduana no me cobre tanto por el envío :P
EliminarFí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
ResponderEliminarA 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...
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.
EliminarGracias por pasar :)
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¿En cuál blog te sucede eso ernesto? Porque en el blog de tu perfil no veo que nada esté encimado.
EliminarHola, 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.
ResponderEliminarHola Daniel, no veo puesto el slider en ese blog.
EliminarPues a mi no me funciona ...
ResponderEliminary 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.
Tampoco veo el slider en tu blog, sino lo dejan puesto no podré saber qué puede andar mal.
EliminarHola 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.
ResponderEliminarSaludos,
Fabian.
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.
EliminarSe me olvido poner el blog
ResponderEliminarhttp://tabloncentral.blogspot.com/
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¿En cuál blog PC? ¿Has verificado que no tengas más versiones de jQuery?
EliminarEn 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.
EliminarPues 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.
EliminarHola 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.
ResponderEliminarOtra 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.
ResponderEliminarHola 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.
EliminarBuen fin de semana :)
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
ResponderEliminarNi idea Blood Creek, sin saber en cuál blog está puesto no puedo siquiera imaginar qué sucede.
Eliminar.mobile .comments {
ResponderEliminardisplay:none;
}
Potro, lo que sucede es que centro el slider, pero no se centran las flechas. me podrias ayudar con esto por favor.
ResponderEliminarwww.yeferzone.com aca puedes mirar lo q pasa con las flechas.
potro cuando le doy centrar al slide lo hace,pero no me centra las flechas. q hago??
ResponderEliminargracias
potro le doy centrar al slide, pero no me centra las flechas. que puedo hacer??
ResponderEliminargracias
www.yeferzone.com
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:
Eliminarleft:275px;
Lo mismo con el left:500px !important; cámbialo por otro valor más alto, por ejemplo:
left:775px !important;
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!
ResponderEliminarClaro Vero, para que el slider muestre sólo las entradas de una determinada etiqueta cambia esto:
EliminarSó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
No veo puesto el código que te he dado.
ResponderEliminarPotro eres el mejor explicando, muchas gracias.
ResponderEliminarGracias a ti por tu visita y comentario!
EliminarMaster Abu Farhan is the best...xixixixi
ResponderEliminarUna pregunta ¿En Respondones como haces para que se muevan las nubes en la cabecera?
ResponderEliminarAsí es la plantilla, ya venía con esa característica.
Eliminar¿Y como colocas esa característica en la plantilla?
EliminarAlguna 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.
EliminarQue pena... estaría bien. Yo no uso jQuery así que podría usarlo.
Eliminarme 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
ResponderEliminarPues si ya solicitaste que revisen tu blog debes esperar a que te resuelvan, a veces se toman unos días.
EliminarGracias 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.
ResponderEliminarSi queres pegar un vistazo y evaluar algo: http://psicologia-terapias.com
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
ResponderEliminarHola 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:
Eliminarhttp://ciudadblogger.com/2011/06/agregar-una-descripcion-las-etiquetas.html
http://ciudadblogger.com/2011/08/mostrar-una-cabecera-diferente-en-las.html
No se porque, pero en mi blog no se ve bien, mi blog es: http://4android-2011.blogspot.com/
ResponderEliminarNecesito ayuda por favor porque no me funciona ningun slider, gracias por adelantado potro
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/
ResponderEliminarPor favor, ayudame
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.
EliminarHola Potro .Me Gusto mucho este aporte.
ResponderEliminarpero 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.
Hola Nilton1248, ¿ya has seguido las indicaciones de los comentarios #5.1 y #5.3? ¿en cuál blog lo has puesto?
EliminarExcelente post como siempre. me gustaria mostrarle el blog pero es +18.Gracias
ResponderEliminarQue 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 ¬¬
ResponderEliminarUn abrazo!!
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.
EliminarGracias por pasar, de haber sabido que venías sacaba la alfombra roja :D
Jajajajajaja ... demasiado alago para mi bro, el placer es todo mío :)
Eliminarhola 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...
ResponderEliminarde ante mano gracias
(y tus consejos me han servido mucho muchas gracias :) )
te dejo una imagen que muestra como se me ve... por si no me exprese bien
ResponderEliminarhttp://i49.tinypic.com/2rz2zp0.png
Dentro del segundo código también verás esas medidas, ahí también tienes que modificarlo:
Eliminarwidth="480px" height="320"
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
ResponderEliminarBueno antes de todo muchas gracias muy buen blog
http://delvalledelviento.blogspot.com (para que lo puedas ver)
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.
EliminarHola Potro, segui todos los pasos y donde debe salir el slider se ve oscuro y solo los numeros :/
ResponderEliminar¿En cuál blog lo has puesto Dyane?
Eliminar¿Como hago para que se muestre solamente en la pagina principal?
ResponderEliminarPrueba entonces así:
ResponderEliminar.mobile .comments {
display:none !important;
}
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
ResponderEliminarwww.elrincondewendyb.com
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.
EliminarLo 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.
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
EliminarGracias, 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í:
Eliminar#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
Vaaaya por dios, tengo otro problemilla con este tema.
ResponderEliminarTe 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!
No he comprendido Pablo, ¿por qué se agranda la imagen si el slider no tiene esa función? o.O
EliminarJajaja, releyendo lo mío no me expliqué bien jiji.
EliminarA 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.
Hola Potro,
EliminarEsto que te he comentado, me acabo de dar cuenta no me pasa con Google Chrome, solo con Mozilla. ¿A tí te ocurre?
Gracias por los detalles extra Pablo. Si otros elementos (como el del slider) se sobrepone al Lightbox, entonces agrega esto en los estilos:
Eliminar.CSS_LIGHTBOX {
z-index:99999 !important;
}
Vaya fenómeno estás hecho. He agregado eso al final de los primeros estilos y solucionado!
EliminarTe 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!!
Puedes establecer una altura para esa área, por ejemplo, debajo de .slide-desc { agrega:
Eliminarheight:30px;
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?
ResponderEliminarYa tengo mi cuenta de paypal verificada, pero aun no se como poner el boton de donar.
Una simple pregunta:
ResponderEliminar¿Como puedo poner y personalizar el boton de donar de paypal?
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".
EliminarHola :)
ResponderEliminarQueria 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.
Ni idea Sasu Stein, pero en Blogger no creo que puedas hacerlo, esas galerías se instalan en servidores.
Eliminarhola 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.
ResponderEliminarporfa checalo
http://pastebin.com/Q5LMDmPz
salu2
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:
Eliminarhttp://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 ;)
Oye se puede usar en un post con muchas iamgenes ¿? hacer una slide de las imagenes del post... http://kenandice.blogspot.com/
ResponderEliminarNo, 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.
EliminarHola, me pasa lo mismo que Wendy Batriani no quiere centrar.
ResponderEliminarTambien 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/
En los comentarios #5.1 y #5.3 puedes ver cómo centrarlo.
EliminarLo otro que preguntas no he podido verlo, entré a ese sitio, llegué hasta abajo y no encontré nada parecido a lo que mencionas.
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
EliminarHola Potro
ResponderEliminarGracias 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.
Exactamente así es :)
Eliminarcomo puedo hacer para borrar las flechas del slider??
ResponderEliminargracias
Cambia el display:block; que está debajo de #prevBtn, #nextBtn { por display:none;
EliminarNi idea entonces, no sé porqué se resisten los estilos para las versiones móviles.
ResponderEliminarhola a todos. Que pena que se haya acabado el curso.
ResponderEliminarMuchos Saludos
Hola a Todos
ResponderEliminarQue pena que se haya acabado el curso.
Muchos Saludos
Hola Jaldun Murad, ¿cuál curso ha acabado?
EliminarPues inhabilitando los comentarios dejará de mostrarse también ahí. Si aun así no se quitan entonces elimina todas estas que encuentres:
ResponderEliminar<b:include data='post' name='threaded_comments'/>
Los mismo con esta línea, elimina todas las que encuentres:
<b:include data='post' name='comments'/>
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
ResponderEliminarHola 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.
EliminarSaludos :)
Hola Potro,
ResponderEliminarHe 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
Es sólo un slider por página Fran. Saludos.
EliminarDicho y hecho Potro, eres un fenómeno. Ahora todo funciona perfectamente, muchísimas gracias. Un abrazo
ResponderEliminarMe alegro que ya esté resuelto :)
EliminarHola potro, tu sabrias como puedo convertir a cualqier slider en uno automatico?
ResponderEliminarGracias
No es cosa sencilla, cada slider tiene una estructura distinta.
EliminarSaludos. 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?.
ResponderEliminarY 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
Hola SeHablaBasket2.
EliminarElimina 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.
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!
ResponderEliminarHola Emanuel, busca esta parte en tu plantilla:
Eliminar.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
No sé decirte, de Discus poco sé, pero si eliminando eso también se ocultan los de Disqus entonces pocas probabilidades quedan.
ResponderEliminarSaludos 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. . .
ResponderEliminarQuizá no has aplicado bien la condicional, o la ID del gadget no es el correcto.
EliminarSi se te dificulta encontrar el ID del gadget también puedes usar el ID del slider, que es:
#slide-container
Que tal Potro,
ResponderEliminarMira 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.
Hola matink, mira el comentario #55.4
Eliminarmuchas gracias potro!!
EliminarPotro 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?
ResponderEliminarPuede ser que la URL del blog no esté bien puesta, habría que ver en cuál blog lo has puesto.
EliminarPotro 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?
EliminarHola de nuevo Pablo, en ese blog veo todos los códigos, menos el último, sin él no se podrá ver el slider.
EliminarClaro 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.
EliminarPotro perdon ahime apareció todo Muchas Gracias!
EliminarUn 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.
ResponderEliminarhttp://dl.dropbox.com/u/42886525/Fomomentos.slide.JPG
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.
EliminarHola! 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?
ResponderEliminarGracias!
htpp://recomendadores.blogspot.com
Hola, no veo que tengas puesto el slider en ese blog.
EliminarHola 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
ResponderEliminarSaludos man espero que estés bien...tiempo sin saber de tí.
Hola wn, las flechas no se ven porque como colocaste hasta abajo el slider entonces las flechas se quedaron arriba.
EliminarEn 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 :)
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.
ResponderEliminarSaludos!
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.
EliminarSaludos.
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 ...
ResponderEliminarpotro sobre mi pregunta anterior ya busque como realizar gracias...
ResponderEliminar¡Hola Potro! El Slider ya está instalado, pero entre las imágenes me salen algunas letras de las entradas ¿cómo lo soluciono?
ResponderEliminarDesde ahora, gracias
Hola Pandora, ¿en cuál blog lo has puesto?
EliminarHola, muy buena la forma de crear el slider. Pero yo tengo una duda. Espero que puedas ayudarme.
ResponderEliminarTengo 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!
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.
EliminarSaludos.
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?
ResponderEliminarUn saludo.
Pues el slider tiene el espacio muy limitado como para que se aprecie un fondo, pero puedes ponérselo debajo de #slide-container {, por ejemplo:
Eliminarbackground:#000;
Hola Potro, se podria colocar el slider para que salgan las entradas del dia y debajo poner 2 columnas con un listado de distintas categorias con sus entradas resumidas o con foto y así acortar el tiempo de carga del blog. Así añadiria luego en el menu superior las categorias. Es complicado? si es posible me gustaria ponerlo en el blog. Venga gracias.
ResponderEliminarHola Depapercraft Blox, supongo que podrías usar el slider, y debajo poner un gadget o los que quieras de las últimas entradas por categoría:
Eliminarhttp://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html
muchas gracias de apoco voy aprendiendo mucho
ResponderEliminarsaludos
Potro, dos dudas sobre este slider:
ResponderEliminarLas imágenes originales de las entradas se deforman para adaptarse al tamaño del slider, ¿hay forma de evitar esto?
¿Qué ocurre con las entradas que no tienen imágenes?
Gracias.
No hay forma de evitarlo, siempre que se usen estos sliders es mejor usar imágenes de un tamaño similar para evitar esas deformaciones.
EliminarCuando una entrada no tenga una imagen mostrará esta imagen por defecto:
http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/sin-imagen.png
Esa puede cambiarse por alguna otra en caso de que lo prefieras.
Saludos.
Hola Potro gusto en saludarte, disculpa la molestia me interesa saber como podria aplicar este slider a alas entradas mas populares?
ResponderEliminarDe antemano muchas gracias.
Saludos.
Hola Rikardo Apv, no se puede, únicamente funciona con las últimas entradas del blog o de alguna etiqueta.
EliminarSaludos.
Hola Potro, mi casellano es muy malo, pero voy a intentar que me comprendas. Estoy en Portugal y sigo tu blog hace mucho tiempo. Ahora veo este post que es lo que necessito para el blog en que trabajo, pero ay un problemita: me parece que e echo todo tal como dices, pero apenas se ve la image del ultimo post, sin setas nin numeros para avançar ou recuar. El blog de que te hablo es http://noticiasdogil.blogspot.com y es un blog escolar. Te agradesco muchissimo tu ayuda e se pudieras que sea muy rapida para que los visitantes no vean lo que esta ocurriendo. Espero que tengas entendido mi problema y desculpame por mi castellano.
ResponderEliminarGracias.
Si me vas a responder, lo puedes hacer tambien para noticiasdogil@gmail.com.
Gracias una vez mas.
Antónia Mancha
Hola Antónia, te has dado a entender perfectamente bien ;)
EliminarLos números únicamente aparecen cuando se activan como se menciona en la entrada, pero si lo haces entonces las flechas no aparecerán.
Para que las flechas queden centradas cambia esto:
#nextBtn, #slider1next{
left:755px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:250px;
position:absolute;
top:502px;
width:30px;
z-index:1000;
}
Por esto:
#nextBtn, #slider1next{
left:672px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:175px;
position:absolute;
top:400px;
width:30px;
z-index:1000;
}
Saludos hasta Portugal.
Hola potro, soy incapaz de poner el slyder, me aparecen solamente las flechas... pero nada más, no aparece la imagen. ¿a qué se debe? ¿puedo arreglarlo?
ResponderEliminar¿En cuál blog lo has puesto?
Eliminarlefoliot.com, pero después lo quité casi me cargo el blog... soy muy novato en esto del Html :(
EliminarMe mola tu blog!
Hola Potro, viendo este slider pregunto si se podría hacer que apareciera una pagina de portada con el slider para mostrar las últimas entradas del dia de hoy y debajo de ésta en dos columnas un listado de varias categorias principales así cuando se pincha se accede a la entrada. Resumiendo que no quiero que cuando se ponga la url del blog se carguen todas las entradas porque se relentiza y eso aliviaria mucho el tráfico.
ResponderEliminar