DROP CAPS LETRA GRANDE EN POST

Drop Caps no es mas que hacer la primera letra del párrafo grande, es lo que utilizan por lo general las revistas para resaltar algunos de sus artículos, podréis crearlo siguiendo los siguientes pasos.

Primer paso:

Dirijiros a la plantilla de vuestro blog, Diseño->Edición HTML, una vez aquí buscar el siguiente código (sin expandir plantilla de artilugios) ]]></b:skin>, copiar el siguiente código justamente encima.

.dropcaps {
float:left;
color:$headerBgColor;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
Nota:Elegir el color ver abajo.


Segundo paso:(Personalización):

font-size: hace referencia al tamaño de la letra
color: $headerBgColor hace referencia al color de la primera letra del párrafo, por ello tendremos que seleccionar un color, podemos elegir un color desde aquí.
Pondremos un color modificando la línea y dejándola de la siguiente forma:
color: #EF09FF;(donde lo que va después de la # es el código del color seleccionado). Guardamos la plantilla y listo para utilizar.

Tercer paso: Como insertarlo.

Para insertar este efecto en la entrada tendréis que insertar el siguiente código en Edición de HTML <span class="dropcaps">D</span>
seguidamente escribiréis el párrafo, (en vista previa no se puede observar) y obtendréis algo como podría ser lo siguiente.

P
ara mi lo sorprendente no es que Google lance ahora un navegador; siempre he pensado que acabarán lanzando hasta tostadoras. Ya sé que pensando así, debo ser ”un perdido“, pero a mi ya me cansa esta política de lanzamiento constante de cosas que vienen a salvar nuestras vidas (pero estos tipos; ¿no acabarán agotados?).Esto muestra el resultado de nuestro Drop Caps.

SPOILER IMAGENES Y TEXTOS OCULTOS

Spoiler no es mas que un texto o imagen oculto detrás de un texto, son bastante útiles para alojar por ejemplo imágenes de gran tamaño o textos, veamos un ejemplo que es la forma más fácil de entenderlo.

EJEMPLO(Pinchar aquí para ver el ejemplo)

Esto es un ejemplo muy simple, lo podéis complicar tanto como queráis, podéis combinar texto con imágenes, solo texto o imágenes en fín eso depende de la utilidad que le vayáis a dar.


Como insertarlo en vuestro blog:

Primer paso:(acciones previas)

Tendréis que insertar un pequeño código en vuestra plantilla, para ellos dirijiros a Diseño->Edición de HTML

Buscar </head> justamente encima del mismo copiar el código:

<script type='text/Javascript'>

function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

Una vez insertado ese código buscar la parte de código ]]></b:skin> y justamente encima colocaremos el siguiente fragmento de código:

.commenthidden {display:none;}
.commentshown {display:inline;}

Guardamos la plantilla y listo para utilizar.


Segundo paso:(inserción spoiler)

En el lugar que queramos que aparezca nuestro spoiler tendremos que añadir unas líneas de código, si es en una entrada en edición de HTML, si es en un lugar de la plantilla en el lugar del código oportuno y si es en un gadget este será de tipo HTML/javaScript.




<a aiotitle="click para expandir" href="javascript:togglecomments('Identificador')">SPOILER</a>
<div class="commenthidden" id="Identificador">Contenido Oculto</div>


Personalizar :

Identificador: Hace referencia a un nombre que tendréis que darle al spoiler, este nombre tendrá que ser único, es decir dos spoiler no podrán tener el mismo nombre, podréis asignarle cualquiera que se os ocurra ya que este no se verá reflejado en ningun lugar.

Contenido Oculto: Aquí es donde insertaréis el texto o imágen oculto

• Para insertar imágenes tendréis que subirlas a un servidor de imágenes como puede ser tinipyc, una vez generado el código tendréis que copiar el primer enlace donde dice: Dirección HTML para sitios Web y sustituirlo por donde puse contenido oculto.

• Para insertar texto, donde puse contenido oculto insertar algo de este tipo

  <span style="font-weight:bold;">Aqui el texto que queráis</span>
  

  Podéis por supuesto modificar el estilo de letra tamaño, color...
  

Nota: Combinar los pasos anteriores es muy simple, simplemente es realizar las acciones en el orden que más os convenga.

TEXTO SIGUE RATON

Poner un texto que persiga al ratón por cualquier parte de la pantalla es muy fácil tal solo tendréis que seguir las siguientes indicaciones.

Primer paso: Ve a Diseño->Nuevo Gadget->HTML/Javascript

Segundo paso: Tendrás que copiar el siguiente código.

<script language="JavaScript" type="text/javascript">
mensaje = 'Deja tus comentarios';
font = 'Arial';
size = 2;
color = 'red';
velocidad = 0.8;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);
mensaje = mensaje.split('');
n = mensaje.length;
a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";
if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
if(n4)
window.captureEvents(Event.MOUSEMOVE);
function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}
if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;
y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();
for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}
function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;
for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}
function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);
for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}
window.onload = ondula;
</script>


Tercer paso:(personalización)
No os asusteis por el código ya que lo único que tendréis que cambiar es:

