QUE PASARA CON MI BLOG SI ME MUERO

La muerte es algo en lo que regularmente preferimos no pensar, particularmente en la propia. La cultura nos educa a evadirla y entre menos hablemos de ella menos incómodos nos sentiremos, a no ser que hayamos tomado un curso de tanatología, pero por lo general no estamos preparados para recibirla como un hecho irremediable.

No sabemos cuándo moriremos, ni tampoco tenemos la certeza de que mañana seguiremos con vida, no hay garantía de ello. Es por eso que debemos estar preparados, o al menos dejar todo listo para cuando partamos de este mundo. Incluyendo nuestro blog.

Imagina que tienes un accidente y mueres de forma repentina, ¿has pensado qué pasará con gran parte del contenido que subiste a Internet a lo largo de tu vida?
Si como yo eres un entusiasta de los productos de Google seguro tendrás fotos, vídeos, correos, y varios documentos que quizá quieras "proteger" o conservar cuando ya no estés. Pero, ¿cómo?

Google está consciente de esta problemática y pone a nuestra disposición una herramienta con la que podemos elegir qué sucederá con los distintos productos de Google (o nuestra cuenta entera) después de estar inactiva por un largo tiempo. De esta manera podremos decidir si le dejamos acceso a nuestra cuenta a un familiar o amigo, o si simplemente se elimina.

Para configurar esta herramienta, ingresa al Administrador de cuentas inactivas y da click en Configurar.

Quizá estés pensando que es un poco riesgoso porque bien podrías no entrar a tu cuenta de Google por diversas razones y no necesariamente signifique que hayas fallecido. Google también ha pensado en eso, así que te avisará de 1 a 3 meses antes de cumplirse el tiempo de inactividad y de que tu cuenta se desactive.

Para que esto sea posible deberás añadir un número telefónico y adicionalmente podrás añadir otra dirección de correo, por estos medios Google te notificará antes de que tu cuenta deje de ser accesible.

También deberás establecer el periodo de inactividad, es decir, después de cuánto tiempo Google marcará tu cuenta como inactiva. Este periodo puede ser de 3 a 18 meses.

Puedes agregar hasta 10 contactos de confianza a quienes se les notificará que tu cuenta ha quedado inactiva.

Adicionalmente -y si lo deseas- podrás marcar la casilla Compartir mis datos con este contacto y luego elegir qué productos de Google quieres compartir con él/ella. Esta opción es por si quieres que tu contacto guarde la información que te importa más.

Por seguridad agrega el número telefónico de tu contacto, a través del móvil recibirá un código con el que podrá entrar a tu cuenta una vez que se cumpla el tiempo de inactividad. Tu contacto podrá descargar tus documentos por tres meses, déjale claro esto para que lo haga dentro del tiempo permitido.

En este apartado también puedes añadir una respuesta automática para todos los correos entrantes. Esta respuesta sólo se enviará una vez que tu cuenta esté inactiva.

Por supuesto también puedes elegir que tu cuenta se elimine. Toma en cuenta que si activas esta opción todos los productos de Google que usas se eliminarán, así que tu blog también se eliminará una vez que tu cuenta esté inactiva.

Yo por mi parte prefiero no eliminar mi cuenta, pero cada quién decidirá lo más conveniente para la suya.

Esto es para Google, por desgracia no todos los productos que usamos día a día ofrecen este tipo de herramientas. La buena noticia es que hay sitios como Death Switch que funcionan de manera similar, ahí podemos almacenar todas nuestras contraseñas; cuando dejemos de entrar por un tiempo el sistema nos enviará notificaciones, si después de haber transcurrido un tiempo no respondemos entonces nuestras contraseñas serán enviadas a un contacto que hayamos elegido.
Una opción por de más interesante, aunque habrá que ver qué tan segura está nuestra información en este tipo de servicios.

Decidas lo que decidas recuerda que hombre precavido...

FANBOX DE ESTA WEB

AVISO
La API de Twitter cambió y ahora requiere autenticación para obtener los datos de los seguidores, por tal motivo éste y los demás fanbox para Twitter han dejado de funcionar. Si me entero de una solución u otra alternativa lo publicaré de inmediato.

Hace algún tiempo vimos cómo poner el fanbox de Facebook flotante y con efecto deslizante. En esa ocasión usamos un plugin de jQuery que aunque es bueno tiene la desventaja que la versión gratuita sólo permite poner una pestaña nada más, además que quienes usan otras librerías tenían problemas de compatibilidad.

