12 julio 2011

Slide automático " últimas entradas "

De nuevo vengo con otro slide pero ha diferencia del anterior que era manual  Slide manual este es automático.

En este Blog observaréis como queda  VER DEMO es totalmente modificable y adaptable a cualquier parte del blog, introduciendo el código en un gadget.

El código lleva todas las explicaciones posibles para su modificación, tanto en tamaño de fuente como colores, a mayor tamaño de imágen mayor altura del Slide, colocándose automáticamente el ancho en cualquier parte del blog tanto encima de las entradas como en la sidebar.

Para cambiar los colores podéis usar la Tabla de colores de este blog.

Antes que nada, cambiar en el código el nombre de mi blog "amorsevillista" por el vuestro, lo encontraréis a continuación de home_page

<style type="text/css">
/* PERSONALIZAMOS EL ESTILO -----------
-------- SLIDESHOW DE ENTRADAS */
/* FONDO */
#menucontent {
background:#575656; /* COLOR DEL FONDO */
padding:8px;
width:98%;
margin:0
}
/* LiNEA DE ABAJO (NuMEROS, PLAY, STOP, INFO) */
#menucontent .menuvku {
margin-top:5px;
border:0
}
#menucontent .menuvku-rig a{
text-decoration:none;
}
#menucontent .menuvku ul {
margin:0px;
padding:0px;
list-style:none;
background:transparent;
border:0
}
#menucontent .menuvku li {
display:inline;
line-height:25px;
border:0;
margin:0px;
padding:0px;
}
/* NuMEROS */
#menucontent .menuvku li a {
background:transparent; /* COLOR DEL FONDO DE LOS NuMEROS */
color:#ececec; /* COLOR DE LOS NuMEROS */
font-family:Arial, Helvetica, sans-serif;
font-size:14px; /* TAMAnO DE LOS NuMEROS */
text-decoration:none;
padding:2px 7px ;
border:1px solid #ececec; /* COLOR DEL BORDE DE LOS NuMEROS */
margin:0px;
margin-right:2px;
}
/* NuMERO ACTIVO */
#menucontent .menuvku li a.tabactive{
background:#ececec; /* COLOR DEL FONDO DEL NuMERO ACTIVO */
font-weight:bold;
position:relative;
color:#000; /* COLOR DEL NuMERO ACTIVO */
border:1px solid #ececec; /* COLOR DEL BORDE DEL NuMERO ACTIVO */
}
/* IMAGEN */
#menucontent .menuvku-rig img{
float:right;
padding:4px 5px 5px 0;
border:0
}
/* CONTENIDO */
#menucontent .menucontent1 {
background:#ffffff; /* COLOR DEL FONDO DEL CONTENIDO */
border:1px solid #BF0505; /* COLOR DEL BORDE QUE RODEA EL CONTENIDO */
padding:4px 3px;
margin:0px;
}
</style>
<script language="JavaScript">
imgr = new Array(); // <-- NO TOCAR
// IMAGEN QUE MUESTRA AL NO TENER UNA PROPIA LA ENTRADA
imgr[0] = "https://lh3.googleusercontent.com/-UWO_us2jM9k/TY4fzoxiGcI/AAAAAAAAAN8/dxZIf9hi9yk/s1600/sin-imagen.png";
// IMAGEN BOToN PLAY 16x16 píxels
img_play = "https://lh4.googleusercontent.com/-B46iQLN8j1A/TY4fzMA16hI/AAAAAAAAAN4/hWVUm-K76bY/s1600/play.gif";
// IMAGEN BOToN STOP 16x16 píxels
img_stop = "https://lh3.googleusercontent.com/-qflnaVfbYfI/TY4fz-0VARI/AAAAAAAAAOA/ZQ73-NKEKyg/s1600/stop.gif";
// TAMAnO DE LAS IMaGENES
imgwidth = 170; // ANCHO
imgheight = 170; // ALTO
// TiTULOS DE LAS ENTRADAS
fntsize = 14; // TAMAnO FUENTE
acolor = "#000000"; // COLOR FUENTE
// DESCRIPCIoN DE LAS ENTRADAS
entradasPost = 400; // CANTIDAD DE TEXTO
entradasFontsize = 12; // TAMAnO FUENTE
entradasColor = "#000000"; // COLOR FUENTE
// COMENTARIOS
showPostComent = true; // true para mostrar, false para ocultar
text = "comentarios"; // TEXTO
cfntsize = 12; // nFUENTE
ccolor = "#9E0707"; // COLOR FUENTE
// FECHA DE LAS ENTRADAS
showPostDate = true; // true para mostrar, false para ocultar
bfntsize = 10; // TAMAnO FUENTE
bcolor = "#776E6E"; // COLOR FUENTE
// CONTINUAR LEYENDO
showPostContinuar = true; // true para mostrar, false para ocultar
clltext = "Continuar leyendo &#187;"; // TEXTO
clfntsize = 14; // TAMAnO FUENTE
clcolor = "#C00D0D"; // COLOR FUENTE
var tabcount = new Array("7") // NuMERO TOTAL DE ENTRADAS, DE LA 1 A LA 10
var changespeed = 4; // DEMORA EN SEGUNDOS
home_page = "http://amorsevillista.blogspot.com"; // LINK DEL BLOG SIN / AL FINAL
</script>
<script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/slider.js' type='text/javascript'></script>
<div id='menucontent'>
<div class='menucontent1' onmouseover ='javascript:stop_autochange(); return false;' onmouseout ='javascript:restart_autochange(); return false;'>
<!-- LINK ENTRADAS -->
<div id="tabcontent1"><script>
document.write('<script src="'+home_page+''+rss_page+'1'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent2"><script>
document.write('<script src="'+home_page+''+rss_page+'2'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent3"><script>
document.write('<script src="'+home_page+''+rss_page+'3'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent4"><script>
document.write('<script src="'+home_page+''+rss_page+'4'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent5"><script>
document.write('<script src="'+home_page+''+rss_page+'5'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent6"><script>
document.write('<script src="'+home_page+''+rss_page+'6'+rssb_page+'"></scr' + 'ipt>');</script></div>
<div id="tabcontent7"><script>
document.write('<script src="'+home_page+''+rss_page+'7'+rssb_page+'"></scr' + 'ipt>');</script></div>
<!-- Agregamos o quitamos las entradas hasta 10, cambiando los número en el ID y en el script. La cantidad tiene que ser igual a la de los números. -->
<!-- FIN LINK ENTRADAS -->
</div>
<script>
document.write(''+div_easytabs1+''); // NO TOCAR
document.write(''+home_info+''); // NO TOCAR
document.write(''+div_easytabs2+''); // NO TOCAR
// LOS NUMEROS DEL 1 AL 10
document.write(''+li_easytabs1+'');
document.write(''+li_easytabs2+'');
document.write(''+li_easytabs3+'');
document.write(''+li_easytabs4+'');
document.write(''+li_easytabs5+'');
document.write(''+li_easytabs6+'');
document.write(''+li_easytabs7+'');
// Agregamos los números, tienen que ser igual cantidad a las entradas.
// FIN NUMEROS
document.write(''+div_easytabs3+''); // NO TOCAR
document.write(''+div_easytabs4+''); // NO TOCAR
</script>
</div>


Si tenéis algún problema con su instalación " yá sabéis, comentario y dudas resueltas"

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

14 comentarios

Hola, me gustaria enlazar mi blog y el foropuntopelota.com con vosotros. La verdad sería un honor.

Saludos!

PD : Mi nick es bem, y la web elblogdebem.blogspot.com // Opinar con cuenta me ha sido imposible, no me deja la pagina.

Este comentario ha sido eliminado por el autor.

Gran aportación Antonio. Muchas gracias. Un saludo.

Pfff necesitaria ayuda antonio porque no se rellenar lo que viiene en el codigo. Un saludo

¿Alguna ves te habian dicho lo crack que eres? Seguro que si y yo lo repito. Grande! ;)

elsevillismo.blogspot.com

Soy bem, no me deja con la cuenta. Enlazado!! PD : EL Foro www.foropuntopelota.com no es del programa, ahora es libre

GRACIAS POR TU TRABAJO!!!!!! Este es el unico que he encontrado que funciona. MUCHAS GRACIAS.

Aprender es Facilisimo

Hola mira lo que me hace..porque puede ser??

http://laradioba.blogspot.com/

Pués no sé, porque no veo nada.
No lo veo instalado en tu blog.

disculpa ahi lo volvi a insertar para que veas lo que ocurre
Gracias por tu tiempo

La verdad es que es raro lo que te ocurre, no lo entiendo, ¿tu has colocado el Slider en un gadget Html y encima de entradas de blog?

Bien, ya veo, tienes instalado otro slider en la plantilla lo cual genera conflictos, debes eliminar todo lo del slider de la plantilla y luego colocar este.

Haz una copia de la plantilla (backup)y luego elimina todo lo del Slider desde :
Script y estilos SlideShow

hasta

if($$('#slide-images>li').length > 1) start_slideshow(delay);
});
//]]>
</Script>

Grande!! Gracias a tu ayuda, me encanta aún más mi blog jeje, buen trabajo


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"