mensaje: 'Escribir el que vosotros queráis'
font: podéis elegir entre Arial, Verdana, Helvetica, Comic Sans MS(es el tipo de letra)
size: tamaño de la letra
color: red, white, black, blue, green (color del texto)
velocidad: velocidad con que se mueven las letras.

EL BOTON QUE NO HACE NADA

El botón que no hace nada, si quieres incorporar uno a tu blog puedes hacerlo desde la siguiente dirección, ingresando tu url y copiando el código generado.Intenta no perder el código generado ya que no te dejará generar otro nuevo código para la misma url.

Seguimiento de vuestro botón desde aquí.

PAGINA EN TU BLOG

Podemos mostrar una página dentro de nuestro blog, os pongo un ejemplo y lo vereis rápidamente

Por poner un ejemplo voy a mostrar la página de youtube.

Podréis incluso navegar por dentro de la web, el código que necesitaremos para insertar una página es el siguiente:


<iframe src="Aquí la dirección completa de la página que queráis mostrar"></iframe>


MASCOTA PARA TU BLOG

Una mascota es una de las cosas que podéis incorporar a vuestro blog, tendréis la oportunidad de darle un nombre y personalizarla a vuestro antojo, hay muchas webs que ofrecen multitud de mascotas yo os os voy a mostrar uno y es el siguiente. Bunnyherolabs

Una ve aquí elegir la que más os guste, cada mascota se comporta de una forma diferente, podéis probarlo antes de agregarla a vuestro blog.

Yo por ejemplo voy a coger el un cerdito.
Escogéis los colores que mas os gusten, introducís el nombre de la mascota y el vuestro que será su cuidador y presionar finish.
Luego seleccionaréis other sites en el caso que sea un blog donde queráis incorporarlo y allí el tipo de blog.

Copiar el código y insertarlo en un gadget, el resultado será algo así:

Suerte y a disfrutar de vuestra mascota!!

ENLACE EN OTRA VENTANA

A la hora de crear entradas en ocasiones se desea crear enlaces para ampliar la información descrita o bien para aclarar ciertos términos, es lo que llamamos vínculos o enlaces, por ejemplo en el editor de blogger tenemos un botón que nos permite crear vínculos de forma muy sencilla, lo único que tendremos que hacer es seleccionar el texto que queramos que sea el vínculo y pulsar el botón seleccionado con el círculo rojo en la siguiente imagen.

Se abrirá un cuadro como el siguiente:

Aquí insertaremos la dirección hacia donde queramos que nos lleve el vínculo.

¿Que ocurre con este tipo de vínculos?

Uno de los 'problemas' que tienen es que al pinchar el navegador carga la nueva página en la misma ventana, esto en ocasiones puede ser conveniente pero en muchos otros casos no, ya que es una forma de alejar a tus visitantes de tu web o blog. El remedio es muy sencillo y consiste en abrir ese nuevo enlace en una nueva ventana.

Procederemos de la siguiente forma:

Nos dirigiremos a Edición de HTML y buscar:

<a href="http://La dirección de destino">Palabra o frase como vínculo</a>

Lo único que tendréis que añadir es el parámetro target de forma que quede de la siguiente forma.



<a target="_blank" href="http://La dirección de destino">Palabra o frase como vínculo</a>


El resultado será algo así: Enlace a wikipedia

SUBRAYAR TEXTO

En ocasiones los editores no disponen de funcionalidades como puede ser la de subrayar texto, nos encontramos por ejemplo con el editor de blogger que no permite subrayar, para subrayar un texto lo tendremos que hacer como a continuación detallo.

Dirigiros a Edición de HTML y tendréis que añadir el texto que queráis subrayar con la siguiente estructura:

<u>Aquí el texto que queráis subrayar</u>


Resultado: Aquí el texto que queráis subrayar

TACHAR TEXTO

Las funciones del editor de blogger son limitadas, pero html no, por eso os voy a enseñar a tachar texto, esta función es muy útil por ejemplo en lugares donde se permiten descargas, de esta forma se puede indicar que la descarga no está disponible, podréis hacer uso de tachar de una forma muy sencilla y es de la siguiente forma.

Tendréis que iros la parte de Edición de HTML de vuestra entrada y una vez aquí añadir vuestro texto con la siguiente estructura.


<s>Aquí el texto que queráis tachar</s>


Resultado: Aquí el texto que queráis tachar

EXCELENTE GENERADOR DE TEXTO

Excelente generador de texto Glitter Text, podremos crear textos divertidos para nuestro blog haciendo click aquí.

Una vez en esta web deberemos seleccionar el texto que más nos guste, introducir palabra o frase que queramos crear donde dice Glitter Text y seguidamente copiaremos el código generado y lo pegaremos en el lugar del blog donde queramos que aparezca. Los textos generados llevan implícita su correspondiente publicidad, si queremos quitarla tendremos que eliminar la última linea del código que será como la siguiente.




<a href="http://www.pimpmycom.com/" title="Myspace Codes by PimpMyCom">Myspace Codes by PimpMyCom</a></span><br>

Obtendremos resultados como estos: