31

Ultimos posts de Beautiful Beta modificado por Todo-links

Hace algún tiempo Wells de Todo-links tubo la amabilidad de informarme de una modificación que había hecho en el script que Beautiful Beta proporciona para mostrar las últimas entradas en la sidebar.
Wells no solo fue tan atento que me hizo saber de su trabajo con el script, sino que incluso me hizo llegar las instrucciones completas para instalarlo.
Wells ha respetado al autor original y yo he decidido hacerlo también no eliminándolo en el código.

Ejemplo Todo Links

Para empezar a usarlo tan solo hemos de copiar y pegar este código en un nuevo elemento HTML-Javascript y colocarlo en el lugar escogido de nuestra sidebar, cambiando donde dice "dirección de tu blog" por la del nuestro:

<script src="http://weells.todolinks.googlepages.com/todoultipost.js"></script>
<script language="javascript">
var numposts = 25;
var showpostdate = true;
var showpostsummary = true;
var numchars = 120;
var autoestilo = false;
var todoespacio = true;
var todolist = true;
var tododesplaza = true;
var todovelocidad = 2;
var todoaltura = 200;
</script>
<script src="http://direcciondetublog.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Explicación del uso de las variables:

numpost = valor entero (Número de post que quieren visualizar). Valor máximo: 25
showpostdate = true (Muestra la fecha de publicación del post) / false (para ocultar)
showpostsummary = true (Muestra el contenido textual del post) / false (ocultar).
numchars = valor entero (Número de caracteres del texto del post) Máximo valor recomendable: 400
autoestilo = true (el texto del contenido tiene estilo cursiva y su tamaño es del 85%, la fecha aparece al comienzo del primer renglón del texto de contenido).
false (texto plano, tamaño 100%. La fecha aparece en la misma línea del titulo. Puedes usar código CSS para modificar el estilo del “titulo con fecha” y del “texto de contenido”).
todoespacio = true (deja una línea vacía entre títulos.) / false (sin línea de espaciado.)
todolist = true (visualización de los post como listas.) / false (Todo lo contrario.)
tododesplaza = true (activa el desplazamiento del texto de abajo a arriba) / false (texto estático).

Si el valor de tododesplaza es true se aplican las siguientes opciones:

todovelocidad = valor entero (velocidad del desplazamiento del texto). Valor mínimo: 1. Máximo recomendable: 10
todoaltura = valor entero (altura del bloque donde se desplazará el texto. La medida es en pixeles). Valor máximo recomendado: 500.

Si el autoestilo tiene el valor de false usamos el siguiente código para personalizar nuestro estilo.

Lo colocamos en el CSS, por ejemplo, antes de ]]>,</b:skin>

.Todotitulo {
font-weight: bold; //es para darle el efecto de negrita al texto
font-size: 100%; //tamaño del texto en porcentaje
font-style:italic; //efecto de cursiva
color:#ffffff; //color del texto }
.Todotexto {
font-weight: bold;
font-size: 100%;
font-style:italic;
color:#ffffff; }


Puede parecer un poco complicado con tantas variables e instrucciones, aunque en mi caso no he modificado nada más que el "var altura" y he dejado las demás variables tal cual están en el código, ya que el texto se adapta automáticamente al estilo del blog.

Para añadirle el subir/bajar y podamos hacer que el texto se desplace hacia arriba o hacia abajo, copiaremos después del código que hemos puesto dentro del elemento, estas líneas:

<br/><center><a style="color: rgb(166, 196, 255);" href="javascript:void(0);" onclick="getElementById('todoposts').direction='down';">Bajar</a><span style="padding-left: 30px;"><a style="color: rgb(166, 196, 255);" href="javascript:void(0);" onclick="getElementById('todoposts').direction='up';">Subir</a></span></center>

El color del texto "subir" y "bajar" podemos cambiarlo en "rgb(166,196,255)".
Para añadir un icono con unas flechitas, por ejemplo, sustituimos "subir" y "bajar" por la url de la imagen del icono: <img src="Url_del_icono"/> o podemos dejar texto e imagen juntos.

En este link podéis consultar el manual completo que Wells nos proporciona, y si alguna duda surge, lo mejor es consultar con Wells en Todo-links, estoy segura que cualquier cosa os atenderá encantado.

¡Gracias Wells!

Nota:
El script funciona desde Google Pages, para evitar problemas podéis descargarlo desde mi alojamiento (botón derecho, guardar como...) y subirlo al vuestro.
Si lo hacéis así, el script que bajéis no llevará incluida la publicidad de los autores.

Entradas Relacionadas:

31 comentarios:


Charete

Muy buenas Rosa.
Como ves sigo estando aquí pendiente, al pie del cañón, ultimando los preparativos para el viaje a China a por mi segunda niña (el viernes 19 de octubre). Realmente espectacular el cambio al Blog, ME ENCANTA. ¿Puedes darle un vistazo el mío? (http://susanaymarta.blogspot.com/), he intentado colocar el Bloque de "Ultimos Post", en mi caso "Ultimas Entradas" y como verás funciona a la perfección, pero la plantilla que tengo "Harbor", se corta arriba, no sale todo el edificio lateral derecho, ni el cielo. ME PUEDES AYUDAR A SOLUCIONARLO. Gracias nuevamente.

charete

Perdóname Rosa es el lado Izquierdo el que no aparece

charete

Un olvido más. He utilizado el código exactamente igual que el que aparece en tu blog, solamente he modificado "autoestilo" de false a true y "todoaltura" de 200 a 350. El resto tal y como.

Muuuuuuuchas Graciaaaaaaaaaaaaas

Noa

Ya lo he hecho, Me encanta! Me gustaria poner lo de subir y bajar, pero no se que codigo seria para poner el color acorde con mi blog...

Weells

Noa... Si quieres que use el color por defecto que usa tu platilla para los enlaces simplemente le quitas estas partes al código style="color: rgb(166, 196, 255);"

Rosa

¡Gracias Wells por estar al tanto y por el código! ;-)

Rosa

Charete, he mirado tu blog con Internet Explorer y con Firefox y lo veo todo bien...¿Será cosa de tu navegador o del PC?

Weells

Acá les dejo el manual que le envié a Rosa http://www.fileden.com/files/2007/8/27/1386672/Manual.Widget.ultimospost.v1.1.pdf complementa un poquito lo que ella ya posteo.

He pensado en modificar el script para los últimos comentarios usando un nuevo método para el desplazamiento, cuando lo haga se lo voy a hacer llegar a Rosa porque tal vez a alguien le resulte util, ya que mi no porque en mi blog nadie postea, jejeje.

Por cierto me gusta mucho el nuevo diseño que tiene el blog. Yo aún sigo arreglando el mio, soy malo combinando colores.
Salu2

Talin

Hola Rosa
Muy buena este post. Lo he incluido pero no se porque el código del autor sale superpuesto y no se ve bien.
Me puedes ayudar por favor. GRACIAS

Rosa

Talin, mete el último código (el añadido para subir y bajar) entre <p> y </p>

Talin

Nada Rosa, lo he puesto como has dicho pero sigue ilegible.

Talin

Hola de nuevo Rosa
Quisiera también modificar con Todotitulo y Todotexto pero no se exactamente donde colocar el código. No encuentro eso del CSS. GRACIAS

charete

Muy buenas Rosa y Weells. Haber si me explico bien.
PRIMERA PARTE:
He tenido que instalar Internet Explorer 7 para poder comprobar lo que dices Rosa. Efectivamente es verdad que en Mozilla Firefox y en Internet Explorer 7, se ve perfectamente la plantilla "Harbor", que es la que he utilizado para el Blog, aunque se ve un marco de doble línea blanca alrededor del blog y además está delimitado el tamaño del mismo blog (Tengo un monitor de 21 pulgadas y no ocupa el blog toda la pantalla como sí lo hace mi mismo blog si utilizo otras plantillas). Todo esto no sale con Internet Explorer 6 que es el navegador que tenía instalado por defecto en mi equipo con XP, donde en mi equipo personal de casa, SÍ ocupa toda la pantalla de 21 pulgadas mi Blog con dicha plantilla "Harbor".

Por lo tanto, sigo teniendo el mismo problema en mi portátil, el cual me voy a llevar al viaje a China; en mi ordenador del curro; y en los ordenadores de parte de mi familia y amigos que no tienen instalado ni Explorer y ni Mozilla Firefox.

Estoy convencida que el problema radica en la plantlla "Harbor". ¿Por favor si alguno de vosotros tiene instalado en algún ordenador el Explorer 6, puede verlo y comprobar lo que digo?. El marco de doble línea blanca no sale y la imagen que aparece en la zona lateral izquierda tampoco, sale cortada casi desde el principio.

Gracias de verdad.

charete

SEGUNDA PARTE:
He intentado instalar la opción de "Subir" y "Bajar" y tampoco me sale bien. Me explico:

Copio el código tal cual esta en tu blog Rosa, pero dichos links de "Subir y Bajar", no están estáticos, sino que aparecen y desaparecen como si fuera otra entrada, no queda como tu blog, en el cual las entradas tienen movimiento y los link de "Subir y Bajar" están quietos.

Por favor me marcho el jueves para Barajas y el Viernes camino de China y me gustaría tener ultimado el Blog para entonces. Sé que es mucho pedir pero os agradecería enormemente vuestra ayuda y comprensión.

De todas formas muchísimas gracias Rosa por estar siempre ahí y a tí Weells por compartir cosas tan geniales como la que nos ocupa.

Un saludo

charete

Hola, Hola, Hola.
Perdonadme por favor, pero he solucionado todo, todo, todo el problema. Por favor que contenta y nerviosa estoy.

Os explico, simplemente era que tengo actualmente 14 entradas nada más en el Blog, ya os he dicho que es para mi viaje a China a por ni segunda niñita "Marta", pues bien, como tenía en la variable numpost=25, lo he bajado a 10 y es entonces cuando se ha producido el milagro y han aparecido los links de "Subir" y "Bajar" totalmente estáticos y la plantilla completa y perfecta.

Siento la parrafada anterior pero llevo desde ayer haciendo pruebas e intentándolo todo y la solución ha venido como por arte de magia y cuando más lo necesitaba.

Lo siento nuevamente.

Weells

charete... al leer tu primer mensaje entre a tu blog pero como uso el mozilla lo vi bien y pense que ya lo habías arreglado... me alegra que hayas encontrado la solución y creo que el error se origino porque en su blog no tenían 25 entradas por eso fue correcta tu solución de mostrar solo 10 de las 13 entradas que tienes

Weells

talin... en el post Rosa explica que pudes poner el codigo CSS antes de ]]>,</b:skin> . Pero también funciona si lo pones en el mismo bloque, después del código de últimos post; en medio de tag style. Quedaría algo así

