0

Editor de entradas 2ª entrega



Hace más de un año comentaba que accediendo por Blogger Draft podíamos probar las nuevas funcionalidades del editor de entradas. Estas funcionalidades ya están a disposición de todos desde hace un mes  accediendo de forma tradicional, es decir por Blogger.

A las anteriores funcionalidades se han añadido algunas nuevas y fueron suprimidas otras, esperemos que provisionalmente como por ejemplo el corrector ortográfico y la función de subir vídeos ¿? Y seguimos sin saber que función tienen códigos que se mezclan con el texto sin pedir permiso   

Habilitemos el nuevo editor
Podemos habilitar el nuevo editor en Configuración/Básico.En la parte inferior de la página veremos que dice "Seleccionar editor de entradas" marcaremos en "Editor actualizado" y guardamos la configuración.



Arrastrar las imágenes
Esta funcionalidad ya estaba en fase experimental, pero aprovecho a responder a esas preguntas de por qué las imágenes se sitúan siempre en la parte superior del editor.
Las imágenes se situarán justo donde dejamos el cursor antes de marcar el icono para subir la imagen.Una vez subidas podemos arrastrarlas  y escoger el tamaño y ubicación haciendo click sobre la burbuja de información.



Podemos cambiar la altura del editor, bastará con estirar el angulo inferior derecho y el editor aumentará de altura.


En la barra de herramientas veremos un nuevo icono.



Ese icono nos permitirá dividir el contenido de forma que podemos ocultar una parte de él, es lo que todos conocemos como "Leer más" o "Read More"

Escribimos nuestra entrada normalmente y situamos el cursor justo antes del espacio que deseamos ocultar.



Se formará una línea divisora como en la anterior imagen y en Edición de HTML lo veremos así:



Encontraréis más información sobre este sistema de expandir contenido en Vagabundia 

0

Motivos florales para tus diseños



En Dezignus he descubierto un precioso set de motivos florales ideal para tus diseños.

Tamaño: 6,3 mb
Formato: ABR (Photoshop CS Brushes)
Licencia: Gratuita paara uso persona o comercial.

Si no tienes Photoshop CS, puedes descargar las imágenes PNG con transparencia.

0

Cinco sitios con efectos para imágenes

PicJoke
Muchísimos efectos; aseguran agregar uno nuevo cada día (Via Gem@ Blog).

Click para ampliar las imágenes.

Scrapee
Fotomontajes, marcos y efectos surtidos en español.

Click para ampliar las imágenes.

BigHugeLabs
Un sitio muy completo con decenas de opciones. (Via Web Adictos).

Click para ampliar las imágenes.

DeeFunia
Herramientas de todo tipo, efectos, avatares, bordes, calendarios.

Click para ampliar las imágenes.

Tuxpi
Ofrece 31 efectos diferentes incluyendo la posibilidad de crear posters.

0

Windows 7


0

Cómo crear un menú online sólo con CSS

Con PureCSSmenu es muy sencillo generar un menú para el blog; aún los más complejos con varios niveles de submenues y todo lo hacemos online, sin necesidad de registrarse

Con una ventana muy sencilla, podemos ir agregando item por item o bien utilizar algunos de los templates predefinidos y cambiar los parámetros gráficos, establecer los enlaces y definir si se van a abrir en una nueva ventana o no:


Una vez que lo tenemos armado, lo descargamos a nuestra PC. Será un archivo ZIP que contendrá una página HTML de la cual podremos extraer las definiciones de estilo:
<!-- Css Menu -->
<style>
.......
</style>
Y el código correspondiente:
<ul class="cssMenu cssMenum">
.......
</ul>
<!-- (c) 2009, PureCSSMenu.com -->
Así como están, ambos funcionarán bien pero sería mejor si lo verificamos y, eventualmente, lo modificamos para adaptarlo.

0

Avatar en comentarios

Hace unos días algunos despertamos con la última novedad, el avatar en los comentarios. Lo de última es porque somos los últimos en tener avatar, lo de novedad porque nadie lo hubiera imaginado pero el cumpleaños de Blogger no es cualquier cumpleaños y en lugar de invitarnos a gominolas nos invitaron a pastel.

Ironía aparte, porque luego dicen que siempre hablo mal de Blogger....El rebotao me decía "Gema hablando de la movida del avatar ¿podrías crear un post con los cambios a realizar para que se vea el avatar en los comentarios?

Una vez salimos de nuestro asombro empezamos a leer aquí y allá los cambios que debemos hacer para que el avatar se muestre. No es complicado... sólo algo retorcido si en nuestra plantilla hicimos grandes cambios.

Para activar la función de mostrar avatar debemos hacerlo en Configuración/Comentarios.



Los blogs como yo llamo "nuevitos" esos que les funciona el vista previa pueden ver su avatar antes de dar salida al comentario.



Hasta ahí todo genial, los comentarios se mostrarían con avatar siempre y cuando el autor del comentario tenga el perfil activado y una imagen de perfil. Los que no tienen el perfil activado, comentan como anónimo o añaden nombre/url no tienen imagen y los que tienen el perfil activado pero no añadieron imagen Blogger les añade un icono como este


Esa es la forma de mostrar avatar en comentarios pero ¿qué ocurre si no aparecen? me habría gustado que fuera un post donde todas las dudas tuvieran respuesta y todos los contratiempos solución, pero difícilmente será así porque  entregaron  las indicaciones pero se olvidaron de los problemas que podían surgir.

En algunos sitios como Blogger Buster , Chica Blogger, Dicas Blogger hablan de sustituir unas líneas de código y con ello conseguir que el avatar aparezca.

Ocurre, que al estar las plantillas personalizadas hay líneas de código que  no se muestran situadas en el mismo orden, hay otras distintas o fueron sustituidas por otras.

Tengo que recordar que la personalización que tengamos en los comentarios hasta ese momento se mantendrá sin alterarse, no hay que tocar nada de los estilos, únicamente añadir otros para el avatar como veremos más adelante.

Cualquier forma de hacerlo es buena si conseguimos el resultado que esperamos, yo decidí una vez más guiarme por J.Miur que dicho sea de paso es hasta hoy quien ha dado solución a todos los problemas surgidos y supongo que a otros muchos que vayan surgiendo. Con sus explicaciones 1 - 2 conseguimos tres cosas.
  • Sustituir el código antiguo por el de una plantilla actual.
  • Personalizar el avatar.
  • Numerar los comentarios y diferenciar los pares de impares.
Antes de empezar guardaremos una copia de la plantilla, mejor descargar el archivo XML que una copia de texto. Para los ejemplos he buscado una plantilla bastante modificada por cierto. Su aspecto antes de añadir el avatar era el siguiente:



Nos dirigimos entonces a Plantilla Edicción de HTML y marcamos para expandir la plantilla.
Hay una línea que puede guiarnos hasta el punto donde debemos hacer ese cambio, es:

<dl id='comments-block'>

Esa línea es el inicio del código que vamos a reemplazar así que buscamos:

<dl id='comments-block'>
............
............
............
............
</div>
</b:loop>
</dl>

El espacio de los puntos suspensivos es el código que tenemos entre las etiquetas
<dl id='comments-block'>
y </dl> 
Debemos sustituir todo ese código marcado en color azul  por el siguiente.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<!-- ponemos el contador a cero -->
<script type='text/javascript'>var contadorComentarios=0;</script>
<b:loop values='data:post.comments' var='comment'>
<!-- agregamos un bloque para darle un nombre único a cada comentario -->
<div class='' expr:id='data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<span class='autorcomentario'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</span>
<data:commentPostedByMsg/>
<!-- el código del contador -->

<span class='comentacontador'>
<a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>
<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<!-- establecemos la clase del comentario -->
<script type='text/javascript'>ContarC(&#39;;<data:comment.id/>&#39;;)</script>
</div>
</b:loop>
</dl>
Aprovechando que estamos aquí quizás sea el momento de decir que la etiqueta &lt;data:commentPostedByMsg/&gt; es la que produce el texto tan popular "dijo..." podemos eliminarla si así lo deseamos o sustituirla por cualquier otro texto.

Si hacemos la prueba comprobaremos que los comentarios que tienen el perfil activado y con imagen muestran avatar, mientras que los anónimos y los que añaden nombre/url no muestran avatar.



Para solucionar ese problema de espacios vacíos sin avatar J.Miur nos explica de qué forma podemos añadir dos imágenes escogidas por nosotros, conseguiremos con ello que los comentarios anónimos, o con nombre/url tengan una misma imagen. Y una segunda imagen que se mostrará de fondo y la visualizaremos el tiempo que dure en cargar la página.

Algunos, tendrán problemas como por ejemplo este que os muestro:



No hay que hacer un drama, se solucionará al añadir los estilos.
Justo antes de <body>  (ojo, antes de <body> y no de </head> como hacemos normalmente)

<style type='text/css'>
#comments-block.avatar-comment-indent {
margin-left:0;
}

#comments-block .avatar-image-container {
float:left;
height:49px;
position:static;
width:49px;
margin-right:15px;
margin-top: 15px;
}

#comments-block .avatar-image-container img {
background:#333 url(url imagen de fondo) no-repeat 50% 50%;
border: 2px double #00CCFF;
display:block;
float:none;
min-height:45px;
min-width:45px;
padding:3px;
}

#comments-block .avatar-image-container.avatar-stock {
background:#333 url(url avatar anónimos y nombre/url) no-repeat 50% 50%;
border: 2px double #00CCFF;
}

#comments-block .avatar-image-container.avatar-stock img {
display:none;
}

img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}

</style>
Con esos estilos del ejemplo al guardar los cambios veriamos algo así:



Si habéis leído las entrada 1 que hace referencia a las explicaciones de J.Miur os daréis cuenta que indica los pasos para numerar y diferenciar de color los comentarios pares de impares. Digo esto porque en el código que añadimos ya viene modificado el contenido del bloque y únicamente es necesario añadir los estilos y el script.

Pueden surgir más problemas así que paciencia.

0

PHP en Blogger

¿Qué es PHP? Un lenguaje de programación y hoy por hoy es uno de los más extendidos. No es cuestión de entrar en detalles pero, para que se entienda un poco, su característica principal es que no lo ejecuta el navegador sino el servidor donde está alojado el archivo y, de esa manera, entre otras cosas, es posible crear páginas web dinámicas ya que las páginas se generan en función de instrucciones de todo tipo.

¿Es posible ejecutar archivos PHP en Blogger? Sí, eso no es problema. Blogger no soporta PHP y el único lenguaje que podemos utilizar es JavaScript pero, tal como lo dicen en Anuj Pathania's Blog, es posible ejecutar PHP utilizando JavaScript. De hecho, he visto que en varios artículos se hablaba de cosas similares tales como un widget que contaba la cantidad de veces que se había visto un post. Es sencillo, copiamos, pegamos y listo, capaz que funciona pero, todo eso tiene algunas dificultades que pueden ser menores como que ese archivo externo deje de funcionar por cualquier motivo o algo peor: que no sepamos que es lo que hace ese archivo.

Y si digo esto es porque el PHP es un idioma poderoso MUY poderoso que permite hacer muchas cosas. Así que, como con todos los otros archivos que utilizamos, debemos asegurarnos (hasta donde sea posible) que sólo hagan lo que dicen hacer y nada más. Pero, seguridad al margen, también hay algo práctico, los archivos deben funcionar y si bien nadie puede garantizarnos que los que alojemos nosotros funcionarán siempre, cuando son alojados y administrados por otros, lo más probable es que terminen fallando por mucha voluntad que tenga quien los ofrece.

Y al final de cuentas, no es tan difícil crear una cuenta gratuita en algún hosting gratuito y allí jugar un rato a ver que sale.

La idea de estas entradas es esa, mostrar una pequeña cantidad de ejemplos aprovechando el servicio de byethost del que hablé hace unos dias.

El primero de ellos es el más sencillo; vamos a detectar la IP de los visitantes y, eventualmente bloquearlos. No será un filtro de spam y trolls muy efectivo pero será sencillo de implementar diablo2

