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.

Elegante forma para mostrar la lista de blogs en blogger

Es muy probable que ya conozcas el elemento "lista de blogs", ofrecido por blogger, que permite enlazar a tus blogs favoritos y mostrar en tu barra lateral sus últimas actualizaciones.

Con esta entrada podrás personalizar la lista de blogs, añadiendo una "casilla" individual para cada bitácora enlazada...

Elegante forma para mostrar la lista de blogs en blogger


1)
Antes de comenzar, comprueba que tienes agregado el elemento "lista de blogs" en la sidebar (barra lateral).

2) Si es así, edítalo y asegúrate de que marcas únicamente las siguientes casillas:


Elegante forma para mostrar la lista de blogs en blogger


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




Busca la etiqueta ]]></b:skin> e inserta estos bloques de CSS encima:

#BlogList1 ul{
background: #fff;
}
.blog-list-container .blog-icon {
visibility: hidden; display: none; height: 0px;
}
.blog-list-container .blog-title, .blog-list-container .blog-title a:visited, .blog-list-container .blog-title a:hover {
color:#467E2A;
font-weight:bold;
line-height:16px;
margin:0 0 6px;
padding-bottom:3px;
text-decoration:none;
}
.blog-list-container .blog-content {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FVzZM8yu9l3xX_E_Izv0aUQBYhyphenhyphenE4hkVRPkuG3otRBpPC_Uu3Rv-WnWWiiNy-NpJ0RQRXRnC4Ncs0lHEDzz-FSm888UDk1iW-vHpxWa65qV_VLrBpHZyt1Io9pELQSVQIxdtPIxhhbo/s1600-r/jbalcon.png) repeat-x scroll 0 0;
height:100px;
padding:8px;
width:195px;
}
.blog-list-container a:link, .blog-list-container a:visited {
color:#3E4584;
font-size:14px;
text-decoration:none;
}
.blog-list-container .item-time {
clear:left;
color:#474747;
float:right;
padding-top: 8px;
font-size:95%;
font-style:italic;
}

Haz vista previa para ver el resultado y guarda la plantilla para terminar.

Si deseas cambiar el aspecto de la lista y no sabes como hacerlo deja un comentario.

Anónimo dice...

Hola Jaime. Cuanto tiempo verdad? :P Yo como siempre te dejo un comentario para pedirte una ayudita. En mi blog hay unas imágenes que puse hace tiempo en la zona donde sale publicada las entradas que voy haciendo que se me han borrado. Ahora sale el típico cuadradito de photob... Como puedo quitarlo? Se que esas imágenes las puse siguiendo unas instrucciones tuyas pero como hace ya tanto tiempo ahora no sé como quitarlas. Gracias por tu ayuda y sigue así.
Besitos

JJ dice...

Jaime:

Nunca te comento, pero hoy lo hago simplemente para agradecerte la labor de divulgación que haces.
Aprendo mucho con tus entradas y, tal vez, algún día implemente alguna.
Gracias de nuevo.
Un abrazo

Jaime Trujillo Escobedo dice...

Ya veo, Dulce. Además afecta bastante al lindo diseño de tus blogs.

Verás, esto me sucedio hace tiempo con otros bloggers. Al alojar imágenes en Photobucket, nos arriesgamos a que éstas caduquen algún día (lo suelen hacer cada 90 días) y se muestre en su lugar, ese odioso mensaje de confirmación.

¿La solución? Alojar las imágenes en un servidor distinto. Te aconsejo al 100% que lo hagas con blogger ya que las imágenes no caducarán nunca y se archivan en tus álbumes de picasa.

¿Cómo alojarlas en blogger? Muy sencillo. Abre una entrada cualquier, sube la imagen o el icono como lo haces normalmente y copia su dirección (sin publicar la entrada).

Después utiliza esa URL para insertarla en el CSS del blog que aplica estilo a determinados artilugios ;).

- Conseguir la URL de cualquier imagen

Si necesitas ayuda para localizar el sitio en el que te gustaría situar cada icono avísame.

¡Abrazos!

Me alegro de volverte a ver por aquí :D.

Jaime Trujillo Escobedo dice...

Hola caminante! Me alegró muchísimo leer tus palabras. Desde que desees implementar un truco en el blog y no sepas como hacerlo o necesites ayuda avísame.

Estoy aquí para ayudarte ;).

kiselbri dice...

Hola jaime: me complace mucho escribirte esta segunda vez para decirte gracias nuevamente, pero gracias porque cree un blog de pruebas y voy intentando poco a poco aplicar lo que explicas tan claro pero que, muchas veces somos nosotros los que pensamos con coherencia y no lo logramos.
He logrado poner la lista de blog como lo muestras, cambiar los colores de fondo y ahora pretendo poner la flecha a la derecha que diga continuar leyendo.... Seguire investigando para poder lograrlo.
Te repito que son personas como tu, las que hacen falta en este mundo.
un abrazo y como lei en tu perfil que amas a los animales, mi perrito reiki tambien lo agradece a ese gesto.

Jaime Trujillo Escobedo dice...

Kitty, me temo que lo de la flechita únicamente se podrá hacer desde el HTML de la plantilla, editando el código de la lista de blogs y añadiendo alguna línea.

Muchísimas gracias por tu comentario, estoy encantado de haberte leído y de tenerte por aquí de nuevo ;).

¡Os envío a ti y a reiki un enorme abrazo!

nidia dice...

griacas gracias gracias

megusto este tutorial... :)

Jaime Trujillo Escobedo dice...

Encantado de haberte ayudado con el tutorial, nidia :D.

Cocina dice...

Hola Jaime!he puesto otro gadget de lista de blog connn el fin de mostrar los ultimos twitts en mi blog quisiera agregarle alguna propiedad para cambiar el color de fuente,el color de fondo,y un borde ,solamente eso podrias ayudarme??
probe con esta entrada pero me quita el icono y ademas me cambia tambien la lista de mis propias entradas que dice ultimos programas..
saludos !!

Jaime Trujillo Escobedo dice...

Claudia, para editar dicho gadge añade estos bloques de CSS siguiendo los mismos pasos citados en esta entrada:

#twitter_div {
background:#F4F4F4;
border:1px solid #CCCCCC;
color:#000000;
letter-spacing:0;
padding:14px;
}
#twitter_div ul li{font-family:FUENTE;}

Reemplaza FUENTE por la fuente de texto a utilizar.
El color de fonfo puede editarse en background:#F4F4F4;, así como el borde (border:1px solid #CCCCCC;). No olvides hacer uso de la tabla de colores para facilitar la instalación ;).

Sonrisagr dice...

Hola, es la primera vez que te escribo y ya pidiéndote consejo.
Primero felicitarte por ayudar a gente como yo.
He hecho paso a paso todo lo que describes en tu entrada pero no consigo que me funcione. No se que hago mal.
Los códigos que van a continuación de " ]]>" o justo encima del mismo?
Agradeciéndote la ayuda, hasta la próxima.
Saludos

Jaime Trujillo Escobedo dice...

¡Bienvenida Sonrisa! Los bloques de código deben incluirse justo encima de la etiqueta ]]></b:skin> para que el truco funcione. Pruébalo nuevamente para comprobar así el resultado.

Muchas gracias por tus felicitaciones, es todo un placer leer cosas así. ¡Saludos!

Unknown dice...

Hola Jaime! Enhorabuena por tu blog y gracias por compartir tus conocimientos con los que estamos aprendiendo :)

Tengo una duda sobre el gadget de "lista de blogs", a ver si me puedes ayudar: ¿sabes si es posible aumentar la longitud del texto de resumen? Quiero decir, cuando añades un blog, puedes elegir la opción de mostrar un fragmento de uno de los posts... Y mi problema es que blogger muestra un número determinado de caracteres "demasiado corto" para lo que quiero hacer en mi blog. ¿Se puede aumentar? ¿Alguna idea? Gracias de antemano y un saludo.

Jaime Trujillo Escobedo dice...

¡Bienvenido Henry! Creo que tengo una solución ante lo que comentas sobre el resumen de los artículos que forman la lista. Prueba a realizar este otro truco y comprueba si es lo que buscas.

Anónimo dice...

I have never seen better than this site.

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