CFORMS II HACER FORMULARIOS

Os presento uno de los Plugins para Wordpress.

Para instalar este plugin como siempre tendréis que hacer lo siguiente:

1. Descargar el plugin CForms II
2. Sube el plugin al directorio /wp-content/plugins/
3. Activa el plugin en WordPress.

 Con este plugin podréis personalizar totalmente los formularios!, espero que os sea de utilidad.

EMAILS MASIVOS GROUMAIL

Esta aplicación es muy útil para realizar envíos de forma masiva.

Esto puede ser muy útil por ejemplo para hacer campañas de publicidad, la aplicación permite realizar grupos, por ejemplo de clientes y una vez confeccionado el email, se envía a todos los miembros del grupo, es una aplicación muy ligera y de gran utilidad.

Entre sus aspectos a resaltar, destaca que es posible confeccionar emails en HTML lo cual le da una potencia bastante importante, podremos enviar correos totalmente profecionales y de una forma muy sencilla. Para los que no estén muy familiarizados con el lenguaje, la aplicación integra plantillas, por lo que simplifica notablemente el diseño de emails.

La aplicación la podréis encontrar muy facilmente en la web.

PERSONALIZAR PLANTILLAS BLOGGER

Blogger sigue creciendo y mejorando, fruto de ello es el nuevo editor de plantillas. Se acabó el tener que estar buscando plantillas que se adapten a nuestros gustos, a partir de ahora podremos personalizaras a nuestro gusto sin necesidad de tener conocimiento alguno de programación de ningún tipo. Son muchas las entradas que se han dedicado a ... por ejemplo como añadir una nueva sidebar, como poner el footer... en fin.. un montón de estrategias de programación que con el nuevo avance de blogger no es necesario.

Podéis ver un video en el cual se muestra un pequeño ejemplo de como podéis personalizar vuestras plantillas. Ahora no tenéis escusa para no tener vuestra plantilla a vuestro gusto!!
Espero que os guste y hagáis uso de este asistente. Personalmente no lo he probado pero lo cierto es que tiene buena pinta.

POPUP WINDOW.OPEN

Código para crear el famoso POPUP de 'Las condiciones de uso'

Al hacer click en (Ver condiciones) se abrirá el popup con el contenido que nosotros queramos.
El código que pondré a continuación es php por lo que no se puede crear en blogger pero quizás les sea de utilidad si tienen alguna web o algún dia crean una.

Tendremos 2 ficheros: prueba.php y CondicionesUso.html

En el fichero prueba.php tendremos el siguiente código:

<input type="checkbox" />
He leido y acepto las condiciones
<span style="cursor:pointer" onclick="javascript:window.open('condicionesUso.html','Condiciones',
'width=660,height=500, left=50,top=50,Scrollbars=YES,Resizable=YES')">
(Ver condiciones)
</span>


En el fichero condicionesUso.html tendremos el texto:

blablabla.....

Inspiración de Juanxo!!! ;) ->Time Ahnuncios

TRABAJO COMO BLOGGER

En una de mis búsquedas por la web encontré una curiosa y util web en la cual se ofrece trabajo para bloggers. En esta web se ofrecen ofertas para trabajar desde casa. Podeis observar la variedad de ofertas que se se anuncian y quizás os interese alguna. La forma de pago suele ser mediante paypal. Puede ser un trabajo alternativo al vuestro. Como me resultó interesante os dejo el link para que vosotros mismos lo veais. Si se anima alguien que avise a ver si mas gente se anima a trabajar en este tipo de cosas.

Enlace: Find a Blogger

SELECCIONAR DISTINTOS ESTILOS

Cursando una asignatura me enseñaron algo muy util y querria compartirlo con vosotros, no va orientado a los que tienen blogger, blogger como todos sabemos tiene ciertas limitaciones y una de ellas es que no podemos alojar diferentes hojas de estilo, me imagino que debe de haber alguna alternativa que ciertamente ahora no se me ocurre.

