0

Scripts y otras contrariedades

Que nada es eterno ya lo sabemos y que lo bueno dura poco también.
Así ha sido nuestra experiencia con Hostfile buena y breve. Desde hace días Hostfile servicio de alojamiento para archivos ha dejado de funcionar (de ahí el aviso de la cabecera) parece ser que los archivos continúan allí pero el acceso a la página es denegado "You don't have permission to access / on this server" o lo que es lo mismo "Rita, Rita lo que se da no se quita" y con los archivos se han quedado sin previo aviso, a no ser que como aviso se entienda las últimas caídas del servidor.

(Un día después de dar salida a esta entrada Hostfile está online, informando que ha sido inhutilizada la carga de archivos sin expectativas que se restablezca el servicio. Los archivos que en su día fueron subidos permanecen disponibles dando con esto un margen de tranquilidad para los que pensaron que serían irrecuperables)


Quien si avisa es Google Pages parece que ya no hay opción a nuevos registros y para final de año las páginas serán migradas a Google Sites de forma automática, pero no se hagan ilusiones entre los 10 GB de espacio que proporciona no acepta archivos js.

Visto como está el patio y que nuestro adorado Blogger no atiende las súplicas de proporcionar a los usuarios alojamiento de archivos nos vemos obligados de ir con nuestras maletas a otra parte en busca de alojamiento .

Yo creo que casi todos los que teníamos constancia de esta información iniciamos una búsqueda exhaustiva. La Blogería y Vagabundia hablaron del tema y los comentarios 1- 2 en el blog de J.Miur son una muestra de que la falta de alojamiento en Blogger es un problema compartido.


Así las cosas es como aparece por primera vez el nombre de Microsoft y el servicio de alojamiento online SkyDrive que ofrece 5GB y ningún problema aparente (por ahora)

Sobre Sky Drive podéis obtener más información en esta entrada .


¡Archivos en Blogger ya!

Ya, para terminar me gustaría invitaros a todos a sumaros a una nueva iniciativa se trata de añadir una pequeña imagen en vuestro blog. La imagen es un enlace a Wishlist de Blogger y nos permite votar algunas opciones que nos gustaría que añadieran a Blogger.

Pueden votar:
"Upload other files to my blog"
En español "Subir otros archivos a mi blog"

La imagen ha sido creada por Pizcos es un Widget que da la posibilidad a los visitantes de añadirlo a su blog con un click y que a la vez lo pueda añadir todo aquel que lo desee.






¿A qué esperas?

0

Scroll en cualquier parte

Hace tiempo que aprendimos a añadir scroll en diferentes partes de nuestro blog, pero siempre se pasa algo por alto, y por suerte siempre hay alguien que se da cuenta como es el caso de koba que pregunta la forma de añadirlo a las entradas pero sin que aparezca el título.

Para añadir un scroll vamos a hacerlo añadiendo unas líneas a las CSS, o a los CSS (póngase el artículo que más les guste) para ser más concretos lo añadiremos justo antes de ]]></b:skin&gt; estas serían:

#scroll {
width:400px;
height:200px;
background-color:#333333;
overflow:auto;
}


Con overflow: auto sólo aparecerán las barras del scroll en caso de que el contenido sea mayor a las medidas que se añadieron en la plantilla.

Si deseamos que siempre aparezcan las barras del scroll en lugar de overflow: auto añadiremos overflow: scroll Si el contenido no excede las medidas las barras quedan deshabilitadas, en el momento que es mayor el contenido de habilitan.

Guardamos los cambios de nuestra plantilla y escribimos nuestro texto de la siguiente forma:

<div id="scroll">
<p>Contenido del scroll </p>
</div>


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Podemos jugar un rato más con el scroll, y añadir una imagen de fondo en lugar de color con background:url('url_imagen');

Darle color a las fuentes con color:#308014;

Y si nos queda tiempo añadirle borde:

border-top: 2px solid #308014;
border-left: 2px solid #308014;
border-right: 2px solid #308014;
border-bottom: 2px solid #308014;

(Por cierto... esto es sólo una imagen )
Quedaría algo así:

#scroll {
width:400px;
height:200px;
overflow:auto;
 color:#308014;
background:url('url_imagen');
 border-top: 2px solid #308014;