En esta ocasión lo haremos sólo con CSS, de manera que no utilizaremos ni un solo sript y podremos mostrar no sólo una sino tres pestañas, el fanbox de Facebok, el fanbox de Google+, y el fanbox de Twitter.
Puedes ver un ejemplo en esta misma entrada, lo verás del lado derecho de la ventana.

Bien, para poner estos fanbox flotantes en el blog sólo tenemos que ir a Diseño | Añadir un gadget | HTML/Javascript y ahí pegar el siguiente código:

<style>
#flotante1 {
position:fixed;
top:100px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1002;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante2 {
position:fixed;
top:240px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1003;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante3 {
position:fixed;
top:380px;
right:-250px;
float:right;
width:288px;
display:block;
padding:0;
z-index:1004;
border-radius:10px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#flotante1:hover, #flotante2:hover, #flotante3:hover {
right:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
div.likeboxwrap {
margin-top:-5px;
margin-left:-45px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
}
</style>

<!-- Primera pestaña -->
<div id='flotante1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPHITU4Fzq4pkokn8UMX87s8uwxmsYBTAq00_O6_dyalN81a5KFahPOpDWcUhsr4ZdfeZ84U2AvkEsclhqytrm9ED1D9ZzBztCetllPnAx5eii0HYAj5SyZvidsD4Ow-WGdNXlpKnN4o/' style='float:left;'/>
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'><iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook&width=240&colorscheme=light&connections=15&stream=false&header=false&height=350' style='border:none; overflow:hidden; width:240px; height:325px;'/></iframe>
</div></span></div></div>

<!-- Segunda pestaña -->
<div id='flotante2'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhObPVOMc5vFKmNkP83mO7QZO_ua7F3j8h8jb99Le0NxeMIT5JOZ01cGOfWUCtxouLgS4H-voNKn5uNMeBe4CUswqKJYQI1huKUhQqO3svO78XIlOui_p5Nu_hlqESwR27oKGE9G4Qd-l0/s159/goo_tab.png' style='float:left;'/>
<div style='background: #9A9FA8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap' style="padding-left:20px; padding-top:15px; height:310px !important;">

<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/XXXXXXXXXXXXXX" data-source="blogger:blog:followers" data-width="240">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

</div></span></div></div>

<!-- Tercera pestaña -->
<div id='flotante3'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ocrrmSBqVwa6otzwQs2f228CamqRkUFjv3TmgXMX3N3NxdMZalvxt9_8AkgYkDqA56tApmE54iUGN7oLc04RUoL2DGKZAFH6WldwrUe1At-U-YGrcV1kXNIWAKpEnZkVv_ecKV0ktuc/' style='float:left;'/>
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'><span><div class='likeboxwrap'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<style>
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}
.follow_box .titlecase{text-transform:capitalize;}
</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4YqCikxdePDwDDkqDRwN_bkIhR-CHH-2Xh3UXBDhQ-Vh6doi9Elr9EWDISNIWLTDqz1TBaqH_sR21dyflrOC-bCDk9LFk_ot6DErSIhgE_JqxZ3Cl8eWi_QFaRPFC17sXuoUjsjbNvSk/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>
<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuarioTwitter',
'height':'300',
'width':'260',
'theme':'custom',
'border_color':'#ffffff',
'bg_color':'#ffffff',
'bg_image':'',
'title_color':'#3B5998',
'total_count_color':'#333333',
'follower_name_color':'#BDBDBB'
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>

</div></span></div></div>

Agrega donde se indica el nombre de tu página de Facebook, también pon la ID de tu página de Google Plus en donde están las equis en rojo, y el nombre de tu usuario de Twitter también donde se indica en color rojo.

El ID de tu página de Google Plus lo puedes ver ingresando a tu página, y al final de la URL aparecerán una serie de letras y números, ese es tu ID.

En el caso del fanbox de Twitter hemos usado el fanbox para Twitter que vimos recientemente, pero puedesusar otro, o bien, quitar la pestaña, o sustituirla por otro contenido, pues al menos ese fanbox sí usa jQuery y puede causar incompatibilidad con otros scripts.

En caso de que quieras cambiar alguna pestaña por otro tipo de contenido tendrás que localizar la URL de la imagen de la pestaña (color azul) y sustituirla por la que diseñes, luego quitar el contenido de la pestaña (según sea el caso) y en su lugar poner el código que desees.

La ventaja de este método es que no usamos scripts para las pestañas, ni para esconderlas, ni para mostrarlas, ni para el efecto deslizante. La contra es que el efecto deslizante son transiciones con CSS por lo que los navegadores que no son modernos no podrán ver el efecto de deslizamiento. Fuera de esto último es un método que además de ser fácil de aplicar también es una buena opción para tener tus distintos fanbox agrupados y mostrándolos de una forma elegante y original.

ACTUALIZACIÓN 1:

Si el fanbox de Facebook te marca error puede ser porque aún no tienes una URL personalizada en tu página de Facebook, en esos casos deberás cambiar esta parte:

http%3A%2F%2Fwww.facebook.com%2Fnombre-de-la-página-de-facebook

Por esta:

http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnombre-de-la-página-de-facebook%2FXXXXXXXXXXXXXXX

Ahí además de poner el nombre de tu página donde se indica deberás poner en las equis una serie de números que aparecen al final de la URL de tu página de Facebook.

ACTUALIZACIÓN 2:

Es preciso mencionar nuevamente que el fanbox de Twitter sí usa jQuery por lo que si ya tienes alguna versión de jQuery o si usas otra librería de scripts como Scriptaculous entonces no se verá, en esos casos habrá que eliminar la versión de jQuery que incluye el gadget y/o hacer unos cambios para que sea compatible con Scriptaculous. Para más información mira la entrada sobre el fanbox de Twitter.

EL CUERPO DEL DOCUMENTO

Las páginas HTML siempre y cuando no estén formadas por frames, tienen su contenido delimitado por las etiquetas body (el cuerpo del documento), estas etiquetas definen que forma parte del contenido de la página y que no, de esta manera, si nuestro servidor nos añade código quedará fuera del cuerpo, ya que no es contenido de la página.

La sintaxi para este elemento es la siguiente:

Sintaxi
000	<body[ propiedades]></body> Seleccionar  XML

Entre <body[ propiedades]> y </body> irá el contenido HTML de la página, y en propiedades especificaremos propiedades del objeto body, como por ejemplo:

background - Imagen de fondo
topmargin - Margen superior
leftmargin - Margen izquierdo
bgcolor - Color de fondo del documento
text - Color del texto de la página
link - Color de los vínculos
vlink - Color de vínculos visitados
alink - Color de vínculos activos

Por ejemplo crearemos un cuerpo de documento pegado a los margenes y de fondo negro:

Ejemplo
000	<body topmargin="0" leftmargin="0" bgcolor="#000000"></body> Seleccionar  XML

En el ejemplo se ve la forma de editar una propiedad

INTRODUCCIÓN AL HTML

HTML es un lenguaje de marcas, lo que significa el texto del documento está mezclado con comandos que aportan información extra sobre el texto que delimita. Información que el navegador interpreta para dar formato a la página que finalmente verá el usuario. 

Las marca se limitan con los signos menor que ( < ) y mayor que ( > ) y afectan a todo el texto que esta situado entre la marca de apertura y la de final (cerrada con una barra ( / ) ademas del mayor que), por ejemplo: 

000	<b>Texto en negrita</b> Seleccionar  XML

La estructura HTML es la siguiente:

000 001 002 003

<html> <head><title>Aquí el titulo de tu página</title></head> <body>Texto de tu pagina (aquí irán los códigos, etc</body> </html> Seleccionar  XML

Les explicaremos el significado de cada etiqueta:

<HTML> Indica que la pagina web esta echa en ese idioma y limita el documento.

<HEAD> Es un área de definición del documento HTML al que precede donde especifica información cómo el titulo de la pagina, entre etiquetas title y otra información destinada a buscadores.

<TITLE> Esta etiqueta será utilizada para los marcadores del navegador y definirá un nombre para tu página, te recomiendo que sea corto pero explicativo para que si te das de alta en los buscadores con solo el titulo quede claro de que tu página va de cualquier tema.

<BODY> Aquí irá todo el texto de tu página, todos tus códigos, etc

Usted puede empezar a hacer su web en un simple Bloc de Notas si tiene Windows o Simple Text si utiliza Macintosh aunque también puede adquirir otra serie de productos u programas que facilitan su tarea sin nescesidad de conocer el lenguaje HTML asistiendote en el diseño de tus contenidos para el web. 

EFECTOS SOMBRA

Una de las maravillas del CSS es que podemos hacer que los textos se vean tan espectaculares como si los hubiéramos hecho con Photoshop o algo parecido, y sin necesidad de usar imágenes en la mayoría de los casos.

text-shadow es una propiedad que aplica una sombra a un texto, pero además podemos añadir múltiples sombras de diversos colores -y transparencias- a un mismo elemento y con ello podemos conseguir textos más llamativos y que salen de lo ordinario.

Lo que veremos a continuación son 12 ejemplos con text-shadow ya sea para que decores el título de tu blog, los títulos de tus entradas, de tus gadgets, o cualquier texto que se te ocurra.

Primero vamos a ver cómo ponerlo a cualquier texto, ya sea al texto de una entrada, o al de un gadget. En cualquiera de los casos el CSS va antes de ]]></b:skin> y el HTML dentro de tu post o donde lo quieras usar.

