Archivo de la categoría ‘Blogger’
Tutorial para integrar plantillas flash en Blogger con Wix.
Echando un vistazo a los anuncios de los patrocinadores de un blog, me topé con un práctico, eficaz y excelente servicio web gratuito de creación de plantillas web en flash. Me refiero a Wix.com, una plataforma verdaderamente fácil de usar a través de la cual podrás crear, editar y obtener un diseño web dinámico y profesional en cuestión de minutos. Una vez que hayas generado tu diseño, basta con copiar el código del mismo que te permitirá integrarlo en cualquier blog, aplicación o sitio web, incluso de forma directa en servicios como Blogger, MySpace, Typepad o Facebook, entre otros.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Formulario de contacto para Blogger sin servicios externos
Hace un mes, Iván nos mostraba una excelente recopilación de servicios para añadir un formulario de contacto a Blogger. En general, funcionan muy bien, y pueden ser añadidos a cualquier plantilla luego de registrarse en los respectivos sitios.
Insertar un formulario de contacto en Blogger sin depender de esos servicios, no es tarea fácil, porque necesitas que corra con PHP (y javascript en este caso), pero tampoco es algo imposible. En Viet Web Guide, encontré la manera de hacerlo, cosa que resulta todo un descubrimiento. Logré traducir y modificar todo el código del formulario (del vietnamita al español), añadiendo y quitando filas para crear una versión algo distinta de la original, pero igualmente funcional.
El único problema, es que necesitas utilizar un hosting externo para almecenar el archivo PHP que usa el formulario. Yo utilicé un hosting gratuito, con el cual espero que no haya ningún problema; pero debes considerar que no es improbable que tengas que volver a almacenar el archivo en otro hosting como Tripod.
Vista previa del formulario
Cómo instalar el formulario (paso a paso)
1. Copia el siguiente código antes de < /head >, y guarda tu plantilla:
<script type='text/javascript'>
//<![CDATA[
function valid(form) {
var field = form.email;
var str = field.value;
if (window.RegExp) {
var reg1str = "(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)";
var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$";
var reg1 = new RegExp(reg1str);
var reg2 = new RegExp(reg2str);
if (!reg1.test(str) && reg2.test(str)) {
return true;
}
field.focus();
field.select();
return false;
} else {
if(str.indexOf("@") >= 0)
return true;
field.focus();
field.select();
return false;
}
}
//]]>
</script>
2. Crea una nueva entrada, idealmente con una fecha anterior al resto de tus entradas, y pega el siguiente código:
<form action="http://girlyblogger.site90.net/email.php" method="post" name="myform" onsubmit="return valid(this)"><input type="hidden" name="recipient" value="tu@gmail.com"><input type="hidden" name="subject" value="Contacto vía e-mail"><input type="hidden" name="redirect" value="http://tublog.blogspot.com"> Nombre (obligatorio):<br><input type="text" size="30" name="realname"><br> E-mail: (obligatorio, no será mostrado)<br><input type="text" size="30" name="email"><br> Sitio Web:<br><input type="text" size="30" name="website" id="website"><br> Tu mensaje:<br> <textarea cols=40 rows=6 name="Comments" wrap="soft"></textarea> <input type="submit" value="Enviar"> <input type="reset" value="Limpiar"> </form>
3. Haz los siguientes reemplazos:
- En tu@gmail.com, pon tu e-mail. Es un campo oculto que permite que todos los mensajes enviados a través del formulario lleguen directamente a tu e-mail.
- Y en vez de http://tublog.blogspot.com, escribe la dirección de tu blog. Es otro campo oculto que permite que, luego de enviar el mensaje, los visitantes sean redireccionados automáticamente a la sección de tu blog que elijas.
No necesitas hacer nada más. Sólo guarda.
El archivo PHP
En caso de problemas con el hosting, sigue los siguientes pasos para realmacenar el archivo email.php:
1. Copia y pega el siguiente código en un block de notas.
<?
$env_report = $_SERVER['REMOTE_ADDR'];
$recipient = $_POST['recipient'];
$subj = $_POST['subject'];
$redirect = $_POST['redirect'];
$realname = $_POST['realname'];
$email = $_POST['email'];
$Comments = $_POST['Comments'];
$website = $_POST['website'];
$mes = "".$Comments."nnn Sitio Web: ".$website."n E-mail: ".$email."n ";
$from = $realname."<".$email.">";
$a = mail($recipient, $subj,$mes,"From: $fromnReply-To: $emailnX-Mailer: PHP/" . phpversion());
if($a) echo "<script>alert('Tu e-mail ha sido enviado. Gracias!'); function go(){ top.location.href='$redirect'; } ; setTimeout(go(),4000);</script>";
?>
2. Gúardalo como:
- Nombre: email.php
- Tipo: Todos los archivos
- Codificación: UTF-8
3. Sube el archivo a tu hosting y reemplaza el link “http://girlyblogger.site90.net/email.php” (que aparece en el código del formulario) por el tuyo.
- Dirección alternativa del archivo email.php (sólo reemplaza): “http://chicablogger.chica-web.es/email.php“
Consideraciones finales
- El formulario es muy simple, pero si sabes algo de CSS podrás hacer algunas modificaciones para que luzca más bonito.
- En caso de problemas, recuerda que necesitas realojar el archivo email.php.
- Los comentarios, las sugerencias y las pruebas de este “hack” son siempre bienvenidos. Espero que sea de utilidad.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
El uso del formato de la hora (timestamp) en Blogger
En Blogger hay dos fechas: una principal y una secundaria. La fecha secundaria, corresponde por defecto a la hora (post timestamp), y no suele dársele otro uso fuera de ese. Sin embargo, podemos utilizar el formato de la hora para solucionar uno de los grandes problemas de Blogger: que muestra la fecha sólo en el primero de los post publicados en un mismo día.
En tu plantilla, la fecha y la hora corresponden a los siguientes códigos:
La fecha principal
<b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if>
La hora (fecha secundaria)
<span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span>
De esta manera, podemos darle dos usos a la hora en Blogger.
Uso básico
Consiste simplemente en reemplazar la fecha principal por la secundaria (con los artilugios expandidos). Para ello:
1. Elimina el código de la fecha principal.
2. Mueve el código de la hora a la ubicación de la fecha principal, del siguiente modo:
<h2 class='date-header'>CODIGO-DE-LA-HORA</h2>
3. En Configuración/Formato, cambia el formato de la hora.
Script para mostrar la fecha como un calendario
Scripts para mostrar la fecha en formato calendario hay varios. Sin embargo, el problema es que utilizar la fecha principal causa que ésta se suprima a partir de la segunda entrada publicada en un mismo día. Este script no tiene ese problema, porque utiliza la fecha secundaria (timestamp).
Para usarlo:
1. Cambia el formato de la hora a la fecha de hoy (Configuración/Formato). Por ejemplo: “Viernes, Mayo 08, 2009“.
2. Anda a la edición de HTML y expande los artilugios.
3. Añade el siguiente código CSS antes de ]] >< /b:skin >:
.date {
width: 60px;
height: 68px;
padding: 0 10px 0 0;
float: left;
margin:0;
background: url('http://3.bp.blogspot.com/_V-IXTBBt1Bg/SgTpXpB6YOI/AAAAAAAABCQ/7yuwqRsu0uI/s1600/date_button_template.gif') no-repeat;
}
.date_d {
display:block;
margin-top:5px;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 22px;
}
.date_m {
display:block;
margin:0;
color: #fff;
text-align:center;
font-weight: bold;
font-size: 16px;
}
*”date” es el calendario, “date_d” es el día y “date_m” es el mes. Puedes modificar los valores de acuerdo a las dimensiones de la imagen de fondo.
4. Busca el siguiente código en tu plantilla:
<div class='post hentry uncustomized-post-template'>
Añade debajo:
<div class='date'>
<script type='text/javascript'>
var timestamp = "<data:post.timestamp/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script></div>
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div>
</div>
Guarda los cambios.
Variantes
Si quieres mostrar el día antes que el mes, sólo tienes que cambiar de lugar las líneas div class=’date_m’ y div class=’date_d’, de la siguiente forma:
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div> <div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script></div>
Si quieres mostrar el año, debes añadir la siguiente línea de código justo al lado del mes (puede ir precedida de una coma):
<script type='text/javascript'>document.write(date_yyyy);</script>
De esa manera, tienes:
<div class='date_d'><script type='text/javascript'>document.write(date_dd);</script></div> <div class='date_m'><script type='text/javascript'>document.write(date_mmm);</script><script type='text/javascript'>document.write(date_yyyy);</script></div>
Consideraciones finales
1. En ambos casos, reemplazar la fecha secundaria por la principal causará que no puedas mostrar la hora de publicación en tu plantilla. De cualquier modo, la hora no es relevante en un blog; no porque en Wordpress casi siempre se prescinda de ella, sino por las evidentes variaciones horarias de un país a otro.
2. Antes de hacer cualquier cambio, guarda una copia de tu plantilla. A veces los cambios no resultan como has planeado.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Herramientas para ahorrar tiempo cuando usas Blogger
El tiempo es un factor importantísimo a la hora de escribir en un blog (y en cualquier quehacer). Por ello, pensando especialmente en quienes usan Blogger, hice una pequeña lista de herramientas para economizar tiempo cuando bloggeas. Bien dicen que la economía es riqueza.
Gadgets para iGoogle
- Blogger Dashboard: Te da fácil acceso al panel de control de Blogger (ingresando la ID numérica de tu blog que puedes extraer de los links de tu panel). Así, puedes crear y editar tus posts, configurar tu blog o editar tu plantilla directamente desde iGoogle (en inglés).
- Blogger, por Andy Amonat: Te permite crear posts rápidos para cualquiera de tus blogs, emulando al “quickpress” que incluye Wordpress desde la versión 2.7.
- Photobucket Plugin: Las funciones básicas de Photobucket, en un solo gadget: alojar imágenes desde tu pc, navegar por tus álbumes y obtener las urls de tus imágenes; todo sin necesidad de acceder a tu cuenta desde Photobucket.com.
- Otros gadgets que podrías añadir: Google Reader, feed de los comentarios de tu blog (la url de tu blog + /feeds/comments/default), y el gadget de Blogger Buzz en español, para estar enterado de las últimas novedades en Blogger.
*Si todavía no usas iGoogle, puedes añadir “http://www.google.es/ig” como página de inicio de tu navegador y comenzar a personalizarla.
Extensiones para Firefox
- Zemanta: Mientras escribes, te sugiere imágenes de calidad que podrían relacionarse con el tema de tus artículos. Puedes insertar una imagen con un solo click, y sin tener que preocuparte por los derechos de autor.
- Photobucket uploader: Almacena imágenes de la web en tu cuenta de Photobucket con un solo click del botón derecho de tu mouse, para su posterior utilización.
- ScribeFire: Un completo editor que se integra con Firefox, y que simplifica la publicación en tu blog.
- Blogger Toolbar: Barra de herramientas para Blogger (en inglés), desarrollada por Amanda Fazani de BloggerBuster. Incluye una caja de búsquedas, links de acceso directo a tu panel, temas de ayuda y “Blog This!” (bloggea esto) para crear entradas rápidas.
¿Hay alguna otra herramienta que consideres útil para optimizar el trabajo en Blogger?
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Template Framework ZC, el primer framework para Blogger
Blogger Framework es un template para Blogger que he transformado a partir de la plantilla original Minima diseñada por Douglas Bowman. Un framework es una estructura predefinida que sirve como base, patrón o modelo sobre el que comenzar a diseñar un proyecto, una página o el aspecto de un blog de Blogger en este caso, pues esta plantilla prácticamente en “blanco” sin widgets, variables, colores, bordes y objetos complementarios, es la que he utilizado hasta el momento para ahorrar tiempo al adaptar todas y cada una de las plantillas para Blogger publicadas.
Si empleas este framework en la construcción de tu plantilla, no es necesario que incluyas ningún enlace hacia este blog, aunque sería una buena forma de agradecimiento por compartirla de forma desinteresada.
Descarga
Actualmente, estoy preparando un tutorial relacionado con el diseño en Blogger que quizás tarde varios días en terminar, en el que también usaré esta plantilla como base.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Blogger Buzz comparte el amor por los templates
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Esta tarde, mientras leía algunos artículos que tenía pendientes en Google Reader, me llevé una grata sorpresa al detenerme en el blog de Claudia, la Chica Blogger que escribió para Zona Cerebral el mes pasado durante mi ausencia. Resulta que Rick Klau, uno de los miembros del equipo de Blogger en Google, ha publicado en el blog oficial de esta plataforma una lista con los 12 sitios más recomendados por los usuarios desde los que descargar plantillas para Blogger. Quisiera compartir con todos vosotros el honor y la gran satisfacción que ha sido para mi comprobar que Zona Cerebral se encuentra en esa lista (mostrada a continuación) junto con grandes compañer@s y amig@s como son BTemplates y Chica Blogger, a la que agradezco de todo corazón que recomendara este blog en los comentarios del post de Rick Klau.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!