Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Rotador, Slider o Carrusel de artículos destacados en tu blog

Es una aplicación para mostrar contenido destacado del blog. Resulta ideal para bitácoras de noticias, de artículos variados o simplemente para atraer la atención de los lectores hacia un conjunto de entradas.



Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta </head> y justo antes añade estas líneas:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/blarticRotador1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/blarticRotador2.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptsbalcon/b/blarticRotador3.js' type='text/javascript'/>
<link href='https://sites.google.com/site/scriptsbalcon/b/blarticRotador4.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });
});
//]]></script>

<style>
.balcnAnterior{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFd6GxZ0dxSj8KbgL-fKV-yvP3Ywzy3R30BysIeHs_GhCAdyvlfBI2aiSGu68SEBndnEpK-c7zUfb3b-q_XThbYwa7gC_wuKyLN_6c5N4jE3zlHR52vMx19xYTIz4ss4tK7eDzzFDH4ol/s320/blflechi1.png);}
.balcnSiguiente{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkGldFxGOfuY6lmdxyHW_VaX9c9lnXQSnEwlRjVWkTzboDv9zAU8ufESwRHIIpjwidKMP_SmjSBO9nljHui_GDU-FVf4fVRBTmZJC-j0xIiKI5L2t0ZeisxgGBvLKFgd0diTkFBY0n9s2/s320/blflechi2.png);}
</style>

Las líneas resaltadas en color grisáceo corresponden a las imágenes de flecha apuntando hacia la izquierda y de flecha apuntando hacia la derecha -respectivamente. Para editar los iconos, cámbialas por la nueva URL.

Ahora guarda la plantilla.

Diseño>añadir gadget (elemento de página)>html-javascript




Inserta este código en su interior:

<div id="balcnSlider1">
<div class="balcnSliderFila">
<a href="#" class="balcnAnterior"></a>
<a href="#" class="balcnSiguiente"></a>
<div class="clear"></div>
</div>
<div id="balcnSlider2">
<div class="balcnSlider3">
<ul>

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>

</ul>
<div class="clear"></div>
</div>
</div>
</div>

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".balcnSlider3").jCarouselLite({
btnNext: ".balcnSiguiente",
btnPrev: ".balcnAnterior",
visible: 1,
easing: "backout",
speed: 1000
});
});
</script>

Reemplaza DIRECCION con la dirección del artículo (se debe incluir dos veces), TITULO con el título de la entrada, RESUMEN con una breve descripción o una frase del post y URL IMAGEN con la dirección de la imagen que representará al artículo.

El widget mostrará un total de tres entradas. Para añadir más tan solo debes agregar este bloque tantas veces como posts desees mostrar:

<li>
<div class="balcnSContenido">
<h2><a href="DIRECCION" title="Leer artículo">TITULO</a></h2>
<p>RESUMEN... (<a href="DIRECCION">Seguir leyendo...</a>)</p>
<img alt="" src="URL IMAGEN" />
</div>
</li>

Recuerda que debe estar siempre antes de:

</ul>
<div class="clear"></div>

Guarda el gadget, arrástralo hasta la zona superior del bloque de entradas y comprueba el resultado.

Charles Francis dice...

me gustaría saber si en este Slide se puede regular el ancho del mismo, ya que sobrepasa el límite de la entrada encimándose con la sidebar.
desde ya gracias

JTobaruela dice...

Jaime buenisismo, desde lo más profundo mi más sincera enhorabuena por el blog. Chapo¡¡

JTobaruela dice...

Aunque imagino que ya con tu propio diseño no se podra hacer?

Lupe Bicos dice...

Bueno, no sé como empezar, ya que es la primera vez que escribo en este blog.
Darte las gracias por todo lo que haces por nosotros sería y es un muy buen comienzo. Por ello... GRACIAS JAIME!

Te sigo desde hace unas semanas, te encontré de casualidad y por suerte y ya soy adicta.

Tenía una web, pero me complicaba muuucho la vida. En febrero la daré de baja, ya que ahora tengo (gracias a ti) un blog con el que estoy encantada.

Este nuevo truco que nos enseñas es fantástico, estoy intentado llevarlo a cabo (tardaré pero me saldrá,;) lo prometo)
De momento aun tengo que ubicarlo,espero hacerlo en el sitio correcto.

De nuevo... muchísimas gracias Jaime.

Lupe Bicos dice...

Hola de nuevo Jaime. Tengo una duda, algo debo estar haciendo mal.
¿Por que me sale el título debajo de la imagen?
Gracias.

Jaime Trujillo Escobedo dice...

Carlos Gutierre, añade esta línea en el gadget html javascript del segundo paso:

<style>#balcnSlider1 {width: 610px;}</style>

La cifra 610 es el ancho actual del marco. Disminúyelo para ajustarlo a tu plantilla.

Jaime Trujillo Escobedo dice...

Javier, depende de a lo que te refieras con 'tu propio diseño'. Cosas como editar el color de fondo o el color del texto podría hacerse.

Jaime Trujillo Escobedo dice...

¡Bienvenida Lupe Bicos! Tras haber leido el comentario debo darte yo las gracias por tus palabras. Para mi es un honor que nos hayamos encontrado y que gracias al Balcón te hayas decidido por construir un blog y personalizarlo a tu gusto.

No cabe duda que será un gusto ayudarte en todo lo que necesites. Escribe un comentario por cada duda que tengas y trataré de responderte lo antes posible.

Un fuerte abrazo.

Jaime Trujillo Escobedo dice...