Texto con Relieve

Lorem Ipsum

CSS

.sombra1 {
color: #f2f2f2;
text-shadow: 0px -1px 0px #424242;
font-size: 100px;
font-family: 'Unna', serif;
}

HTML

<span class='sombra1'>Lorem ipsum</span>

Texto con sombra tenue

Lorem Ipsum

CSS

.sombra2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 70px;
font-weight: bold;
font-family: 'Arial Black';
}

HTML

<span class='sombra2'>Lorem ipsum</span>

Texto con sombra marcada

Lorem Ipsum

CSS

.sombra3 {
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 70px;
font-family: 'Sancreek', cursive;
}

HTML

<span class='sombra3'>Lorem ipsum</span>

Texto vintage

Lorem Ipsum

CSS

.sombra4 {
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 100px;
font-family: 'Lobster', cursive;
}

HTML

<span class='sombra4'>Lorem ipsum</span>

Texto en 3D

Lorem Ipsum

CSS

.sombra5 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
color: #fff;
font-size: 90px;
font-family: Impact;
}

HTML

<span class='sombra5'>Lorem ipsum</span>

Texto con efecto neón

Lorem Ipsum

CSS

.sombra6 {
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 70px;
font-family: 'Orbitron', sans-serif;
}

HTML

<span class='sombra6'>Lorem ipsum</span>

Texto tipo retro

LOREM IPSUM

CSS

.sombra7 {
padding-left: 20px;
text-transform: uppercase;
color: #E8E3AE;
text-shadow:
-10px 10px 0px #A9CBA6,
-20px 20px 0px #7EBEA3,
-30px 30px 0px #53A08E;
font-size: 70px;
font-family: 'Luckiest Guy', cursive;
}

HTML

<span class='sombra7'>Lorem ipsum</span>

Texto tipo comic

Lorem Ipsum

CSS

.sombra8 {
color: #fff;
text-shadow:
-2px -2px 0 #000,
1px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
font-size: 100px;
font-family: 'Boogaloo', cursive;
}

HTML

<span class='sombra8'>Lorem ipsum</span>

Texto con efecto anaglifo

Lorem Ipsum

CSS

.sombra9 {
text-shadow:
9px 2px 0 rgba(0, 255, 255, 0.5),
-6px -1px 1px rgba(255, 0, 0, 0.4);
color: #2A0A12;
font-size: 70px;
font-family: 'Special Elite', cursive;
}

HTML

<span class='sombra9'>Lorem ipsum</span>

Texto con fuego

Lorem Ipsum

CSS

.sombra10 {
color: #DF0101;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow:
0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
font-size: 90px;
font-family: 'New Rocker', cursive;
}

HTML

<span class='sombra10'>Lorem ipsum</span>

Texto borroso

LOREM IPSUM

CSS

.sombra11 {
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 60px;
font-family: 'Chango', cursive;
}

HTML

<span class='sombra11'>Lorem ipsum</span>

Texto estilo groovy

Lorem Ipsum

CSS

.sombra12 {
color: #fcc90f;
text-shadow:
-2px -2px 0 #29296e,
1px -2px 0 #29296e,
-2px 2px 0 #29296e,
2px 2px 0 #29296e,
1px 1px #e60602,
2px 2px #e60602,
3px 3px #29296e,
4px 4px #29296e,
5px 5px #29296e,
6px 6px #29296e,
7px 7px #29296e,
8px 8px #29296e,
9px 9px #29296e,
10px 10px #29296e,
11px 11px #29296e,
12px 12px #29296e,
13px 13px #29296e,
14px 14px #29296e,
15px 15px #29296e,
16px 16px #29296e,
17px 17px #29296e,
18px 18px #29296e,
19px 19px #29296e,
20px 20px #29296e;
font-size: 90px;
font-family: 'Henny Penny', cursive;
}

HTML

<span class='sombra12'>Lorem ipsum</span>