border-left: 2px solid #308014;
border-right: 2px solid #308014;
border-bottom: 2px solid #308014;
}

0

Nuevo y antiguo editor al mismo tiempo

Antes de añadir el nuevo editor nuestro blog nos mostraba un texto "Publicar un comentario en la entrada" algunos lo sustituimos por una imagen.

Pero... siempre hay un pero que nos complica la vida pero sin él sería muy aburrida, el pero en este caso es que al añadir el nuevo editor de comentarios queda oculto el enlace que nos lleva al antiguo editor, ese casi olvidado y que por llevar la contra a todo el mundo a mi me gusta.

El antiguo editor a pesar de no verse sigue estando en nuestra plantilla, la cuestión es hacer que ese enlace se muestre y poder de esta forma comentar con el editor que más nos agrade.

J.Miur tiene la solución (en realidad la tiene siempre) y la respuesta es la posibilidad de poder comentar simultáneamente con el antiguo editor, o como él lo llama "Al viejo estilo ..."

Yo siempre digo que es conveniente tener una copia de la plantilla y esta vez también lo hago. Así que manos a la obra nos dirigimos a nuestra plantilla en Edición de HTML y marcamos para expandir la plantilla de artilugios.

Una vez ahí buscamos:

<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>

En <data:postCommentMsg/>; es el mensaje que aparece por defecto o la imagen que añadimos si modificamos esta parte anteriormente.

Sustituimos <data:postCommentMsg/> por lo siguiente:

<a expr:href='&quot;http://www.blogger.com/comment.g?blogID=XXXXXXX&amp;postID=&quot; + data:post.id'>
Aquí el texto "Publicar un comentario en la entrada" o imagen.
</a>

(Debe ir en una sola línea)

Donde ID debemos sustituir XXXXXXX por la ID de nuestro blog. La ID del blog la averiguamos cuando editando la plantilla observamos la dirección de nuestro navegador.
Vemos algo así:

http://www.blogger.com/html?blogID=12391076&tpl=true

Lo que aparece en negrita es la ID del blog.

Una vez hacemos todo correctamente en nuestro blog tenemos las dos opciones para comentar "Al viejo estilo" y con el nuevo editor.

Si comprobamos que el enlace al antiguo editor no aparece comprobaremos que no se encuentra dentro de ninguna etiqueta </b:if>
Un ejemplo sería:

<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>

</p>
</b:if>

En este caso en
<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>

eliminamos <data:postCommentMsg/>

Y lo siguiente:
<a expr:href='&quot;http://www.blogger.com/comment.g?blogID=XXXXXXX&amp;postID=&quot; + data:post.id'>
Aquí el texto "Publicar un comentario en la entrada" o imagen.
</a>

lo añadimos a continuación de
</b:if>
</b:if>

</p>
</b:if>

Quedaría algo así:
<a expr:href='data:post.addCommentUrl'expr:onclick='data:post.addCommentOnclick'>
</a>
</b:if>
</b:if>

</p>
</b:if>
<a expr:href='&quot;http://www.blogger.com/comment.g?blogID=XXXXXXX&amp;postID=&quot; + data:post.id'>texto o imagen de antiguo editor</a>

0

Personalizar formulario de comentarios

¿Ya tenemos el nuevo formulario de comentarios?
Entonces es el momento de darle un toque personal, para ello empezaremos por el texto de "Publicar un comentario en la entrada" un poco serio ¿verdad? si deseas añadir algo más personal haremos lo siguiente:
Nos situamos en Plantilla/Edición de HTML y marcamos la casilla para expandir la plantilla de artilugios.
Buscamos:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>

En la cuarta línea donde <h3><data:postCommentMsg/></h3> eliminamos <data:postCommentMsg/> y en su lugar escribimos el texto de nuestro agrado:

<h3>Aquí invitamos a dejar un mensaje</h3>


Bien, ahora vamos a personalizar el formulario, para ello debemos añadir unas líneas en las CSS ó para ser más concretos justo antes de ]]></b:skin>

.comment-form {
margin:0pt auto;
width:400px;
}

comment-form es la ventana del formulario, con margin lo centramos y con width le damos un ancho.