Lupe Bicos, para solucionar el problema del título, prueba a colocar el gadget sobre las entradas de tu blog o en la posición definitiva. Una vez tengas claro el lugar en el que lo vas a dejar, avísame. El márgen variará según donde lo coloques ya que se atribuyen también las propiedades del h2 general (en este caso, del .main-inner).

Anónimo dice...

Hola Jaime esta buenisimo el slide, ya lo estoy poniendo y queda espectacular, pero te hago una pregunta... ¿hay algun codigo para agregar y que el slide quede automatico ademas de manual? osea el AUTOSTEP, desde ya muchas gracias, espectacular el blog !

Charles Francis dice...

Gracias Jaime, pude arreglar el ancho del slide. me gustaría saber si se puede colocar otro color de fondo y de texto.
Un Abrazo
carlos

JTobaruela dice...

Efectivamente el color de fondo y el de la letra, una vez más gracias

Santy López dice...

Y yo que estoy haciendo mal Jaime? por que no se ven las dos flechas, ya probé a cambiarle el color del fondo por si era el mismo, tengo que poner las miniaturas no tan pequeñas para que no pierdan detalle como algunas, ya lo arreglo. muchisimas gracias

Lupe Bicos dice...

Hola de nuevo Jaime. Gracias por la bienvenida y por las respuestas.
Ya he decidido el lugar el rotador, me gusta como queda en ese lugar. Pero sigo con el mismo problema.
Lo he agrandado un poco gracias a la respuesta que le das a Carlos Gutierre, y así conseguir las mismas lineas.
Peeero, no sé el motivo o el error que cometo, ya que me aparece la fotografía tapando el título.
¿Tendría solución en caso de dejarlo en ese lugar?
Gracias nuevamente.

Majonyjony dice...

Hola Jaime de nuevo!
Me encanta el efecto, sería posible que rotara de manera automatica?

Dennious dice...

Hola señor jaime tengo una duda, como agrega otra etiqueta en la etiqueta
/body y body

Porque quiero tener el bloqueador de ctrl pero al igual el ondrag para que no se arrastre nada en el blog.

alguna solucion?:) Buena pagina

Jaime Trujillo Escobedo dice...

Carlos Gutierre, para cambiar el color de fondo y editar el texto utiliza estos bloques:

<style> .balcnSContenido {background:CODIGO;}
.balcnSContenido p{color: CODIGO;font-size: 12px;}</style>

Debes incluirlo en el gadget html-javascript, tal y como hiciste con la línea del ancho.

Edita el primer término CODIGO por el código del color de fondo. Para cambiar el color del texto, incluye el valor hexadecimal del color escogido en la segunda línea (eliminando antes el término CODIGO).

Puedes personalizar el tamaño del texto aumentando o disminuyendo la cifra actual (12).

Jaime Trujillo Escobedo dice...

Javier, en el comentario número 16 de esta misma entrada encontrarás la solución que buscas.

Jaime Trujillo Escobedo dice...

Santy López, no entiendo lo que quieres decirme. ¿Guarda alguna similitud con el contenido de esta entrada? En caso de no hacerlo, por favor, escribe un comentario en donde lo haga.

Asegúrate de indicarme con exactitud lo que ocurre.

Jaime Trujillo Escobedo dice...

Lupe Bicos, para solucionar el problema del título añade esta línea al final del código que incluiste en el gadget html-javascript destinado al rotador de artículos:

<style>.main-inner .balcnSContenido h2{margin-left:42%;}</style>

Pulsa el botón guardar y comprueba el resultado.

Jaime Trujillo Escobedo dice...

Por supuesto Majonyjony aunque requeriría el uso de otro script. Quizás en el próximo artículo con respecto a jQuery hable de un rotador automático.

Jaime Trujillo Escobedo dice...

Idennis12, tal vez al final de esta entrada, en la lísta de artículos relaccionados, encuentres lo que buscas.

Santy López dice...

me refiero al carrusel que instale en mi blog, no se ven las flechas, gracias

Jaime Trujillo Escobedo dice...

Santy, el script no incluye el atributo que mostraría la fecha de publicación de cada entrada. Me temo que la única forma de añadirlas será manualmente, en el resumen.

Jaime Trujillo Escobedo dice...

¡Bienvenido PS3 Argento! Al igual que le comenté a Majonyjony, un slide automático es fácil de instalar pero requiere un script distinto. Probablemente publique otro tutorial en el que os muestre su instalación.

Anónimo dice...

Las flechas Jaime, no las fechas.
Santy

Lupe Bicos dice...

Solucionado!!
Me encanta como queda.
Mil gracias Jaime por tu paciencia.

Jaime Trujillo Escobedo dice...

Me alegra, Lupe Bicos. Obtuviste el resultado perfecto. Gracias a ti por comentar, ¡Sigue así con el blog!

Jaime Trujillo Escobedo dice...

Santy López, las fechas no se visualizan por haberse editado la URL o dirección de éstas en el código. No puedes añadir la dirección de tu blog en la URL de una imagen alojada en blogger.

Si acaso, guárdala en tus documentos y súbela en una entrada de prueba para obtener la nueva dirección.

Daniel Enriquez de Guevara dice...

Todo muy bien pero al disminuir el tamaño el contenido no se ajusta, y por tanto parte no se ve ¿Qué se puede hacer?

Gracias

Jaime Trujillo Escobedo dice...

Daniel, necesito la dirección de tu bitácora para poder comprobar el gadget y ajustar el ancho del bloque interior perteneciente al texto.

Cocina dice...

Jaime se te extraña mucho!siento que me falta alguien...por favor nunca lo cierres!!!un beso enorme de tu fiel seguidora claudia desde argentina.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo