Principal | Indice | Ir Arriba
Te recomiendo Rincón Ubuntero

Slide Show automático alimentado por feed

Abajo pueden ver un Slide Show de noticias que se alimenta del Feed de blogger, por lo tanto no es necesario actualizar la información, ni llenar nada, solo copian el código que les voy a dar a continuación.

Es muy dificil conseguir que se alimenten solos y sean funcionales, creo que logre eso y a muchos les va a servir, con un poco de CSS cada uno puede lograr que se vea como quieran, obteniendo mayor personalización.





Si ya tienen Jquery agregado en su plantilla agregan un gadget HTML/JavaScript y pegan estas lineas

<style type="text/css">
#slideshow {
	margin: 0 auto;
	width: 640px;
	height: 263px;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/bg_slideshow.jpg) no-repeat 0 0;
	position: relative; }
 
	#slideshow #slidesContainer {
		margin: 0 auto;
		width: 560px;
		height: 263px;
		overflow: auto; /* allow scrollbar */
		position: relative; }
 
		#slideshow #slidesContainer .slide {
			margin: 0 auto;
			width: 540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
			height: 263px; }
 
/** 
 * Slideshow controls style rules.
 */
.control {
	display: block;
	width: 39px;
	height: 263px;
	text-indent: -10000px;
	position: absolute;
	cursor: pointer; }
 
#leftControl {
	top: 0;
	left: 0;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/control_left.jpg) no-repeat 0 0; }
 
#rightControl {
	top: 0;
	right: 0;
	background:transparent url(http://sites.google.com/site/rinconbloguero/images/control_right.jpg) no-repeat 0 0; }
 
/** 
 * Style rules for Demo page
 */

#pageContainer {
	margin: 0 auto;}

.slide a {
	text-decoration: none;}
 
.slide h2, .slide p { margin: 15px; color: #ccc; font-size: 11px; line-height:1.3em;}
 
.slide h2 {
	font: italic 24px Georgia, "Times New Roman", Times, serif;
	color: #ccc;
	letter-spacing: -1px; }
 
.slide img {
	float: right;
	margin: 0 15px;
	padding: 0 5px; }
</style>
<script src="http://sites.google.com/site/rinconbloguero/javascript/summarySS.js" type="text/javascript"></script>
<script type="text/javascript" >
var numCharsSS = 500;<!-- Number Characters displayed-->
var numPostsSS = 5;<!-- Number posts displayed-->
</script>
<script src="http://rinconubuntero.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtocSS"></script>

Si no tienen Jquery agregan esta linea al principio de los javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Buscan y cambian numCharsSS = 500; y numPostsSS = 5; por los numeros de caracteres que quieren mostrar y los posts que se van a deslizar.

1 comentarios :

  1. Es una pasada compañero! Por casualidad no tendrás uno que gire automaticamente? cada x segundos?! :P :P :P

    ResponderEliminar