Bueno lo que propongo es que los visitantes puedan cambiar el estilo de la pagina mediante un pequeño 'menu'. En general las buenas webs tienen definidos diferentes estilos, normalmente se crean uno de alto contraste para discapacitados visuales, otro de impresión y uno principal y alternativo. Firefox tiene la opción de seleccionar el estilo desde Ver->Estilo de pagina, el problema venia como siempre con IE que no poseia esta opción, por tanto los diseñadores tenian que crear una alternativa para que todo el mundo pudiera seleccionar los distintos estilos. Debo resaltar que en la última versión (8.0) de IE si que la incorpora pero como siempre tenemos que diseñar para todos y desgraciadamente aún hay mucha gente con versiones antiguas de IE.

Por ejemplo en nuestra web tenemos los links a las distintas hojas de estilo de la siguiente forma:

<link rel="stylesheet" type="text/css" href="Principal.css" title="Predeterminado" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="Secundario.css" media="screen"
title="Secundario" />
<link rel="stylesheet" type="text/css" href="print.css" title="Impresion" />

Tenemos 3 estilos resaltados en negrita.

Ahora definiremos un par de enlaces en los que daremos la opción de simplemente haciendo click encima cambiará el estilo de nuestra pagina:

<p><b>Elige tu estilo</b></p><br />
<a href="Javascript:estilo('Predeterminado')">Principal</a><br /><br />
<a href="Javascript:estilo('Secundario')">Secundario</a>

Llegado a este punto tan solo tendremos que insertar nuestra función Javascript que permitirá cambiar de un estilo a otro.

function estilo(titulo) {//Para cambiar el estilo.

var arrayLink = document.getElementsByTagName("link");
for(var i = 0; i < arrayLink.length; i++) {
// Sólo aquellas etiquetas link que hacen referencia a un estilo
// y que no sea para impresión
if(arrayLink[i].getAttribute("rel") != null &&
arrayLink[i].getAttribute("rel").indexOf("stylesheet") != -1 &&
arrayLink[i].getAttribute("media") != "print") {
// Si tiene título es un estilo preferido o alternativo,
// si no tiene título es un estilo
// predeterminado y siempre tiene que utilizarse
if(arrayLink[i].getAttribute("title") != null &&
arrayLink[i].getAttribute("title").length > 0) {
if(arrayLink[i].getAttribute("title") == titulo)
arrayLink[i].disabled = false;
else
arrayLink[i].disabled = true;
}}}}

A esta función lo que le entra es el nombre del estilo seleccionado y busca dentro de las etiquetas link, cuando la encuentra lo activa poniendolo a true. Cuidado con el disabled, disabled=true es que está deshabilitado!!.


Ebook

BOTON ENLACE AUTOMATICO

Bueno como deberéis saber facilitar que os enlaces es algo muy importante ya que cuantas más facilidades deis mayor será vuestro éxito :). Bueno lo que os propongo es crear un sencillo botón que simplemente pulsándolo de la posibilidad de agregar vuestro banner o botón al blog del visitante interesado. Seguro que habéis hecho uso de este tipo de botones y pensaríais que chulo!!! el propietario de la web o blog es un maquina!, pues alomejor si o alomejor no.. vais a ver de que forma tan sencilla lo podéis hacer vosotros también.

Para que os hagáis una idea a lo que me refiero os pongo un ejemplo:

<br /> <a href="http://sitiooriginal.blogspot.com/"><br /> <img alt="TITULO DE TU BLOG" src="http://i40.tinypic.com/66itg1.png" /><br /> </a><br />

Si pulsárais en ENLAZA MI BLOG CITO os mostraría un formulario de este tipo:

Para hacer uso de este recurso, lo único que hay que hacer es crear un gadget de tipo HTML/Javascript y copiar el código que detallo a continuación.

<img src="URL DE LA IMAGEN DEL BOTON O BANNER"/>
<form action="http://beta.blogger.com/add-widget"
method="POST">
<input value="FAVORITO CITO" name="widget.title"
type="hidden"/>
<textarea style="display:none;"
name="widget.content">
<a href="URL DE TU BLOG">
<img src="URL DE LA IMAGEN DEL BOTON O BANNER" alt="TITULO DE TU BLOG">
</a>
</textarea>
<inputvalue="http://buzz.blogger.com" name="infoUrl"
type="hidden"/>
<inputvalue="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>
<input value="ENLAZA MI BLOG CITO" name="go" type="submit"/>
</form>