Un script en Blogger caragrá el archivo PHP que estárá en otro servidor, este se ejecutará y nos devolverá un dato. Ese dato lo procesaremos en Blogger con otro script. Suena engorroso pero no lo es; primero que nada, necesitamos el archivo PHP y este debe tener una instrucción especial que nos permitirá esa "comunicación entre ambos, debe comenzar con:
Header("content-type: application/x-javascript");
luego tendrá la instrucción que lee la IP y la guarda en una variable:
$IP=$_SERVER['REMOTE_ADDR'];
por último, nos devolverá ese dato en una variable que en este caso, llamé laIP:
$salida = 'var laIP = "' . $IP . '";';
echo $salida;
y nada más. El archivo completo será así:
<?
Header("content-type: application/x-javascript");
$IP=$_SERVER['REMOTE_ADDR'];
$salida = 'var laIP = "' . $IP . '";';
echo $salida;
?>
Lo guardo con el nombre devolverIP.php y en Blogger lo agrego antes del </head> de este modo:
<script src='URL_MI_SERVIDOR/devolverIP.php' type='text/javascript'></script>
Listo. Si miro mi blog ... no veré nada risa

Si quisiera mostrarla, en lugar de colocar el script allí lo pondría en la sidebar y debajo de ese script, pondría algo así:
SU IP ES: <script type='text/javascript'>document.write(laIP);</script>
o cualquier cosa similar. Este es un ejemplo: click aquí

Pero la idea es otra, la idea es detectar la IP y verificarla así que nos podemos basar en cualquiera de los scripts que andan por la red y que hacen esto. Una de las variantes sería más o menos así:
<script src='URL_MI_SERVIDOR/devolverIP.php' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
var lista_IPs = new Array();
// aquí ponemos la lista de IPs escritas de manera completa o parcial
lista_IPs[0] = '194.8.74';
lista_IPs[1] = '194.8.75';
lista_IPs[2] = '91.214.44.228';
lista_IPs[3] = '76.31.76.20';
// ahora, comparamos esa lista con la IP detectada
for(var i=0; i < lista_IPs.length; i++) {
eval('var verificar = /^' + lista_IPs[i] + '/ ;');
if (verificar.test(laIP)) {
// y si está en la lista hacemos algo, por ejemplo
// alert('LA IP FUE RECONOCIDA'); // una ventana de alerta
// history.go(-1); // o lo enviamos por donde vino
// window.location.replace("http://www.portalmix.com/curiosos/finalinternet.shtml") // o lo mandamos a otro sitio cualquiera
break;
}
}
//]]>
</script>
Hay muchos sitios donde podemos buscar información sobre PHP e incluso, ejemplos que podemos usar. Uno de ellos es phpclasses.org que dispone de cientos de tutoriales y códigos para descargar y que podemos estudiar o modificar. Basándome en uno de ellos llamado Google Page Rank Checker vamos con un segundo ejemplo sencillo: mostrar el PageRank de nuestro sitio de manera dinámica, es decir, chequeándolo.

El contenido del archivo PHP está en este archivo de texto y es largo (ni siqueira pretendo entenderlo) pero, básicamente funciona como el anterior con el agregado de esa clase o rutina especial que es la que busca y lee el PageRank:
<?php
Header("content-type: application/x-javascript");

Class GooglePR {
.......
// aqui va el código de la clase
.......
}

$dominio = 'http://nombreBlog.blogspot.com/';
$pageRank = new GooglePR();
$VPR = $pageRank-<GetPR($dominio);
$salida = 'var elPR = "' . $VPR . '";';
echo $salida;

?>
El proceso es siempre el mismo, se ejecuta el código y luego, se envia el resultado en una variable que leeremos con JavaScript, en este caso se llama elPR así que en Blogger usaría para mostrarlo donde quisiera:
<script src='URL_MI_SERVIDOR/mipagerank.php' type='text/javascript'></script>

MI PAGE RANK: <script type='text/javascript'>document.write(elPR);</script>
Un último ejemplo un poco más complejo y más útil: un formulario de contacto.

Como, en casi todo servicio de hosting nos proveen la posibilidad de tener cuentas de mail y poseen el servicio para manejaros, podemos encontrar muchos ejemplos en la web de cómo crear formularios de todo tipo, sin demsiadas restricciones y con muchas variantes. Este es uno muy simple que usa Ajax y consta de dos archivos, el primero es el formulario y el segundo el que procesa los datos, es decir, el que envia el mail.

Sería muy largo de explicar en detalle y no es nada original, sólo una copia modificada de alguno de los tantos que andan dando vuelta por allí y, en este caso, como no necesitamos ningún tipo de respuesta, bastaría simplemente crear un enlace al archivo:
<a href="URL_MI_SERVIDOR/formularioMAIL.php"> FORMULARIO DE CONTACTO </a>