<script src="http://weells.todolinks.googlepages.com/todoultipost.js">
</script>
... continua tooooodo el inmenso codigo que generé -_-' .....
<script src="http://direcciondetublog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

y luego esto

<style>
...aca va tooodo el codigo css para cambiar el estilo...
</style>

Weells

También acabo de hacer un cambio en el código para que se vea bien en el blog de talin, pero ahora el espaciado entre las lineas de los créditos aumento y también reduje el tamaño de esas letras a 9px. Salu2.

Rosa

Charete, fantastica noticia, me alegro mucho, podrás irte con el blog perfecto para trabajar en el desde ¡China! ;-) Buen viaje y que todo salga bien con la peque!

Rosa

Wells, gracias de nuevo por tu ayuda.

Me preguntaba si tu has puesto en tu blog esta explicación, porque si es así, estaría bien que el link del widget llevara a esa entrada.Podrías ayudar a la gente que lo instale respondiendo sus dudas desde tu blog y así ganarías en visitas. :-)
Eso si, no dejes de rondar por aquí ¿eh? por si también te necesitamos, je,je.

Generación 2006 Colegio Alcántara-Peñalolén

hola Rosa, encuentro genial tu página, segui los pasos que, funciona por que los muestra, pero al momento de ir mi blog, no me muestra el resto de los link que tengo y otra pregunta es como hacer los cuadros que tienes a la derecha
saludos y gracias

Rosa

Generación, perdona, pero no entendí bien lo que quieres decir...cuando dices que se muestra...te refieres a tu blog??

En cuanto a lo de enmarcar los widget, dependerá de la plantilla que estés usando, no tienes habilitado tu perfil y no he podido verla, lo siento.

charete

Hola Rosa. Muchas gracias por todo, espero tener un viaje feliz de ida y vuelta y llenar el blog cada día con infinidad de cosas.

Hola Weells. Muchas gracias tambíén por contestar, efectivamente el error venía por la cantidad de entradas que actualmente tengo en el blog y la cantidad que aparecía en el código.

charete

Una última cuestión que todavía no he solucionado.

El blog sigue sin salir de forma (A PANTALLA COMPLETA) en cualquier equipo que tenga un monitor mayor de 15 púlgadas o con una resolución mayor de 1024x768, con Internet Explorer 7 o con Mozilla Firefox, es decir, que en cualquier equipo que tenga instalado el Internet Explorer 6 SÍ SE VE A PANTALLA COMPLETA, "por ejemplo en mi portátil", además de eso, tampoco sale el famoso marco de línea doble blanca que sí sale en Explorer 7 y Mozilla.

¿Alguno de vosotros sabe como puedo hacer para que en ambos Navegadores Explorer 6 y 7 y Mozilla y a cualquier resolución se vea el blog a pantalla completa?

En el equipo de mi casa, ya sabeis con la pantalla de 21 pulgadas, el blog no sale a PANTALLA COMPLETA, sí sale el blog completo pero ocupando 2/3 de la pantalla.

Si me decís como puedo enviaros unas imágenes capturadas de lo que os cuento igual os haceis una idea más clara y precisa de lo que os cuento. En este correo personal rosariosaponi@gmail.com.

Talin

Gracias Weells y Rosa.

Weells

Charete mandame unas screens a admin@todo-links.com ... pero desde ya te digo que es muy complicado programar una web que sea compatible con toooodos los navegadores web, la mia por ejemplo se ve muuuy diferente en IE y en Mozilla, hasta el tono de los colores cambia :( ... pero ahora en cuanto a la resolución se podría usar un script que detecte el tamaño de pantalla, y si es mayor a 1024x768 agrande la web, hacer esto es difícil si el diseño de la plantilla es complicado... a mi me parece que en tu caso se podría hacer.

Esmeralda

Hola Rosa! Como siempre,entro a tu blog y encuentro la solución a lo que busco,muchas gracias por eso! Puse el widget con mis ultimos post sin problemas con tu buena explicación! :)Saludos.

El Griego

Buenas Y Santas Rosa...

Hace una semana aproximadamente te envié un correo preguntándote sobre un error con este bonito script. Me contestaste, claro, pero aun asi seguia con un problemita de visualizacion en mi blog. Bien, resulta que solo por probar intente la solucion que Charete implementó en el suyo, reducir el numero de entradas visibles. Fin del problema. Ahora funciona normalmente. Asi que la solucion estaba aqui nomas... Leer, solo leer. Gracias Rosa!

Rosa

El griego, pues siento no haber pensado en eso. La verdad, no se me ocurrió, en la entrada pone que elmáximo valor del nº de post es 25, pero normalmente si pones más, el único problema que surge es que no se muestra el contenido del widget. Es lógico pensar también que si solo has publicado 12 entradas, por ejemplo, has de poner un número igual o menor para que funcione...

En fin, perdona si no supe atenderte correctamente. Hago lo que puedo o se me ocurre en cada caso.
¡Gracias!

David J. 'Batto'

Buenas, ¿el subir y bajar, sólo funcionan si tienes activado el desplazamiento?

Saludos

Rosa

David J. 'Batto' Lo que has de hacer es descaragarte el script tal como indico al final de la entrada y subirlo a tu propio alojamiento... todolinks ya no existe, pero el script ahí está.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S