La parte de código que tendréis que modificar son las que os resalte con distintos colores, observando la imagen y los nombres que os puse resaltados en colorines creo que es bastante intuitivo. De todas formas si tenéis algún problema no dudéis en preguntar!!!!

Espero que os sea de mucha utilidad y por cierto si queréis agregar mi botoncillo por supuesto que os estaría muyyy agradecido :)

ENTRADAS MAS POPULARES

Soys ya varios los que me pidieron un gadget para mostrar las entradas mas populares, fue hoy con un email de treyvelan que me decidí a hacer una entrada para explicar brevemente y de una forma muy fácil como podéis conseguir esto en vuestro blog.

Lo primero que me gustaría decir es que una de las formas de medir la popularidad de una entrada es por el número de comentarios, es cierto que no tiene por que ser así pero es una de las formas y muy válida para medir cuanto de importante es una entrada.

Antes de nada me gustaría que vierais a lo que me estoy refiriendo, después de insertar el código que detallare un poco más abajo obtendréis algo similar a lo siguiente:

Lo único que tendréis que hacer para conseguir esto es crear un gadget de tipo HTML/Javascript y insertar el siguiente código:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback& _id=e1f5a9b2248904d8b81f794c09353010&url=http%3A%2F%2Fsitiooriginal.blogspot.com&num=5" type="text/javascript"></script>


Lo único que tendréis que modificar del código será la dirección de vuestro blog por donde dice sitiooriginal.blogspot.com y el número 5 representa la cantidad de post mas populares que queréis mostrar.
Bueno esto es todo amigos espero que os sea de mucha utilidad!!

BORRAR COMENTARIOS

A la hora de gestionar un blog tenemos que tener todos los cabos atados y uno de ellos es el control sobre los comentarios que se publiquen en el. Por norma general los comentarios deberían ser publicados casi todos ya que la opinión de los lectores es muy importante pero nos encontramos siempre con la gente que se aburre y le apetece fastidiar bien dejando comentarios absurdos o bien realizando ofensas.

Yo me encontré ya con esta situación, tuve que eliminar algún comentario, han sido pocos ya que veo imprescindible que se muestren las inquietudes y dudas de los lectores, de esta forma los problemas resueltos de unos servirán para solucionar problemas a los demás.

Me gustaría comentar aquí que debéis fomentar que en vuestro blog se comente, ya que a parte de acceder a un sitio y encontrar el famoso 0 comentarios es algo que no da muy buena impresión, ayudáis a posicionar vuestro sitio ya que los comentarios son indexados en los buscadores y de esta forma conseguiréis un mayor número de visitas.

¿Como elimino los comentarios no deseados?

Primera forma: (La típica)

Esta es la más común y es accediendo como administrador del blog y ir a donde se encuentra el comentario que no queréis que aparezca, os encontraréis el famoso bote de basura.

Haciendo click sobre este icono os dará la opción de eliminar el dichoso comentario que tanto os trae de cabeza.

Segunda forma: (Cuando no tengo el bote)

Es muy común que bien por modificaciones en el código de comentarios o bien por que la plantilla no esta implementada con esta opción no encontremos el bote, es muy posible que nos volvamos locos buscándolo o intentando agregarlo pero sin duda una forma mucho mas rápida y sencilla de eliminar los comentarios es la que os voy a mostrar a continuación.

Accederemos como administrador, es decir poniendo nuestro usuario y contraseña para acceder al blog.

1. Iremos a Editar Entradas y nos fijamos en la barra de direcciones del navegador que mostrará algo como lo siguiente:

http://www.blogger.com/posts.g?blogID=CODIGO1

Código 1 representa una serie de números específicos para cada blog, de forma que copiaremos estos números en cualquier lugar con tal de tenerlos a mano para cuando los necesitemos en los pasos posteriores.

