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='"http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=" + 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='"http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=" + 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='"http://www.blogger.com/comment.g?blogID=XXXXXXX&postID=" + data:post.id'>texto o imagen de antiguo editor</a>
Nuevo y antiguo editor al mismo tiempo
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:
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%;
}
Formulario de comentarios incrustado
Blogger Fenix: el formulario de comentariosSolució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:
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é.<:/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>
<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'>
(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<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.
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 )
Nuevo editor de Blogger
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
Tamaño de las fuentes a gusto del visitante
Este script lo encontré en Vagabundia hace tiempo y lo añadí a un blog de pruebas para ver el resultado, ahí quedó hasta que la pregunta de un amigo bloguero me hizo recordarlo.
Con este script podemos aumentar el tamaño de las fuentes del blog, o si lo preferimos de una parte en concreto
Para utilizarlo podemos descargarlo desde la página del autor o del script que J.Miur amablemente nos proporciona. El lugar indicado para añadirlo en nuestra plantilla es justo antes de </head>
<script type="text/javascript">
var tgs=new Array('div','td');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
if (!document.getElementById) return
var d=document,
cEl=null,sz=startSz,i,j,cTags;
sz += inc;
if (sz < 0) sz=0;
if (sz > 6) sz=6;
startSz=sz;
if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
cEl.style.fontSize=szs[sz];
for (i=0 ; i < tgs.length; i++) {
cTags=cEl.getElementsByTagName(tgs[i]);
for (j=0; j < cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
}
}
</script>
Una vez guardamos los cambios nos dirigimos a plantilla de diseño para añadir un nuevo elemento de página y escogemos HTML/Javascript en su interior añadiremos lo siguiente:
<a href="javascript:ts('body',1)"> AUMENTAR </a>
<a href="javascript:ts('body',-1)"> DISMINUIR </a>
Si miramos nuestro blog comprobaremos que aparecen dos enlaces de texto, AUMENTAR y DISMINUIR y al clicar se produce el efecto en la totalidad del blog. Si deseamos el efecto en una parte determinada del blog sustituimos 'body' por 'main' si es para las entradas o 'sidebar' si es para la columna.
Esto último puede variar según la plantilla y deberíamos mirar el DIV que corresponde a la parte que vamos a aplicar el efecto.
Otra modificación sería sustituir el texto AUMENTAR y DISMINUIR por una imagen en este caso lo haremos suprimiendo el texto y en su lugar añadimos <img src="url-imagen"/>
El resultado sería algo así:
(Imágenes extraídas sigilosamente de Vagabundia) Ver efecto en funcionamiento
GRACIAS por tenerme presente...
Los premios y menciones se pusieron de moda hace tiempo, la idea no fue mala, una buena excusa para dedicar a alguien unas bonitas palabras, reconocer su trabajo y sus valores, agradecer la amistad brindada...
Los premios fueron-son una cadena imparable, no hay duda que a todos nos agrada que se acuerden de nosotros y los recibimos con alegría y satisfacción.
Recibir un premio conlleva a seguir unas reglas, una de ellas mencionar a un número determinado de blogs, personalmente nunca lo hice porque me resultaba difícil escoger entre tantos blogs, porque todos son buenos cada uno en su temática, porque de una forma u otra a todos les cuesta esfuerzo mantener un blog, porque todos tienen su espacio y ninguno eclipsa a otro, porque lo que para unos no es un mal blog para otros puede serlo...
Por todo eso decidí corresponder a cada premio pasando por alto las reglas, únicamente mencionando a la persona que lo otorgaba. Gustosamente hice mención a todos y cada uno intentando transmitir mi agradecimiento.
Han venido a recordarme que debo pasar a recoger unos cuantos premios más, eso quiere decir que durante unos cuantos días el poco tiempo que tengo para dedicar al blog debe ser exclusivamente para mencionar esos premios.
Ese es mi dilema, mi gran apuro ¿qué hacer? ¿y los comentarios? ¿qué piensas tú que esperas respuesta a tu mail? siento la sensación de estar fallando a alguien y la sensación no es agradable. He tomado la decisión que durante un tiempo y hasta que mi jornada laboral se normalice no podré postear sobre los premios.
Yo sé que lo vais a entender, pero aún así quiero pediros disculpas, y sobre todo daros las gracias y deciros que con premios o sin ellos mi cariño es muy grande.
Elegante sistema de expandir entradas
.maintext {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
.maintext p {padding:5px 0 0 0; margin:0;}
.maintext p.bold {font-weight:bold;}
.maintext h2 {margin:0; padding:0;}
.switch {display:block; font-size:1px; width:16px; height:16px; background:url(url-imagen-abrir); cursor:pointer;}
.off {background:url(url-imagen-cerrar);}
.hide {display:none;}
.show {position:absolute; display:block; width:500px; background:#fff; border:1px solid #000; padding:10px; margin-top:5px; z-index:500;}
.show img {float:left; padding:0 10px 10px 0;}; anchura de la caja expandible.background:#fff
; color de fondo de la caja.border:1px grosor del borde.
solid #000
; tipo de borde y color.background:url(url-imagen-abrir) : url del icono rojo (expandir).
background:url(url-imagen-cerrar) :url del icono verde (recoger)
Lo siguiente lo añadiremos antes de </head>
<script>
onload = function() {
var e, i = 0;
while (e = document.getElementsByTagName ('B') [i++]) {
if (e.className == 'switch') {
e.onclick = function () {
this.className = this.className == 'switch' ? 'switch off' : 'switch';
this.nextSibling.className = this.className == 'switch' ? 'hide' : 'show';
}
}
}
}
</script>
Nos queda el último paso, se trata de añadir en cada entrada:
<div class="maintext">
<b> Texto inicial de la entrada </b>
<b class="switch"></b>
<div class="hide">Aquí escribimos el contenido oculto</div>
</div>Otras formas de expandir entradas:
Leer más- Read More (Con imagen)
Leer más con efecto expandir y recoger
Leer más (Read More)
Leer más o Read More para todas las plantillas de Blogger
Y el recomendado: Leer más original de Blogger.
Botones antipixel
Qarols se ha interesado por la forma de crear online este tipo de botones tipo banner en miniatura (80px x 15px) a los que llaman "antipixel" y que yo estoy usando en mi blog.
Hay varias páginas en Internet que nos permiten crear este tipo de botones y otras donde podemos descargar los botones ya diseñados.
Crear botones antipixel:
Buttom Maker
Blogflux
Online Button Maker
Publicons.de
Imaxenes (en castellano)
Brilliant Button Maker (En esta web pueden añadirse imágenes al botón.)
Descargar botones antipixel ya diseñados:
Gtmcknight (Coleccion con casi 4.000 botones antipixel agrupados en categorías.)
WebBadges (Colección de botones antipixel con un diseño soberbio.)
Terrababy.nl (Coleccion de botones animados antipixel.)
Como eliminar una cuenta en Google Analytics
Pedrox me pregunta:
Yo registre un blog en Google Analitycs, pero la verdad es que no entro mucho a ver las estadísticas ni nada. Pero tampoco me da la opción de eliminar el blog, ni la cuenta. Lo que quiero saber es que si yo dejo eso así, y no entro mas, y elimino el código del blog, no pasa nada?? no trae algún problema o algo??
En el Centro de asistencia de Google Analytics encontramos la respuesta a las dudas de Pedrox, bajo el título "Como puedo cancelar mi cuenta de Google Analytics":
[Si no quiere que Google Analytics realice el seguimiento de su sitio web, elimine el código que ha instalado en él para tal efecto.
En cuanto lo elimine, Google Analytics dejará de recibir datos.
Si desea eliminar una cuenta de su interfaz de Google Analytics, envíenos un mensaje. La cuenta se cancelará solo si uno de sus administradores realiza la solicitud e incluye en ella el número de la cuenta.]
No es difícil entender con esta información, que podemos eliminar el código de seguimiento añadido en nuestro blog sin temor a que esto nos cause algún problema.
Pero también nos queda claro que para eliminar una cuenta que ya no queremos utilizar hay que enviar un correo al equipo de Google.
El formulario que hemos de completar para el envío de nuestra solicitud no es demasiado complicado:
- Nombre completo
- Correo electrónico de acceso a Google Analytics
- ID de cuenta
- ¿Es administrador de la cuenta?
- Sitio web
- Reason for cancelling (Razón de la cancelación)
Como podemos comprobar son datos que se nos piden de forma habitual en otros servicios de este tipo, aunque quizás podría surgir alguna duda con ID de cuenta.
Para conocer cual es el ID de la cuenta que queremos cancelar tenemos que acceder a nuestro panel en Google Analytics y sobre la tabla que muestra los perfiles del o los blogs asociados a esa cuenta, veremos un enlace que dice: (Editar la cuenta y la configuración para compartir datos) , pinchamos en ese enlace y en la página a la que accederemos, vemos arriba del todo nuestro ID de cuenta que tendrá que ser algo como UA-XXXXXXX (las "X" serán los distintos números del ID).
Es también muy importante que pongamos en los otros campos del formulario los mismos datos con los que estamos utilizando la cuenta de Google Analytics.
En la última opción del formulario tendremos que escoger, entre las opciones que nos proporcionan, la que más se aproxime al motivo por el que queremos cancelar la cuenta, si tenemos alguna duda, podemos marcar la opción "Other" (Otras).
Del tiempo que tardan en responder confirmando la cancelación de la cuenta, no puedo deciros nada, a decir verdad no conozco a nadie que lo haya solicitado...
Añadir un boton para Ayuda Blogs en Blogger
Hace unos días os informaba del estreno de Ayuda Blogs un nuevo portal para enviar noticias relacionadas con la ayuda para blogs en cualquier plataforma.
Hoy me he enterado que desde Vinagre Asesino nos explican con todo lujo de detalles como agregar un botón de Ayuda Blogs en Wordpress para que cualquier usuario pueda enviar las noticias directamente desde el blog, eso si, como en cualquier agregador de este tipo, para poder enviar los artículos antes hemos de estar registrados.
He construido el código para usar el botón en Blogger usando la misma imagen de Vinagre Asesino, así que vamos a ver como añadir el botón de Ayuda Blogs en Blogger:
[1] En nuestro panel de Blogger nos situamos en "Edición HTML" y marcamos la casilla de "Expandir plantillas de artilugios" para localizar esta línea del código:
<div class='post-header-line-1'/>
[2] Justo antes de esa línea añadimos el código necesario para el botón de Ayuda Blogs:
<!--Boton Ayuda Blogs -->
<a expr:href='"http://www.ayudablogs.com//submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar a Ayuda Blogs'><img align='right' height='41' src='http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SGvDw5VE41I/AAAAAAAAEAY/ZtWz5UIvwSQ/s320-R/ayuda-blogs.jpg' width='54'/></a>
[3] Usamos la "vista previa" y si todo está correcto, guardamos los cambios.
El botón se verá entonces al comienzo de cada entrada y a la derecha de la misma:
Para colocar el botón en la zona del post-footer (pie de entrada) tendríamos que añadir en la plantilla el mismo código, con la única diferencia, de que la línea de código a localizar sería esta otra y el código lo pegaríamos justo debajo de ella:
<div class='post-footer-line post-footer-line-1'>
Para mostrar el botón a continuación de los demás elementos del post-footer, borramos en el mismo código el align='right' y lo colocamos después de:
<div class='post-footer-line post-footer-line-3'>