En todos los casos yo he puesto un tipo de fuente sólo para ejemplificar, si deseas usar esa fuente tómala de Google Fonts, o cámbiala por otra.
También puedes cambiar los colores, ya sea el del texto, o de la sombra, sólo deberás cambiar los códigos hexadecimales (los que empiezan con signo de número) o los rgba (los que están entre paréntesis), según sea el caso.

Si quisieras usar estos textos con sombras en el título de tu blog, únicamente cambia la clase del texto, por ejemplo, en lugar de .sombra1 { pondrías .header h1 {

Si quisieras usarlo en los títulos de tus entradas, cambia .sombra1 { por .post h3 {

Si quisieras usarlo en los títulos de tus gadgets, cambia .sombra1 { por .sidebar h2 {

Toma en cuenta que en algunas plantillas los nombres de las clases de estas áreas pueden variar, los que he mencionado son para las plantillas originales de Blogger.
También considera que si lo usas para los títulos de tu plantilla, ya sea para el título del blog, de entradas, o gadgets, quizá tengas que eliminar otros estilos que ya estén especificados en tu plantilla, así que en esos casos deberás localizar los estilos de esas áreas y eliminar los que creas que "afectan" la forma como se mira el resultado final.

Si no has podido ver ningún efecto de sombras en los textos que hemos puesto de ejemplo, entonces usas un navegador muy antiguo. En lo que cambias a un navegador más moderno te dejo la imagen de cómo se deben ver los textos con sombras de esta entrada.

SCRIPTS EN LA PLANTILLA

El tema del alojamiento de los scripts es un tema recurrente debido a que no todos los servicios gratuitos de hosting admiten este tipo de archivos, o bien, porque pueden tardar mucho en cargar si el ancho de banda del hosting es reducido, lo que trae consigo que el blog tarde en cargar.

Si bien podemos alojarlos en Google Sites o Dropbox también podemos alojar los scripts en la propia plantilla, de este modo el tiempo de carga de la página será menor y dejaremos de estar dependiendo de un servicio externo a Blogger.



Alojar los scripts directo en la plantilla funciona para casi todos los casos, aunque es posible que haya uno u otro script que se resista y ese sí tendremos que alojarlo en un servicio independiente.




Para alojar los scripts en la plantilla hay dos formas, una es entrando a Plantilla | Edición de HTML y antes de </head> pegamos lo siguiente:

<script type='text/javascript'>
//<![CDATA[
...contenido del script...
//]]>
</script>

Habremos de agregar donde se indica el contenido del script.

¿Cómo sacar el contenido del script?

Pega la URL del script en la barra de direcciones de tu navegador, si abre una página llena de códigos ese es el contenido del script; si en su lugar descarga un archivo con extensión .js entonces abre el archivo con WordPad y copia y contenido del script.


La otra opción es entrar en Diseño | Añadir un gadget | HTML/Javascript y ahí pegar en un sólo elemento el contenido de todos los scripts que quieras. Se haría casi de la misma forma:

<script type='text/javascript'>
...contenido del script...
</script>

Con cualquiera de estas dos formas tendremos los scripts alojados en nuestra propia plantilla con lo que dejaremos de depender de otros servicios y nos ahorraremos algo de tiempo en la carga de la página al no depender del ancho de banda de los demás.

CIRCO POR TU CASA | SCRIPT

Con el siguiente script vamos a hacer que una serie de imágenes o muñecos se paseen de un lado al otro de la pantalla:

Para adherirlo al blog o a nuestra web, debemos copiar este código y pegarlo antes de </body>

<script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/25/25387/815/parts.js"></script><p style="text-align:center;margin:0px;"> </p> <p style="text-align:center;margin:2px 0px 0px 0px;font-size:10px;padding:0;"> </p> Podemos ver un ejemplo de como queda en el blog en este enlace

LLUVIA EN EL BLOG | SCRIPT

Primero debemos entrar a CiudadBlogger, poniendo esto en la barra de direcciones:

Después buscaremos el script que queramos, en este caso la lluvia, pues ponemos en el buscador "lluvia" y clickamos en buscar:

Nos lleva a la búsqueda, y en este caso clickamos en el primer enlace, que nos llevará a una pagina explicativa, que nos pondrá el código para que lo copiemos, además de donde tenemos que pegarlo

Ahora leeremos lo que nos dice encima del código, nos dice en que parte de la plantilla lo pondremos

<div style="display:none;"> <script type="text/javascript" src="http://blogparts.giffy.me/0117/parts.js"></script><p style="text-align: center;margin:0;padding:0;"> </div>