2. A continuación iremos al post donde se encuentra el comentario no deseado, localizaremos el identificados del post en cuestión, dependiendo de como esté configurado el blog lo podremos obtener o bien haciendo click sobre el número del comentario o bien haciendo click encima del comentario en cuestión. Nos fijaremos en la barra del navegador y encontraremos algo como lo siguiente:

http://NombreDelBlog.blogspot.com/año/mes/TituloDelPost#comment-CODIGO2

Apuntaremos en cualquier lugar el CODIGO2 y realizaremos el paso final.

3. Una vez localizados los 2 códigos escribiremos en la barra del navegador una línea como la siguiente:

http://www.blogger.com/delete-comment.g?blogID=CODIGO1&postID=CODIGO2

Evidentemente sustituiremos los Códigos 1 y 2 por los números reales, presionaremos enter y Sorpresa!!!

ICONOS EN TITULOS DE POST

Añadir una pequeña imagen en el título de los post puede ser algo bastante interesante, rompe con la monotonía de las letras y puede resultar bastante ilustrativo siempre y cuando la elección de la imagen sea la correcta. Son del tipo de detalles que el lector agradece inconscientemente, por tanto os voy a mostrar varias formas de insertar estas pequeñas imagenes.

Este es un ejemplo:
Os voy a mostrar 2 formas de insertar los iconos, la primera será agregar un icono en un post concreto y la segunda agregar un icono fijo para todos los post.

En el título de un post concreto:

Cuando editamos una entrada, en el caso de blogger tenemos en la parte superior una casilla donde introducimos el título.

Tendremos que añadir lo siguiente:

<img src="URL DEL ICONO" />


Poner un icono al principio del post:

<img src="URL DEL ICONO" />TITULO DEL POST

Si queremos añadirlo al final:

TITULO DEL POST<img src="URL DEL ICONO" />


En medio del título:

TITULO <img src="URL DEL ICONO" /> DEL POST

Lo único que tendréis que modificar es la URL DEL ICONO, podréis encontrar todos los iconos que imagineis aqui eso si la búsqueda la tendréis que hacer en inglés, ya que el buscador es inglés. Como siempre podréis alojar las imagenes aqui para conseguir la url del icono.

En todos los post:

Deberemos de ir la plantilla de nuestro sitio, en el caso de blogger accederemos siguiendo Diseño->Edición de HTML y marcaremos la casilla de expandir artilugios.

Buscaremos el siguiente fragmento de código:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>



Si queremos el icono al principio del título del post, lo sustituiremos por:

<b:if cond='data:post.url'><img src="URL DEL ICONO" />
<a expr:href='data:post.url'><data:post.title/></a>


Si en cambio lo queremos al final, lo sustituiremos por:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/><img src="URL DEL ICONO" /></a>


Nota: Podéis observar al principio de este post de donde conseguir los iconos y obtener su dirección. Suerte y espero ver de aquí en adelante vuestros títulos decorados ;)

ELIMINAR SUSCRIBIRSE A ENTRADAS ATOM

Casi todos los que tengáis plantillas originales de blogger o bien adaptadas para el tendréis el famoso Suscribirse a entradas Atom. En primer lugar para aquellos que acaban de empezar lo más provable es que no sepan ni lo que significa y lo segundo es que normalmente se muestra de una forma muy cutre. Bueno esta maravillosa frase lo que permite haciendo click en ella es suscribirse al blog via feed, por ellos os recomiendo ocultarlo y cuando realmente queramos ofrecer este servicio configurarlo desde cero. Como muchas otras cosas las plantillas se hacen de forma genérica y lo más general posible, con el objetivo que después nosotros seamos los encargados de adaptarlas a nuestras necesidades.

La forma de ocultar esta maravillosa frase es la siguiente:

Nos iremos a Diseño->Edicion de HTML y buscaremos el siguiente fragmento de código:

.feed-links {
.........
.........
}


Los puntos suspensivos indican que el contenido que se encuentre dentro {} puede ser diferente, ya que depende de la posición y características de la plantilla, por tanto lo que tendremos que hacer para ocultar la dichosa frasecita será sustituir el código anterior por el siguiente.

