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...
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:
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.
¿Problemas al comentar? Utiliza 
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
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
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.
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 ;).
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!
griacas gracias gracias
megusto este tutorial... :)
Encantado de haberte ayudado con el tutorial, nidia :D.
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 !!
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 ;).
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
¡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!
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.
¡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.
I have never seen better than this site.