- Desde
- 5 Jul 2010
- Mensajes
- 4.478
En la red hemos encontrado muchos themes para blogger donde aparecen sliders que se deben de crear y actualizar de forma manual a traves de una gadget en HTML. Lo que vengo a compartir con ustedes es un interesante recurso que encontre en ingles sobre Como crear un slider automatico basado en una etiqueta.
Que lograremos?
Lo que se lograra es que nuestro slider se actualizara por si solo a medida que actualicemos las entradas de una categoria.
Enlace eliminado
COmo pueden ver en la imagen, el slider es horizontal y muestra las x entradas de la etiqueta labelx que configuremos en el sistema.
Instalando el Slider
Lo primero que debemos de hacer es ir a la edicion HTML de nuestro theme y seleccionamos la casilla Expandir plantillas de artilugios, buscamos este codigo:
y pegamos antes este codigo:
ahora buscamos el cierre de head:
Para configurar el nombre de la etiqueta con la cual se mostraran las entradas, buscamos la variable: label1 = "news"; donde nos indica que news es el nombre de la label que esta usando el sistema. Solo debemos de cambiar el nombre de nuestra etiqueta, por ejemplo: Videos. De modo que quedara asi:
Hasta ahora no hemos hecho que el slider aparezca en el blog, unicamente hemos agregado el estilo en el css y el codigo de configuracion de la etiqueta con sus imagenes o miniaturas y los tiempos que se mostrara cada post.
Ahora vamos a buscar este codigo:
Listo! tenemos ahora en nuestro blog un slider que se actualiza de forma automatica.
Ver Demo
Que lograremos?
Lo que se lograra es que nuestro slider se actualizara por si solo a medida que actualicemos las entradas de una categoria.
Enlace eliminado
COmo pueden ver en la imagen, el slider es horizontal y muestra las x entradas de la etiqueta labelx que configuremos en el sistema.
Instalando el Slider
Lo primero que debemos de hacer es ir a la edicion HTML de nuestro theme y seleccionamos la casilla Expandir plantillas de artilugios, buscamos este codigo:
]]></b:skin>:
y pegamos antes este codigo:
COmo pueden ver, este es el css que dara el estilo a nuestro slider o carusel, por tal razon podemos cambiar los valores para ajustarlo a nuestras necesidades, lo que he marcado en rojo#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(Enlace eliminado) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(Enlace eliminado) center;z-index:100;cursorointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(Enlace eliminado) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(Enlace eliminado) center;z-index:100;cursorointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(Enlace eliminado) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(Enlace eliminado) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}
ahora buscamos el cierre de head:
y agregamos ANTES este codigo:</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "news";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s.indexOf(">")!=-1){
s = s.substring(s.indexOf(">")+1,s.length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry;
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img = imgr[j];
s = postcontent ; 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!="")) img = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
Para configurar el nombre de la etiqueta con la cual se mostraran las entradas, buscamos la variable: label1 = "news"; donde nos indica que news es el nombre de la label que esta usando el sistema. Solo debemos de cambiar el nombre de nuestra etiqueta, por ejemplo: Videos. De modo que quedara asi:
label1 = "Videos";
Hasta ahora no hemos hecho que el slider aparezca en el blog, unicamente hemos agregado el estilo en el css y el codigo de configuracion de la etiqueta con sus imagenes o miniaturas y los tiempos que se mostrara cada post.
Ahora vamos a buscar este codigo:
Y pegamos el siguiente codigo abajo, esto hara que el slider o carusel se muestre en el index del blog y no en todas y cada entrada:<div id='main-wrapper'>
<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container".jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>
</b:if>
Listo! tenemos ahora en nuestro blog un slider que se actualiza de forma automatica.
Ver Demo