.comment-form h3 {
background:transparent url('url-de-la-imagen') no-repeat;
color:#B0171F;
font-size:18px;
line-height:50px;
padding:0pt 0pt 0pt 55px;
}

Estas son las propiedades del título del editor.
En background añadimos la imagen que aparece junto al texto de la cabecera "Publicar un comentario en la entrada"
En color es el color para el texto.
El tamaño de letra lo modificamos en font-size.
En line-height establecemos la altura entre líneas.
Con padding centramos el texto.


.comment-form p {
color:#A9A9A9;
font-size:14px;
text-align: center;
border:1px solid #A9A9A9;
background:url('url-de-la-imagen');
padding:3px 0pt 0px 20px;
width:380px;
}

Esta parte corresponde al mensaje del formulario podemos modificar también color del texto, tamaño de la fuente, añadir una imagen de fondo (background) o si lo preferimos podemos añadir un borde.
El grosor de un borde lo podemos variar en 1px con solid estamos indicando el tipo de borde y el color obviamente en #A9A9A9;
Si en lugar de una imagen de fondo deseamos añadir color suprimimos background:url('url-de-la-imagen'); y en su lugar añadimos background-color:#A9A9A9;

#comment-editor {
height:420px;
width:100%;
}

En comment-editor modificamos la medida del iframe, width para el ancho y height para el alto. Es muy importante que pongáis atención en el valor que se añade a height porque si añadimos un valor superior al que tenemos para las entradas el iframe del formulario saldrá incompleto.

Naturalmente la imaginación es lo que cuenta, pero con esos valores y un poco de paciencia podéis personalizar el editor, lo que siempre recomiendo es probar en otro blog y por supuesto si tienes una buena idea y deseas compartirla no te olvides de dejar un comentario con un enlace a tu blog.

Veamos algunos ejemplos de personalización:



.comment-form {
margin:0pt auto;
width:375px;
}

.comment-form h3 {
background:transparent url('url-de-la-imagen') no-repeat;
line-height:150px;
text-align: center;
font-size:25px;
color:#B0171F;
padding: 15px 20px 5px 75px;
}

#comment-editor {
height:375px;
width:100%;
}



.comment-form {
background-color:#B0171F;
padding-left:5px;
padding-right:5px;
border:1px solid #000;
margin: 0 auto;
}

.comment-form h3 {
background:url('url-de-la-imagen');
line-height:70px;
padding:0pt 35pt 35pt 55px;
}

.comment-form p {
font-size:12px;
color:#EEE9E9;
text-align: center;
border-bottom : 3px #000 double;
border-left : 3px #000 double;
background-color:#B0171F;
padding:10px 0pt 10px 10px;
width:380px;
}

#comment-editor {
height:375px;
width:550px;
}


(La imagen trae impreso el texto, podemos crearlo con un editor de imágenes)

.comment-form {
margin:0pt auto;
width:420px;
}

.comment-form h3 {
color:#fff;
}

.comment-form p {
border:8px double#DCE6C5;
background:url('url-de-la-imagen') no-repeat;
padding:30px 0pt 10px 5px;
width:370px;
height:50px;
}

#comment-editor {
height:420px;
width:100%;
}



0

Formulario de comentarios incrustado

Ya sé que a estas alturas todo el mundo tiene el nuevo formulario de comentarios añadido al blog pero no dejan de preguntarme la forma de personalizarlo así que lo mejor será empezar por el principio.
Pero antes tengo que añadir que he visto muchos blogs donde explican este proceso pero... unos porque son en otro idioma y otros porque no aportan toda la información necesaria llego a la conclusión que ninguna explicación es tan completa como la que ofrece Vagabundia.
Esta explicación la he extraído de dos amplias entradas suyas, quiero decir con esto que encontraréis una información más detallada y completa en:

Blogger Fenix: el formulario de comentarios
Solución a algunos problemas con los formularios de comentarios

¿Comenzamos?
Si tu plantilla no ha tenido demasiadas modificaciones no tendrás ningún problema siguiendo estos pasos. Accedemos al blog por Blogger Draft y nos dirigimos a Configuración/Comentarios hasta llegar a:


Como muestra la imagen marcamos la casilla de "Entrada incrustada a continuación" guardamos los cambios y comprobamos que el nuevo editor aparece en el blog.

Bien, hasta ahí llegamos todos ¿Pero qué ocurre si el editor no aparece? comienza el primer problema que debemos solventar y con el que yo misma me encontré.
J.Miur nos da la solución, y es la siguiente. Nos dirigimos a Plantilla de diseño/Edición HTML y marcamos expandir la plantilla.
Tenemos que añadir dos códigos pero OJO, hay plantillas que por defecto ya tienen el primero de ellos si es así nos bastará con añadir sólo el segundo.
Para añadir el primero buscaremos:

<:/b:includable>
Aquí añadimos el 1º código
<:b:includable id='backlinkDeleteIcon' var='backlink'>

Este es el 1º Código que añadimos

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h3><data:postCommentMsg/></h3>
    <p><data:blogCommentMessage/></p>
    <iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
  </div>
</b:includable>

Después buscamos el siguiente código:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>

Y lo sustituimos por este otro:

<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:include data='post' name='comment-form'/>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
</p>

Al no ser todas las plantillas iguales puede hacerse complicado ubicar el segundo código que sustituimos, si no lo encontramos en lugar de buscar:

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>

buscaremos lo siguiente:

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>

Pero OJO encontraremos este mismo código dos veces, uno ubicado en

<b:includable id='backlinks' var='post'>

y otro en

<b:includable id='comments' var='post'>

El que debemos sustituir se encuentra dentro del siguiente código que es de los comentarios.

<b:includable id='comments' var='post'>

El confundirse es fácil al menos yo me confundí y arreglándolo añadí el código dos veces (yo también meto la pata de vez en cuando) pero por suerte hay ángeles que tienen blog y uno de ellos se hace llamar J.Miur
En la mayoría de plantillas que nos surgen estos problemas son plantillas adaptadas, pues bien, si con todas estas explicaciones el editor se resiste a salir no hay que perder la calma y podemos probar otra opción. Marcamos para expandir la plantilla y buscamos la siguiente línea

<b:include data='post' name='comments' />

Justo después añadimos lo siguiente:

<b:include data='post' name='comment-form'/>

Comprobemos ahora el resultado una vez guardados los cambios.

0

MagMyPic tu imagen en PORTADA



No hay mucho que explicar salvo que nunca hayáis visto algo parecido, se trata de jugar un poco y conseguir que nuestras imágenes aparezcan en las mejores portadas de todo el mundo.

El procedimiento es muy sencillo, accedemos a MagMyPic y cargamos una imagen desde el PC, escogeremos entre más de 20 portadas la que más nos guste y esperamos un poco a que la fama llegue.

No es necesario registrase para conseguir la imagen, bastará con guardarla como tenemos costumbre normalmente "Guardar imagen como..."

Existe un sistema de votación para votar las portadas creadas por los usuarios.
Los formatos de imagen permitidos pueden ser JPEG, GIF o PNG (no pueden contener desnudos, violencia o material ofensivo )




0

Nuevo editor de Blogger


La nueva barra de edición de Blogger ya está funcionando aunque para acceder a ella tenemos que hacerlo a través de Blogger in Draft. La función de guardar es más rápida y no recarga la página gracias a la función de AJAX.
¡Qué detalle! añadieron las funciones de tachado y resaltar con color.











Otra de las nuevas funciones es la carga de imágenes, el modelo de ventana ha cambiado, subimos la imagen tenemos la posibilidad de redimensionarla una vez la tenemos añadida, así como ubicarla en el lugar deseado arrastrándola.


Una nueva ventana para Link y la aplicación de barra de desplazamiento vertical también es novedad.

Lo que más me ha gustado es la función de  "Vista Previa"  y "Configuración de composición" a la que accedemos marcando la pestaña de Post Optión verdaderamente útil para los que mostramos códigos aunque esta última parece ser que todavía no está activa y deberemos esperar.



También en fase experimental se encuentra el maravilloso sistema de autoguardado (Autosave) que nos evitará perder nuestro trabajo en más de una ocasión.

Cambios esperados que van llegando poco a poco y son el premio a la paciencia y fidelidad de muchos usuarios de Blogger.

Visto en Vagabundia y Ojo Buscador

Suscribirse a: Entradas (Atom)
 

2009 ·ElHackerZ by TNB

PostsComments