.feed-links {
clear: both;
line-height: 2.5em;
visibility:hidden;
display:none;
}


Guardaremos los cambios y listo, ya desapareció la horrible frasecita, si por el contrario en algún momento queremos volver a mostrarla, únicamente tendremos que sustituir los códigos de forma inversa.

seguro familiar

MODIFICAR CURSOR

Cambiar el cursor en determinadas partes de un blog o web es algo que puede resultar al mismo tiempo que útil bastante original, lo de útil lo digo ya que permitirá diferenciar de una forma muy clara donde se encuentran links, ya que en ocasiones estos no quedan del todo claros. Normalmente los valores por defecto permiten que cuando el cursor se encuentra encima de un link aparezca la famosa mano. Os voy a mostrar una forma muy simple de modificar este valor tan solo en lugares que vosotros queráis.

Conociendo los links:

La forma que tienen los links es la siguiente:

1.Enlaces de texto:

<a href="DESTINO_DEL_ENLACE">TEXTO</a>


Ejemplo:

Esto es un enlace de texto a wikipedia

2.Enlaces tipo imagen:


<img src="URL_DE_LA_IMAGEN">


Ejemplo:



La estructura de código que tendremos que insertar para modificar los cursores será la siguiente:

Para el primer caso:

<a style="CURSOR: NOMBRE_DEL_CURSOR" href="DESTINO_DEL_ENLACE">TEXTO</a>


Para el segundo caso:

<img style="CURSOR: NOMBRE_DEL_CURSOR" src="URL_DE_LA_IMAGEN">


El valor NOMBRE_DEL_CURSOR lo podéis cambiar por los siguientes que cito aquí abajo, podéis poner el cursor encima del nombre para observar su resultado.

default crosshair hand move nw-resize ne-resize n-resize e-resize help text wait

Espero que os sea de utilidad, ya me contaréis como os fue ;)

MODIFICAR FONDO TITULO GADGET

A raiz del post EXPANDIR GADGET preguntaba misaani como podía cambiar el fondo del título de un gadget. Modificar el aspecto de todos los títulos y fondos es algo común pero en este caso en concreto vamos a ver como podemos modificar uno por uno, así teniendo más flexibilidad a la hora de personalizar y poder mostrar diferentes estilos en las distintas partes de la sidebar.

Los títulos en los elementos de mi sidebar se muestran de la siguiente forma:

En primer lugar tendremos que crear una imágen del mismo ancho y largo de nuestros títulos, por ejemplo:

Una vez tengamos la imágen que pasará a ser la nueva apariencia del título de nuestro gadget tendremos que seguir los siguientes pasos:

Primer paso:(Ubicar código)

Iremos a la parte de código de nuestra plantilla y realizaremos una búsqueda por el nombre del gadget que figura en nuestro panel de administrador, en este caso ARCHIVO.

Encontraremos una línea como la siguiente:

<b:widget id='BlogArchive2' locked='false' title='ARCHIVO' type='BlogArchive'/>


Nos fijaremos en la parte que se encuentra señalada en negrita, después de id, que será el identificador de nuestro gadget.

Segundo paso:(Añadir estilo)

En la parte de código de nuestra plantilla buscaremos ]]></b:skin>, será justamente encima donde tendremos que pegar una línea de código con la siguiente estructura.

#BlogArchive2 h2 {
background: url(URL IMAGEN FONDO) left top;
}



Tendréis que tener en cuenta que lo señalado en negrita será vuestro identificador, que tendrá que ser igual que en el primero paso y lo señalado en color azul será la imágen que creásteis anteriormente, podéis hacer uso de un servidor para alojar vuestra imagen como pueda ser este. Podéis hacer una vista previa antes de guardar los cambios para observar el resultado. En el caso de que el fondo sea de un solo color o tenga algún motivo no tendréis problema, en el caso de que el fondo refleje el título que es ese nuestro caso tendréis que jugar un poco con el título del gadget de forma que quede visualmente agradable sin eliminar completamente el título del gadget. Yo por ejemplo le añadí un punto :). El resultado sería algo como lo siguiente.

Tener un poco de paciencia y ir jugando un poco hasta que quede bonito, lo más seguro es que no os salga a la primera pero bueno ir probando que seguro que conseguiréis cosas muy chulas!. El procedimiento es simple pero si tenéis alguna duda no dudéis en preguntar.

VIDA DEL BLOG Y FECHA

Una forma de mostrar los dias de vida de tu blog y la fecha actual puede ser interesante insertarlo en un blog o web ya que puede ser un dato interesante para los lectores. Insertarlo es muy sencillo y se hará de la siguiente forma.

Deberemos insertar el siguiente script en el lugar donde queramos que aparezca la informacion, en el caso de querer insertarlo en la sidebar que quizás sea lo más común, deberemos insertar un gadget de tipo HTML/Javascript.

<center><script>
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countup(yr,m,d){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" días"
document.write("Hace "+difference+" que mi Blog esta en linea!")
}
countup(2009,02,01)
</script>
Y hoy estás a <script><!--
dows = new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado");
months = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
now = new Date();
dow = now.getDay();
d = now.getDate();
m = now.getMonth();
h = now.getTime();
y = now.getFullYear();
document.write(dows[dow]+" "+d+" de "+months[m]+" de "+y);
//--></script></center>


Personalización:

Puesto que el tiempo de vida de los blogs es diferente, podremos modificar el comienzo del mismo modificando la fecha señalada en color azul. Otros mensajes que podrás modificar serán los señalados en color rojo.

En esta imagen muestro cual sería el resultado, claro está que cada día se actualizarian sus datos pero por no cargar el script lo muestro de la siguiente forma.

EXPANDIR GADGET

Utilizar este recurso es una opción muy inteligente para ahorrar espacio en la sidebar de nuestra web o blog, consiste simplemente en mostrar el título de nuestro gadget y si el usuario está interesado en observar su contenido, lo podrá hacer haciendo click encima del título, seguidamente el título se despleglará mostrando su información.

Un ejemplo es el siguiente, esto es lo que se mostrará:


Al hacer click encima se desplegará mostrando la información de la siguiente forma:

Esto es un simple ejemplo, pero podemos utilizarlo para cualquier gadget.

Primer paso:(Copiar el script)

Iremos al código de nuestra plantilla y colocaremos el siguiente script justamente encima de </head>

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>


Segundo paso:(Buscar el gadget)

Para ello marcaremos la casilla de expandir artilugios en el caso de blogger y realizaremos la búsqueda por ejemplo con ctr+F y realizaremos la búsqueda por el nombre de nuestro gadget, tal y como aparece en nuestro panel de administrador, por ejemplo en el caso anterior mi gadget se llama ARCHIVOS.
Nos encontraremos con la línea de código tal como la siguiente:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>


El nombre variará dependiendo del nombre de vuestro gadget.

Tercer paso:(Agregar código)

*Agregaremos la siguiente línea marcada de color azul de forma que quede así:

<b:widget id='HTML4' locked='false' title='ARCHIVOS' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle("RINCON","slide"); return false'>


La palabra marcada en color rojo hace referencia a un identificador, en el caso de que insertéis este recurso repetidas veces deberéis de cambiar este nombre por cualquier otro de forma que no aparezcan 2 gadgets con el mismo identificador.

Unas líneas mas abajo nos encontraremos con la siguiente línea:

<h2 class='title'><data:title/></h2>
</b:if>

*Agregaremos lo que indico en color azul, de forma que quede de la siguiente forma:

<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='RINCON' style='display: none;'>

Tener en cuenta lo dicho anteriormente del identificador, ya que aquí también tendremos que indicar su nombre correcto en el caso de insertar varios gadgets.

*De la misma forma que anteriormente continuamos hacia abajo en el código y añadimos la línea que indico en color azul.

</div>
<b:include name='quickedit'/>


SEPARADORES <HR>

En ocasiones cuando se redacta un post nos gustaría crear separadores de forma rápida, podréis insertarlos en la entradas de la siguiente forma:
Tendréis que añadir en Edición de HTML el código correspondiente al tipo de separador que deseéis.

Un separador simple se crea con el código <hr> , de esta forma obtendréis:

---

Como observáis una linea simple, ahora vamos a ir definiendo propiedades que le podemos añadir a nuestro separador:

Atributo size: Este atributo especifica la altura del separador.

Atributo width: Este atributo especifica la anchura del separador, el valor por defecto es de 100%, es decir el separador se extiende a lo largo de todo el ancho donde se encuentre.

Atributo align: Este atributo especifica la alineación horizontal del separador con respecto al texto, los posibles valores que puede tomar son:

• left: alineado a la izquierda.

• center: centrado

• right: alineado a la derecha

Atributo color: Le podremos especificar el color del separador.

De esta forma podremos ir combinando las propiedades de la siguiete forma:

---

Codido:<hr size=7>

---

Codigo:<hr size="5" width="50%">

---

Codigo:<hr size="5" width="50%" align="right">

---

Codigo:<hr size="5" width="50%" align="center" color=#FF0B07>


---

Codigo:<hr size="5" width="90%" align="center" color=#33FF00>


Bueno como podéis observar podéis ir combinnando los atributos como más os guste, esto solo eran unos ejemplos, a partir de esto vosotros podréis crear vuestros propios separadores, ya me diréis como os van.

AMPLIAR IMAGEN CON CLICK

Os voy a mostrar una forma de ampliar una imagen haciendo click encima de la misma, la novedad será que la imagen se ampliará en la misma ventana y no en una ventana a parte, puede ser muy útil en galerías de imágenes, donde el usuario con un simple click tenga la posibilidad de ampliar la imagen para poder bservarla de una forma mejor.

Primer paso:(Ubicación del script)

Nos vamos a Diseño->Edición HTML y buscaremos </head> justamente encima copiaremos el siguiente script:

<script type='text/javascript'>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;
}else{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>


Segundo paso:(La imagen en cuestión)

Para crear el efecto, tendremos que copiar el siguiente fragmento de código allí donde nosotros queramos, ya sea en una entrada o en un gadget.

<img src="URL_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">


Modificar URL_imagen por la dirección donde se encuentra la imagen a la que le queremos aplicar el efecto.
Donde pone ancho1px y alto1px se corresponde con el tamaño de la imagen una vez realizado el click y ancho2px y alto2px se corresponde con la imágen original, de esta forma conseguiremos el siguiente efecto. Para observar el efecto hacer click encima de la imagen.

ENMARCAR

En esta ocasión veremos como modificar nuestra plantilla para crear marcos en las distintas partes del blog, tan solo tendremos que añadir unas línea de código. Haremos uso de la propiedad border que pondrá un borde a aquella parte que nosotros queramos y background que dará color a nuestra área seleccionada. En primer lugar vamos a diferenciar las distintas partes de la plantilla en la que podemos poner los marcos. Deberéis fijaros en la parte punteada de color azul, que representa el marco.

1.Parte central:
Se corresponde con la parte central del blog, abarca todos los post.

2.Sidebar:

Se corresponde generalmente con las columnas dispuestas a los laterales del blog.

3.Footer:

Parte inferior de los post, donde suelen aparecer las etiquetas correspondientes a la entrada, fecha, firma...

Una vez tenemos claro cuales son las partes en las que podemos insertar los marcos, deberemos ir a Diseño->Edición HTML, aquí es donde encontraremos el código de nuestra plantilla. Dependiendo de donde queramos crear el marco buscaremos la parte de código donde insertar la siguiente linea de código:

border: dotted #3300CC; 2px;

-------------------------------------Propiedades---------------------------------------------

dotted: Tipo de marco, podéis probar los distintos tipos de linea modificando este valor. Tipos de marcos:dotted, solid, dashed, double, ridge, inset, groove, outset.

#3300CC: Se corresponde con el color del marco, podréis modificar el color modificando este valor.

2px: Se corresponde con el grosor de la línea, podréis aumentar o disminuir el grosor modificando este valor.

-------------------------------------------------------------------------------------------------

Si además queréis rellenar el fondo de color, como en el ejemplo número 2, deberéis añadir también la siguiente línea:

background-color: #3300CC;


-------------------------------------Propiedades---------------------------------------------

#3300CC: Representa el color del fondo.

-------------------------------------------------------------------------------------------------

Esta o estas lineas las insertaremos debajo de las siguientes partes dependiendo de donde queramos crear el marco.

Para el primer caso:#main-wrapper {
Para el segundo caso:#sidebar-wrapper {
Para el tercer caso:.post-footer {
Para ponerle marco a todo el blog:#outer-wrapper {

FRASES ALEATORIAS

Poner frases aleatorias en el blog es muy simple, cada vez que se cargue la página donde esta ubicado el script, se mostrará una frase diferente, puede ser un recurso divertido ya que le da cierto dinamismo al blog. A continuación os mostraré como hacerlo.

Primer paso:(Ubicación del script)

Lo más común será insertarlo en la sidebar por tanto agregaremos un nuevo gadget de tipo HTML/Javascript y pegaremos el siguiente código:

<script language="JavaScript">
citas = new Array(5)
citas[0] = "Sé bueno con tus hijos. Ellos eligirán tu residencia"
citas[1] = "Me pregunto: ¿Qué haría yo sin mí?"
citas[2] = "La esclavitud no ha sido abolida"
citas[3] = "Los mocos son la plastilina de los pobres"
citas[4] = "Me cago en san pito pato"
aleatorio = Math.random() * (citas.length)
aleatorio = Math.floor(aleatorio)
document.write(citas[aleatorio])
</script>

Segundo paso:(Nuestras frases)

En primer lugar seleccionaremos las frases que queremos para que el escript decida aleatoriamente cual mostrar, en el ejemplo, puse 5 frases, si queréis poner el mismo número de frases tan solo tendréis que modificar las frases en si, si por el contrario queréis cambiar el número de frases actuaremos de la siguiente forma:

En la segunda línea del código podéis observar un 5 que es el número de frases, cambiar este valor por el que vosotros decidáis.
Seguidamente en el código encontramos líneas con la siguiente estructura:

citas[0] = "Aqui una frase"

Fijaros que si son 5 frases el valor del interior de los corchetes (marcado en rojo) varía entre 0 y 4 por tanto si decidieramos poner 3 frases deberíamos borrar líneas hasta que quedara solo de 0 a 2 es decir la última linea tendrá siempre el valor del número de frases menos 1, si por el contrario queréis añadir más frases tendréis que ir añadiendo líneas con la misma estructura modificando únicamente el valor del número.

Me preguntaba C.C.S que si se podía personalizar un poco más las frases aleatorias, la respuesta es que si. Veamos un ejemplo.

<div style="text-align: center; font-weight: bold">

CODIGO FRASES ALEATORIAS

</div>

Insertando nuestro código en este div, podremos modificar tanto la alineación, tipo de letra y color, podéis consultar los colores aqui.

VENTANA EMERGENTE ACEPTAR CANCELAR

Contestando a SiMoN RoV, que quería una ventana emergente con las opciones Aceptar y Cancelar, similar a la entrada esta pero dependiendo de la opción elegida hacer una cosa o otra, él en concreto quería que con la opción Aceptar se cargue una nueva pagina y con la opción Cancelar se cierre la ventana y no vaya a ningún sitio.

El código a insertar en el caso de ventana emergente mediante un texto es el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('URL DESTINO CON ACEPTAR')}">TEXTO</span>


Para observar el resultado situar el cursor encima de la palabra TEXTO; si se pulsa aceptar, se cargará la página de google, si cancelar se cerrará la ventana sin hacer nada.

TEXTO
Para el caso de imagenes, el código será muy similar y será el siguiente:

<span onmouseover="javascript:if(confirm('MENSAJE DE LA VENTANA')){window.open('https://www.google.com')}"><img src="URL DONDE ESTA LA IMAGEN" border="0" /></span>


A diferencia del ejemplo anterior, lo único que cambia es que tendremos que sustituir URL DE LA IMAGEN por la dirección donde se encuentra, el efecto será el siguiente, de la misma forma situar el cursor encima y con Aceptar se cargará la página de google.