Ya había explicado anteriormente como colocar el ranking de estrellas en Blogalaxia para la versión nueva de Blogger.
Hoy he recibido una consulta de Revista Butaca para colocar las estrellitas en la plantilla clásica, así que explicaré a continuación la forma de hacerlo.
Recordaremos que antes de colocar el sistema de votación en nuestra plantilla, hemos de estar inscritos en Blogalaxia.
Localizaremos esta parte del código en nuestra plantilla:
</div>
<!-- End .post -->
Y justo ENCIMA, colocaremos el código necesario para nuestras estrellas:
</p>Vota este post
<iframe src="http://rank.blogalaxia.com/pbrate.php?color=ffffff&url=<$BlogItemPermalinkUrl$>"
width=70 height=15 scrolling=no frameborder=0 marginheight=0 marginwidth=0
style='margin:0; padding:0'></iframe> Sustituimos "Vota este post" por el texto que queramos, o simplemente, lo eliminamos si solo queremos mostrar las estrellas de votación.
En color=ffffff podemos poner el color de fondo para nuestras estrellas, que más nos guste.
Ranking 5 estrellas en Blogalaxia (Plantilla clásica)
Plantilla Harbor con tres columnas
Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Se me olvidó el post en "borradores" hasta hoy que recibí un email de Julio donde me pide las tres columnas para la Harbor, así que ¡allá va!
El ancho del blog, columnas y post que yo uso en el ejemplo, es siempre el que considero el más correcto, más que nada, porque lo he probado con IE y Firefox, y se ve optimamente en los dos navegadores. Cada uno puede luego modificarlo según sus necesidades, usando las explicaciones como simple guía.
Bien, en primer lugar, voy a explicar como colocar una nueva sidebar a la plantilla Harbor de Blogger, que es la que usa jabel.
1- Nos situamos en el html de nuestra plantilla y localizamos esta parte del código:
#outer-wrapper {
Aquí es donde ampliaremos la anchura total del blog, que pondremos en 1000 pixeles, para ello cambiamos el max-width:890px; a max-width:100%;
2- Un poco más abajo, vemos el #main-wrapper { o contenedor de entradas, vamos a modificar su anchura, que en este caso viene dada en porcentaje:
#main-wrapper {
width:64%;
cambiamos dicho porcentaje a 50%.
Justo debajo, en #main { cambiaremos el padding a 10px:
#main {
margin:0;
padding:10px;
}
3- Trabajaremos ahora con las sidebar, un poco más abajo, localizamos #sidebar-wrapper { modificamos el porcentaje del width a 25%:
#sidebar-wrapper {
width:25%;
Y en #sidebar { añadimos una línea de código, padding:10px; para separar el texto del borde:
#sidebar {
margin:0;
padding:10px;
4- Vamos ahora a incluir el código necesario para la nueva columna y, como en otras ocasiones, lo hacemos copiando el código de la sidebar que ya tenemos y pegandolo debajo de esta, modificando una vez copiada, el float de left a right, para que la nueva columna se vea al otro lado de las entradas y su nombre, como suelo hacer, la he llamado newsidebar:
#newsidebar-wrapper {
width:25%;
float:right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
margin:0;
padding:10px;
padding-top: 0px;
}
Si nos fijamos en el código de la nueva sidebar, he puesto el padding-top: en cero pixeles, esto marca la distancia de la parte de arriba de la sidebar a la cabecera, cada uno puede marcar la distancia que le convenga, si la ponemos en cero, el comienzo de la nueva columna, quedará igualada con el de los post, a mi me gusta así pero, como ya he dicho, es decisión de cada uno.
5- Colocaremos ahora el código necesario para que nuestra nueva sidebar se muestre en el blog y nos permita añadirle elementos. Vamos hacia abajo de nuestra plantilla y en la parte del html, localizamos esta línea:
<div id='main-wrapper'>
Y justo encima, pegamos el código:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
6- Usamos la vista previa y tendremos que ver las dos columnas a cada lado, en la nueva sidebar se muestra nuestro perfil, que podremos eliminar más tarde. Si todo está como esperábamos, guardamos cambios.
7- Si ahora miramos en la parte de añadir elementos, comprobaremos que su aspecto es bastante desestructurado, para corregir esto, iremos de nuevo a la plantilla y localizaremos esto en el CSS:
body#layout #sidebar-wrapper {
donde cambiaremos el width a 250px:
body#layout #sidebar-wrapper {
width: 250px;
margin-left: 0;
}
Haremos lo mismo, justo debajo, en body#layout #wrap4, body#layout #outer-wrapper { cambiando el width a 1000px:
body#layout #wrap4, body#layout #outer-wrapper {
width: 1000px;
}
Ya tenemos nuestra plantilla Harbor con tres columnas, ahora haremos las modificaciones necesarias para, como solicitaba jabel, podamos controlar de forma independiente el formato de las sidebar.
Tendremos que colocar una nueva variable en nuestra plantilla, y lo haremos en la parte de arriba, donde vemos unas cuantas líneas que comienzan todas igual, con <Variable name=
Este es el código para la nueva variable, que podemos colocar,por ejemplo, a continuación de las que ya hay, o sea, después de la última, pero antes del cierre de estas */
<Variable name="sidebarbodyfont" description="Sidebar Text Font" type="font"default="normal normal 100% Georgia,Serif" value="normal normal 100% Arial, sans-serif">
Una vez colocada la nueva variable, hemos de hacer que las sidebar reciban la "orden" desde esa variable, para ello, colocamos en el código de las sidebar una nueva línea: font:$sidebarbodyfont
#sidebar {
margin:0;
padding:10px;
padding-top: 170px;
font:$sidebarbodyfont
}
#newsidebar {
margin:0;
padding:10px;
padding-top: 0px;
font:$sidebarbodyfont
}
Después de guardar los cambios, si vamos a "fuentes y colores" veremos una nueva opción que se muestra como "Sidebar Text Font", desde ahí podremos escoger el tipo, estilo y tamaño de fuente de las columnas independientemente del formato del resto del blog.
DESCARGAR PLANTILLA
El traductor del Escaparate
Son muchos los emails que me están llegando donde me piden el código del traductor que tengo en la sidebar. Aunque ya lo había explicado en el post de " multi-traductor", es cierto que el mio tiene algunos "arreglillos" así que os dejo el código, tal cual lo tengo yo, con las banderitas y todo, solo tenéis que cambiar la dirección (url) del Escaparate por la de vuestro blog.
<center><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SQRy1OOWfHI/AAAAAAAAEi8/3lFRIrhKEn0/s320-R/84056383at1.png"/></center>
<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">
<input value="ES" name="wl_srclang" type="hidden"/>
<select style="font-size: 70%; width: 160px;" name="wl_trglang">
<option value="EN"/>Español - Inglés
<option value="FR"/>Español - Francés
<option value="DE"/>Español - Alemán
<option value="IT"/>Español - Italiano
<option value="PT"/>Español - Portugués
<option value="RU"/>Español - Ruso
</select>
<input value="http://elescaparatederosa.blogspot.com/" name="wl_url" type="hidden"/>
<input style="font-size: 70%; width: 50px;" value="Traduce" type="submit"/>
</form>
Para ajustarlo al tamaño de vuestra sidebar, podéis cambiar el ancho de la caja donde dice width: 160px por los pixeles adecuados y en el botón podéis cambiar el texto sustituyendo "Traduce" por lo que queráis mostrar, para adaptar el tamaño del botón al texto que coloquéis en el, cambiáis su tamaño en donde veis width: 50px.
Nota:
HBR, del blog El gran pez se ha tomado la molestia de modificar el código del traductor para que cada quien lo lea en su idioma y en el orden de las banderas. El ejemplo podemos verlo en su blog, donde así mismo podemos solicitar el código.
Ventana con mensaje de bienvenida
Para saludar a tus visitas, darles el aviso de que estas en obras, decir algo sobre ti...etc.
Nada más acceder al blog se abre esta pequeña ventana de aviso, lleva incluido un botón para cerrarla así que no da ningún problema a tus visitas.
Coloca el código entre <head> y </head> de tu plantilla, para probarlo yo lo he colocado justo después de <head> y va bien ;-)
Por cierto, el resultado puede verse usando la "vista previa" antes de guardar los cambios.
<script type="text/javascript">
alert("TU TEXTO VA AQUÍ!")
</script>
Como etiquetar nuestras entradas
Son muchos los visitantes del Escaparate que me comentan que algunas cosas que explico no les han servido.
En los casos concretos del " menú en forma de pestañas" y " títulos expandibles en los posts de las etiquetas" la queja se repite con frecuencia. El motivo generalmente, es que previamente no han etiquetado las entradas, requisito indispensable para que estos y algunos otros trucos funcionen como debe ser.
Poner etiquetas a nuestros posts es bastante sencillo: Cada vez que escribimos una nueva entrada, vemos debajo del editor de texto un apartado de "Opciones de entrada" y destacado en negrita "Etiquetas de esta entrada", es justo ahí, donde pondremos nuestras etiquetas. Puede ser una sola o varias, siempre separadas por comas. Si ya has etiquetado algún posts anteriormente, tienes la opción de "Mostrar todo" para escoger una de las etiquetas existentes con solo hacer click sobre ella.
Para etiquetar los pots antiguos, hemos de usar el "Editar entradas" y una vez allí, en "Acciones de etiquetas" podremos ir seleccionando las entradas y añadiendo etiquetas, es un poco "labor de chinos" sobre todo si tenemos muchas entradas en el blog, pero todo es ponerse con ánimo...
Una vez etiquetadas las entradas, podemos mostrar las etiquetas en el pie de cada post, para ello vamos a: Plantilla - Entradas del blog - Editar y seleccionamos el cuadradito con la opción "etiquetas". Guardamos cambios y listo.
También podemos mostrar nuestras etiquetas en la sidebar, de forma que facilitemos la navegación en nuestro blog a las visitas, como si de un sencillo menú de contenidos se tratara. Para ello nos situamos en Plantilla - añadir nuevo elemento y seleccionamos la opción "etiquetas" que después arrastraremos a la parte de la sidebar que mejor nos parezca.
Simpsonizate!!
Ahora que acaba de estrenarse la película de los Simpsons y están más de moda que nunca, he pensado que a lo mejor os gustaría comprobar como se os vería si fuerais parte del reparto. Si, no me he vuelto loca... :-D
Con este simpático generador online, podemos transformarnos con unos sencillos pasos, en un habitante más de Sprinfield, el generador se puede poner en español, así que están chupados de entender los pasos a dar.
¿Quien sabe?... a lo mejor para la próxima película conseguimos un papelito.
Esta soy yo simpsonizada:
Ahora te toca a ti...¡Simpsonizate!
Han vuelto los hackeos a Blogger
Así es amig@s, tendremos que andar con cuidado y extremar las precauciones...
Acabo de leer un correo que me ha enviado Milagros, donde me explica que su querido blog "Alejandro Aura" ha sido hackeado. Para aquellos que solíamos deleitarnos con sus emotivos escritos y poemas la noticia ha caído como un "jarro de agua fría".
Como no podía ser menos, Alejandro y Milagros están dispuestos a seguir luchando por sus derechos a expresarse libremente y en seguida se han puesto manos a la obra, creando un nuevo blog en Wordpress donde nos explican lo sucedido.
No estaría de más, que si disponéis de unos minutos, os pasaréis por el nuevo blog para mostrarles vuestro apoyo, estoy segura que a pesar de la tristeza e impotencia que les embargará en estos duros momentos, saber que no están solos ante tamaña injusticia les reconfortará y ayudará a superar este bache.
Más que nunca hemos de andar con cuidado, aunque a veces las precauciones a tomar nos parezcan excesivas, a mi modo de ver toda precaución es poca.
Estaría bien que cambiásemos cada cierto tiempo las contraseñas que usamos, no solo en Blogger, sino también en nuestro correo, sobre todo si usamos Hotmail. Por supuesto, considero un error el usar la misma contraseña para todo, se de muchísima gente que suele hacerlo así por comodidad o por miedo a olvidarlas.
Convendría no agregar gente desconocida a nuestro correo de buenas a primeras o, al menos, no revelar demasiados datos a través de este, conozco varios casos en que les han sido substraídas sus contraseñas a través de una "inocente" conversación en Hotmail.
No se vosotros, pero yo jamás abro ningún correo en un idioma que no hablo, ni correos de entidades de las que no soy cliente, ni de webs en las que nunca he estado y, por supuesto, jamás hago caso de "ofertas maravillosas" ya sabemos que "nadie da duros a cuatro pesetas".
Y, por supuesto, me cuido muy mucho de introducir alegremente mis passwords de Blogger o de Hotmail en cualquier sitio.
En fin, que hay que andarse con mil ojos, ya se sabe que a veces en internet nada es lo que parece y nadie es quien dice ser...
Por cierto, en la ayuda de Blogger hay un interesante artículo sobre " Cómo elegir una buena contraseña"