Listones para el blog de los Juegos Ol?mpicos (Londres 2012)

Ya vimos c?mo poner un gadget de cuenta regresiva para las olimpiadas, ahora vamos a poner unas decoraciones sencillas pero bonitas (seg?n yo), alusivos a los juegos de Londres 2012.

Son siete listones que he dise?ado para que puedas poner uno de ellos en la parte superior derecha del blog. S?lo entra en la Edici?n HTML de tu plantilla y pega antes de </body> el c?digo del list?n que m?s te guste.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtGbGa-X_u_7yWsAEdipYgrkQqX0SVa5_jtY9z_qs2h3kE_bstA5bkmuZR07zA9SruBUYmPSoW9GEq2RScX7nLNQbZP826AunBIYTqMmDIh9uQQsK_M3PMscoce-yHd0KGAOZzGduFjc/s151/olimpiadas.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYauyA10ANMkipaJX0kJqYAqLTjDSwuTmR69JtXC53hy7CQrmaMH73nEt3IWHOFQ6sgF6obsscIrzIClOI37i8xnAnltAPQaCvvt1TnNYYxQH5Z6_mqUm7ALTJWVgE4C_JA9MqbGbEM3g/s151/londres2012_rosa.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfbfvlEcmgNldKg-_sMzzghyphenhyphen94FVSh4U16OxD1U733WNbYdF8gJP2scyB4jGaiO1VlGvP7vVoJdaZ2ddZGmU2-87OItZ9DqUcm3FKkyIaJZxI5HHbqb3Vlxsyl5zmEjzimYkETr_9Zn0/s151/londres2012_azul.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSOzHJ34X3Kt8ZX2LAkheR_uSaYwN0BC258QYlRl_fiFklrGh0ZyS85jOUTkMljYsISZrXg5A1M4G01hAQWVFIkDOV05s7ly-CJY2mNY3RivCrkIEE0W4NYxRubOWbXiVwgL7_Kk1Fi74/s151/londres2012_rojo.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyKzHXsrnkO7NDWrg9H9MOOxxlhCJ2SS7-GaZOzpKdcLYIrfb7j8rY2AoyMsujbhNXlq-9Yk8mF21pysi_b9jACfurMjguAQIUiQP5fQSDJaXAU728s9zfxlY4O9YsmI-8ecL04m3IBt4/s151/londres2012-insignia-blan.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOl3l7fHVzMDuHH78dpgRYKL5xoY647bxQmY4pnAzxDvpFZlVBlELsQi8ZT45OY1Ldlr3F_JjPdBjg8iLO8sBCWc2VkvuQKqjRe4PbLRDrmiXM_f7DLwj9OODjkTauXx2gQVudzw0EYg/s151/londres2012-insignia-nar.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ZWk7I37FN5F4oazuwfUMI8RTUUP6LQ9CGKpZW9RQZq0LDRabgNUt8J8RosypA_Lek75py_QjqMpVVPW7KUU_rnF-Y9uXkpKO-P10yyYdmVARhDoF8k3BP35x-928Q1Xl_k6DJfzPrK4/s151/londres2012-insignia-azul.png" style='position:absolute; top:0; right:0;'/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXy5PskWY0eNh8RueCtbzBOc8RWlW0t8X7gRYxAEwhxtA8-Ooa6rxfbCqqqFxq7IC8A1Ni13YuqzosLPKSDZTIERvPu4xvEmrKDNYGjloJDC1SrSzn5HQCTqzYmxhs8pB2t5hU6FxQnmA/s151/londres2012-insignia-rosa.png" style='position:absolute; top:0; right:0;'/>

Como mencion� antes. Los listones estar?n en la parte superior derecha, pero estar?n fijos, si quieres que sean flotantes, es decir, que se puedan ver aun cuando bajas el scroll de la p?gina, entonces cambia el position:absolute; que est? dentro del c?digo, por position:fixed;

Espero que sean de su agrado.

Abrir dos o m?s enlaces con un solo link

No s� bien qu� tan ?til pueda ser, pero muchos preguntan c?mo abrir dos p?ginas con un solo enlace, supongo que podr?a servir para abrir todas las redes sociales de un sitio con un solo click, o todos los blogs de un autor, etc., el uso ya depender? de cada quien.

Sin embargo se recomienda que si lo usan avisen al lector que dicho enlace abrir? todas las p?ginas que han configurado, para que el usuario sepa que abrir? todas esas p?ginas, y no le abramos p?ginas que no ha solicitado.

La funci?n para conseguir abrir varios links con un solo click es sencilla, es usar Javascript simple, nada extravagante. Puedes ver un ejemplo haciendo click el siguiente enlace, abrir? dos sitios sobre experimentos caseros y de f?sica.

El c?digo a utilizar es el siguiente:

<a href="javascript:void(0);" onclick="javascript:window.open('URL del enlace UNO', '_blank'); window.open('URL del enlace DOS', '_blank'); ">Abrir varios enlaces</a>

Agrega donde se indica las URLs de los enlaces y listo.

Si quieres que se abran m?s p?ginas entonces a?ade justo antes de las comillas dobles en color azul, una l?nea como esta:

window.open('URL de otro enlace', '_blank');

De esa forma podr?s agrupar varios enlaces en uno solo.

Agregar Lazy Load en Blogger, para acelerar la carga del blog

Lazy Load es un script de jQuery que ayuda a agilizar la carga del blog cuando en �l se usan muchas im?genes, esto es porque el script detiene la carga de las im?genes, o sea que, las pone en modo de espera para que primero carguen los dem?s elementos, y conforme se baje el scroll de la p?gina ir?n apareciendo las im?genes.

Esto supone una mejora de velocidad en la carga del blog, sobre todo cuando en �l hay im?genes muy grandes o una cantidad significativa de im?genes.

Adem?s, usaremos el efecto FadeIn para que cuando las im?genes aparezcan lo hagan en forma de desvanecimiento.

Puedes ver un ejemplo en este blog de pruebas, si bajas el scroll poco a poco ir?s viendo c?mo las im?genes van apareciendo.

La instalaci?n es tan sencilla que s?lo requiere un paso, y es que nos evitaremos alojar el script en alg?n servidor, ya que lo nos interesa es la velocidad, alojaremos el script directo en la plantilla.

Para poner Lazy Load en tu blog ingresa en la Edici?n HTML de la plantilla y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.net/projects/lazyload
*/
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

$(document).ready(function($){
$('img').lazyload({
effect:'fadeIn',
placeholder:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsU4a8MF4eqdmBIXo1ssRdNiKajJkZnOqBkxGNlS78_pnWGepjmOL914HG66bRmNHYpoLdL554-RScMt601bGSIgzzV8Hh5quK2tbOPIsndBC3Hf22hq-sJb6JbGw14aQjhJXEuGuarYE/s1/bg_placeholder.png'
});
});
//]]>
</script>

Guarda los cambios y listo.
Si ya tuvieras jQuery deja s?lo la versi?n m?s actual.

Como puedes ver el script no es tan extenso en comparaci?n de otros que usamos con frecuencia, agilizar? la carga del blog, y adem?s aparecer? las im?genes con efecto de desvanecimiento.
Sin embargo, s?lo se recomienda su uso cuando el blog contiene muchas im?genes, de los contrario no tiene caso llenar el blog con otro script ya que adem?s no representar? una mejora sustancial ni el el tiempo de carga ni en el tama?o de la p?gina.

(24/abr/2012) ACTUALIZACI?N: si te da problemas con las im?genes de los gadgets, y/o quieres que se aplique s?lo a las im?genes de las entradas, entonces cambia lo que est? en color rojo por esto:

$('.post img').lazyload({

Men? horizontal con subpesta?as y buscador integrado

El siguiente men? est? hecho ?nicamente con CSS, es un men? horizontal con subpesta?as, y del lado derecho tiene un buscador redondeado.

Es un men? pr?ctico para los que no requieren de men?s muy complejos o prefieren no usar uno que requiera scripts y/o demasiadas im?genes, adem?s, la instalaci?n y personalizaci?n es bastante sencilla, y por si fuera poco es bastante funcional, ya que al tener el buscador integrado puedes tener dos elementos en una misma ?rea.

Puedes verlo funcionando en este blog de pruebas, si usas el buscador escribe la palabra y presiona ENTER.

ATENCI?N: Si usas una plantilla hecha a trav�s del Dise?ador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Para poner este men? horizontal con submen?s en tu blog entra en la Edici?n HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del men? */
height:35px;
padding-left:14px;
background:#333333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tama?o de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submen? */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOU5o3nvDdH4bR1m_uMt-2x8kAdaPqTj2fIFYImFjeicvY6i1uZZaZVwQc8N4sEgnFN5CouBk9TkCxwQ2GXX1-v1QQBbEOzlyC3T5_4alkTZcgOc3y41V-jxFuT2ZYrNBhJHDCs9pCJA/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pesta?a */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pesta?as al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submen? */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submen? */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submen? */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpesta?as */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpesta?as al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHziyOXb2qNmFiwj1z3CaPq15Zy4OcXEXDFQS9FKC3s9XWoY8Kl-0wOY7vLBwu0kghBcWhIcPteokfdCOxoHeJzJpO1SaNW4EUpFnTOqZS3lqUhYPp2sdIeWQ3tE-T6q5giNA4yP3DByY/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Luego entra en la secci?n de Dise?o, y en un elemento HTML/Javascript pega la estructura del men?:

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Pesta?a 1</a></li>
<li><a href="#">Pesta?a 2</a>
<ul>
<li><a href="URL del enlace">Pesta?a 2.1</a></li>
<li><a href="URL del enlace">Pesta?a 2.2</a></li>
<li><a href="URL del enlace">Pesta?a 2.3</a></li>
<li><a href="URL del enlace">Pesta?a 2.4</a></li>
</ul>
</li>
<li><a href="#">Pesta?a 3</a>
<ul>
<li><a href="URL del enlace">Pesta?a 3.1</a></li>
<li><a href="URL del enlace">Pesta?a 3.2</a></li>
<li><a href="URL del enlace">Pesta?a 3.3</a></li>
<li><a href="URL del enlace">Pesta?a 3.4</a></li>
</ul>
</li>

<li><a href="#">Pesta?a 4</a>
<ul>
<li><a href="URL del enlace">Pesta?a 4.1</a></li>
<li><a href="URL del enlace">Pesta?a 4.2</a></li>
<li><a href="URL del enlace">Pesta?a 4.3</a></li>
<li><a href="URL del enlace">Pesta?a 4.4</a></li>
</ul>
</li>

</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

</div></div>

Agrega las URLs de los enlaces donde se indica as? como el nombre de tus pesta?as.

En el primer c?digo puedes ver las ?reas que se pueden personalizar tales como el color, etc.

La apariencia redondeada del ancho de todo el men? tambi�n es CSS, as? que si usas un navegador antiguo no se ver?n esos bordes.

Si quisieras agregar otra pesta?a entonces a?ade antes del ?ltimo </ul> en color azul una l?nea como esta:

<li><a href="URL del enlace">Pesta?a 5</a></li>

Si quisieras que �sta tenga submen?s entonces el c?digo que deber?s poner es este:

<li><a href="#">Pesta?a 5</a>
<ul>
<li><a href="URL del enlace">Pesta?a 5.1</a></li>
<li><a href="URL del enlace">Pesta?a 5.2</a></li>
<li><a href="URL del enlace">Pesta?a 5.3</a></li>
<li><a href="URL del enlace">Pesta?a 5.4</a></li>
</ul>
</li>

Sin embargo, se recomienda no poner muchas pesta?as, ya que si se excede entonces las pesta?as se mostrar?n en un segundo rengl?n.

Y eso es todo, ?apoco no fue sencillo?

Elegir cu?ntas entradas mostrar en las p?ginas de Etiquetas

Quienes configuran el blog para mostrar un n?mero reducido de entradas en la portada usualmente desean que este n?mero de entradas sea el mismo cuando se navega por las p?ginas de Etiquetas.

Sin embargo Blogger muestra por defecto 20 entradas en esas p?ginas, o menos en caso de que la velocidad de carga del blog ande lenta, por aquello de la autopaginaci?n.

Como ese n?mero de entradas depende de Blogger lo que podemos hacer es modificar los enlaces de las etiquetas para que muestren el n?mero de entradas que deseamos.

As? que entramos a la Edici?n HTML de la plantilla, marcamos la casilla Expandir plantillas de artilugios y buscamos este fragmento:

'data:label.url'

Con mucho cuidado c?mbialo por esto:

'data:label.url + "?max-results=5"'

Si tuvieras m?s de una vez ese c?digo aplica el cambio en todos los que encuentres.

En color rojo est? el n?mero de entradas que quieras que aparezcan.

Eso har? que en el enlace de la etiqueta, o en el gadget de Etiquetas se cambie la URL para mostrar el n?mero de entradas que hemos elegido.

Si tuvieras un men? con las URLs de las etiquetas de forma directa entonces habr? que a?adir un par?metro a esos enlaces. Por ejemplo, la URL de una etiqueta es as?:

http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta

Y se le a?adir?a lo de color azul:

http://nombre-de-mi-blog.blogspot.com/search/label/Nombre-de-la-etiqueta?max-results=5

Nuevamente en el n?mero de color rojo podemos decidir cu?ntas entradas se mostrar?n.
Y con eso podr?s elegir cu?ntas entradas mostrar en las p?ginas de Etiquetas, siempre y cuando Blogger no te limite con el n?mero de entradas respecto a la autopaginaci?n.

Aumentar im?genes al pasar el cursor con efecto deslizante

Hay muchos m�todos para expandir im?genes al pasar el cursor, uno de ellos es Expando, un script que permite que la imagen aumente a su tama?o real con un efecto deslizante, y al quitar el cursor la imagen regresa al tama?o peque?o, tambi�n con el mismo efecto.

Puedes ver el demo aqu? mismo pasando el cursor sobre esta imagen en miniatura:

Para lograr este efecto en tus im?genes ingresa a la Edici?n HTML y agrega antes de </head> el script:

<script type='text/javascript'>
//<![CDATA[

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

<style>
img.expando{
margin:10px;
vertical-align: top;
}
</style>

Y luego en tus entradas o donde lo quieras poner, usa este c?digo para tus im?genes:

<img border="0" src="URL de la imagen" class="expando" width="100" />

Agrega la URL de la imagen donde se indica y listo, as? de f?cil y sencillo.
La imagen que pongas deber? ser la que tiene el tama?o normal, y en donde se indica en color azul deber?s poner el tama?o que tendr? la miniatura.

Nada complicado ?verdad? ;)

Mitos y realidades sobre los dominios personalizados

Tener un dominio propio est? al alcance de la mayor?a, sin embargo algunos se compran un dominio por las razones equivocadas y otros dejan de hacerlo tambi�n por razones equivocadas.

Vamos a ver cu?les son los mitos m?s frecuentes sobre los dominios propios y cu?l es la realidad ante ellos, para que antes de que te decidas a comprar un dominio tengas claro lo que es y lo que no es.

MITO: Si tengo un dominio personalizado Blogger no podr? eliminar mi blog nunca.

FALSO. El blog te lo provee Blogger, por lo tanto tiene la facultad de eliminar tu blog si incumples alguna(s) de las Pol?ticas de Contenido. No importa si tienes un dominio propio o no, si Blogger considera que has incumplido una de sus pol?ticas podr? eliminar tu blog sin excepci?n alguna.

Eso s?, si tuvieras un dominio propio puedes seguir usando ese dominio en cualquier otro blog o p?gina web, ya que el dominio s? te pertenece por el tiempo que lo hayas comprado.

MITO: Si compro un dominio tengo que contratar un servicio de hosting.

FALSO. Dado que los blogs de Blogger se alojan en blogspot.com no hace falta ni es necesario contratar un plan de alojamiento con ninguna empresa ya que todo el contenido de las entradas se aloja en Blogspot y las im?genes en Picasaweb.

Es posible que cuando solicites informaci?n en alguna compa??a te quieran vender tambi�n un plan de hosting, pero al menos en Blogger no es necesario contratarlo.

MITO: Para comprar un dominio tengo que hacerlo desde Blogger.

FALSO. Ciertamente comprarlo desde Blogger es pr?ctico para quien no desea meterse en cuesti?n de configuraciones ya que Blogger lo configura por nosotros, sin embargo puedes comprar tu dominio con la empresa que t? elijas y prefieras.

MITO: Si cambio a un dominio personalizado perder� mi Page Rank.

CIERTO. El Page Rank (PR) recae sobre el dominio, por lo tanto, si compras o cambias de dominio perder?s el PR que tuvieras, pero no te alarmes, en poco tiempo el sistema asignar? nuevamente el PR que ten?as, aunque algunas veces este PR suele ser m?s bajo que el que pose?as con anterioridad.

MITO: Tener un dominio propio me ayudar? a tener m?s visitas.

FALSO. Un dominio personalizado puede ayudar a que la gente memorice con mayor facilidad la direcci?n de tu blog, pero no influye en el n?mero de visitas que tengas o el posicionamiento en los buscadores.

MITO: Si tengo un dominio propio mi blog se ver? m?s profesional.

CIERTO, pero no tanto. Un dominio puede crear una marca, y con ello tus lectores podr?n pensar que tu blog va en serio, pero el dominio no lo es todo, es s?lo una pieza m?s del rompecabezas. Si quieres que tu blog se vea profesional deber?s trabajar en el contenido de tus publicaciones, tus im?genes, tu reputaci?n, la constancia y el dise?o de tu plantilla. Sin todo lo anterior el dominio se ver? tan simple como eso, un dominio m?s.

MITO: Con un dominio personalizado ya no podr� editar mi plantilla.

FALSO. El dominio s?lo est? en la direcci?n del blog, no interfiere en nada de la interfaz de Blogger. Ya sea que tengas un dominio propio o no, podr?s seguir publicando tus entradas y editando tu plantilla como siempre lo has hecho.

MITO: Si tengo un dominio propio y luego cambio a blogspot perder� visitas.

CIERTO. Si tu blog ya est? indexado con el dominio propio y luego cambias a blogspot cuando la gente haga click en esa direcci?n no ver? nada, porque ese dominio ya no existe, o mejor dicho, ya no est? vinculado con tu blog. Sin embargo, con el paso del tiempo los robots actualizar?n de nuevo la informaci?n de tu blog, y con ello la nueva direcci?n que tengas.

MITO: Tengo que ser mayor de edad y contar con tarjeta de cr�dito para poder comprar un dominio.

FALSO. No es necesario contar con la mayor?a de edad para ser due?o de un dominio, ni tampoco necesario tener una tarjeta de cr�dito; muchas empresas aceptan otras formas de pago como PayPal o dep?sitos bancarios. Por supuesto que esto ?ltimo de los pagos depende de cada empresa.

Seguramente habr? m?s mitos y dudas en torno a los dominios personalizados, lo importante es que antes que tomemos la decisi?n de hacernos de un dominio tengamos claro todo el panorama para evitar pasar un mal rato por algo que no sab?amos.

Si est?s a punto de comprar un dominio quiz? quieras conocer todo lo que hay que saber antes de comprar un dominio propio.

Men? vertical drag and drop con jQuery

jGlideMenu es un men? vertical que se puede arrastrar y soltar para que el lector lo ubique donde quiera, pero adem?s, se puede navegar a trav�s de sus pesta?as de una forma muy peculiar y con un efecto deslizante para darle ese toque sexy.
Una de las ventajas que tiene es que puede almacenar un gran n?mero de enlaces, y que se puede quitar el efecto drag and drop (arrastrar y soltar) si se desea.

Para que entiendas mejor este men? hay que verlo en acci?n en este blog de pruebas, ah? puedes arrastrar el men?, navegar en sus pesta?as, y cerrarlo.

Para poner en tu blog este men? vertical, primero descarga este archivo, descompr?melo y s?belo a un hosting.

Luego ingresa a la Edici?n HTML de tu plantilla y antes de </head> agrega los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' />
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript' />
<script src='URL del archivo' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#jGlide_001').jGlideMenu({
tileSource : '.jGlide_001_tiles' ,
demoMode : false
}).show();

$('#switch').click(function(){$(this).jGlideMenuToggle();});
});
//]]>
</script>

Coloca la URL del archivo que subiste previamente donde se indica, luego pega antes de
]]></b:skin> los estilos:

.jGM_box {
position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */
width: 227px;
height: 317px;
background: #fff; /* Color de fondo */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Borde */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Color de fondo de la barra de arriba */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Tama?o de la descripci?n */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Color de la descripci?n */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6; /* Color de fondo barras */
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Color de la barra al pasar el cursor */
}
.jGM_more {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_krXKhP177xP1eJqKLnpeL040YNJ0ecnOJr4sbxND0ND3Ul81US9LlHQCYH_PK-bgQkN1vTLyBLKikDDMnyok-m7UAKf652I3owuLzVNwFQIBhZIrkpbp_GMIbSlhr6t1v_K69NEYLzI/s10/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "atr?s" */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color del enlace "atr?s" al pasar el cursor */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color del enlace "inicio" */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color del enlace "inicio" al pasar el cursor */
background: #4D4E67;
}

Ahora en un elemento HTML/Javascript pega la estructura del men?:

<div class="jGM_box" id="jGlide_001">

<!-- Aqu? todos los enlaces del primer nivel -->
<ul id="tile_001" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del primer nivel">
<li rel="tile_002">Enlace 1</li>
<li rel="tile_003">Enlace 2</li>
<li rel="tile_004">Enlace 3</li>
<li rel="tile_006">Enlace 4</li>
<li rel="tile_007">Enlace 5</li>
<li><a href="URL del enlace">Enlace 6</a></li>
<li><a href="URL del enlace">Enlace 7</a></li>
<li><a href="URL del enlace">Enlace 8</a></li>
<li><a href="URL del enlace">Enlace 9</a></li>
<li><a href="URL del enlace">Enlace 10</a></li>
<li><a href="URL del enlace">Enlace 11</a></li>
</ul>

<!-- Aqu? todos los enlaces del segundo nivel -->
<ul id="tile_002" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li rel="tile_005">Enlace 1.1</li>
<li><a href="URL del enlace">Enlace 1.2</a></li>
<li><a href="URL del enlace">Enlace 1.3</a></li>
<li><a href="URL del enlace">Enlace 1.4</a></li>
</ul>

<ul id="tile_003" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 2.1</a></li>
<li rel="tile_008">Enlace 2.2</li>
<li><a href="URL del enlace">Enlace 2.3</a></li>
</ul>

<ul id="tile_004" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 3.1</a></li>
<li><a href="URL del enlace">Enlace 3.2</a></li>
<li><a href="URL del enlace">Enlace 3.3</a></li>
</ul>


<ul id="tile_006" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 4.1</a></li>
<li><a href="URL del enlace">Enlace 4.2</a></li>
<li><a href="URL del enlace">Enlace 4.3</a></li>
</ul>

<ul id="tile_007" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>


<!-- Aqu? todos los enlaces del tercer nivel -->
<ul id="tile_005" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del tercer nivel">
<li><a href="URL del enlace">Enlace 1.1.1</a></li>
<li><a href="URL del enlace">Enlace 1.1.2</a></li>
</ul>


<ul id="tile_008" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del tercer nivel">
<li><a href="URL del enlace">Enlace 1.2.1</a></li>
<li><a href="URL del enlace">Enlace 1.2.2</a></li>
</ul>


</div>

Agrega las URLs de los enlaces y los nombres de las pesta?as y listo.
Si quieres agregar m?s enlaces al primer nivel a?ade en esa ?rea otra l?nea como esta:

<li><a href="URL del enlace">Enlace 12</a></li>

Si quisieras que el enlace tenga otro nivel entonces la l?nea ser? as?:

<li rel="tile_0010">Enlace 5</li>

Luego en el ?rea del segundo o tercer nivel agregar?as un fragmento as?:

<ul id="tile_0010" class="jGlide_001_tiles" title="Men?" alt="Descripci?n del segundo nivel">
<li><a href="URL del enlace">Enlace 5.1</a></li>
<li><a href="URL del enlace">Enlace 5.2</a></li>
</ul>

Aqu? hay que tener algo muy en cuenta, si te fijas el enlace lleva el atributo REL, que debe ser el mismo que el ID que ponemos en el segundo nivel, estos IDs nunca se debe repetir, siempre ser?n ?nicos.

S?, suena complicado, pero una vez que entendemos el concepto ya no lo es tanto.

En el ?rea de los estilos est?n las partes que podemos personalizar. Si quisieras que el men? est� est?tico, es decir, que est� en la sidebar y no se arrastre, entonces elimina del primer c?digo el script que est? en cursiva. Y de los estilos elimina esta parte:

position: absolute; /* Cambiar absolute por fixed si se quiere flotante */
top: 150px; /* Distancia desde arriba */
left: 200px; /* Distancia desde la izquierda */

Cuando sean muchos enlaces entonces aparecer?n unas flechitas, pasando el cursor sobre ellas se mostrar?n el resto de los enlaces ya sea hacia arriba o hacia abajo.

A lo largo de la estructura del men? ver?s que puedes cambiar el nombre Men? as? como las descripciones.

Es un men? con jQuery as? que ya saben que hay que tomar en cuenta la versi?n que sea s?lo una, y la compatibilidad con Scriptaculous.

V?a | Sonicradish

Por si Scriptaculous te dej? de funcionar

Desde hace un par de d?as a algunos les dej? de funcionar todo lo que requiere de la librer?a Scriptaculous y Prototype.

Al parecer ha sido por una actualizaci?n de estas librer?as que regularmente usamos desde las Librer?as API de Google.

Si usas Scriptaculous y te ha dejado de funcionar busca en tu plantilla este c?digo:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Y c?mbialo por este:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

ACTUALIZACI?N: Para evitar cambiar el c?digo cada vez que haya una versi?n nueva, se recomienda mejor usar este c?digo el cual se actualiza autom?ticamente:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>

Con ese cambio en el script deber? funcionar nuevamente todo lo relacionado con Scriptaculous y Prototype.

Gracias a AdelinaBasquet U.V.V.A. por el aviso.

"Apagar las luces" para ver videos

Este es uno de los scripts que m?s nos gustan a los que disfrutamos ver videos en la red, es un script de Janko y funciona con jQuery.

Se trata de "apagar las luces" para que todo lo que haya en la p?gina se oscurezca menos el video, as? no habr? otros elementos que nos distraigan mientras vemos el video y nos sentiremos como en el cine :)

Puedes ver un ejemplo aqu? mismo, presionando el enlace que dice "Apagar las luces".
Cuando lo desees puedes presionar de nuevo el enlace y las luces se encender?n.

Apagar las luces

Para poner este efecto de "apagar las luces" en el blog, entra en la Edici?n HTML y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Apagar las luces").removeClass("turnedOff");
else
$(this).html("Prender las luces").addClass("turnedOff");
});
});
//]]>
</script>

Despu�s agrega antes de ]]></b:skin> los estilos:

/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgld5nNvYEsukeN-nXeanJY93OkOsEjVsKAgB9_XDazea7QZ5zqdCQ_TZOMuRrKklbWGOF8Sw0z6kNKBqfKiQL1vRS2frRJhVH78Zkwpu5wrlwWaJ7d1rlZ4c8C5pi0W1CkPZV4Ph0GB10/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw1Qm02vnDpV9oMvfE8tLP8RlQEKWZjIRcH8m8J-d3RetOhtdlHKdjfU6vmUlLAy-3O-I4NGxKhd39I0l-fvLTdEpKViNbwGq0OaggqU82cO3Z7zEe0loDI3-OPG_qPboA-dMzhhd_skk/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Luego, antes de </body> agrega esto:

<div id='oscuridad'/>

Y por ?ltimo, donde quieras poner tu video, ya sea en una entrada, o en un elemento HTML/Javascript usa este c?digo:

<center>
<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
<div id="videoLuces">
...Aquí el código del video...
</div>
</center>

Agrega donde se indica el c?digo de tu video y listo. A disfrutar los videos con las luces apagadas.

Recuerda que el truquillo usa jQuery, as? que si usas Scriptaculous o Mootools deber?s aplicar un parche, y si usas otra versi?n de jQuery deber?s usar s?lo una.

Bloques entrecomillados con :after y :before + ejemplos

Tiempo atr?s vimos c?mo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.

Ahora no nos limitaremos tanto, y usaremos las pseudoclases :after y :before para que los bloques entrecomillados (blockquotes) tengan comillas, al inicio y al final de la cita. Adem?s usaremos un poco m?s de CSS para hacerlos m?s vistosos.

La pseudoclase :before nos ayudar? a poner "algo" antes del bloque entrecomillado, mientras que :after lo pondr? despu�s.

?Y qu� pondr?? Aqu? entra la propiedad content a echarnos la mano, podremos usar comillas o im?genes para darle estilo a nuestro bloque.

El c?digo base para entender de lo que hablamos es este:

.post-body blockquote:before {
content: "\201C";
}
.post-body blockquote:after {
content: "\201D";
}

Ah? indicamos que antes del bloque usaremos la comilla de apertura \201C que traducido al cristiano es esta: �
Y al final del bloque usaremos la comilla de cierre \201D que es esta: �
Tambi�n podemos usar open-quote y close-quote en su lugar.

.post-body blockquote:before {
content: open-quote;
}
.post-body blockquote:after {
content: close-quote;
}

O bien, una imagen, en la cual la primera ser?a la imagen de la comilla de apertura y la segunda ser?a la imagen de la comilla de cierre:

.post-body blockquote:before {
content: url(URL de la imagen);
}
.post-body blockquote:after {
content: url(URL de la imagen);
}

Teniendo la base podemos crear diferentes estilos, este ser?a uno muy sencillo:

.post-body blockquote {
background:#F7F8E0; /* Color de fondo */
padding:10px;
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este le podemos aplicar un fondo gradiente y sombras:

.post-body blockquote {
padding:10px;
border-color: #999; /* Color del borde */
background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
background: -moz-linear-gradient(top, #fff, #E0E0E0);
background: -ms-linear-gradient(top, #fff, #E0E0E0);
background: -o-linear-gradient(top, #fff, #E0E0E0);
box-shadow: 0px 0px 15px #000000; /* Sombra */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

A este lo haremos m?s "divertido" poni�ndole un color m?s vivo y gir?ndolo un poco:

.post-body blockquote {
border-radius: 5px; /* Borde redondeado */
box-shadow: 5px 5px 2px #696969; /* Sombra */
-webkit-transform: rotate(-4deg); /* Rotaci?n */
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
background-color: #F4A460; /* Color de fondo */
padding: 10px;
color: #FFFFFF; /* Color del texto */
}
.post-body blockquote:before {
content: "\201C";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: "\201D";
font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;
}

Y a este le pondremos una imagen animada como comillas, adem?s de un borde resplandeciente:

.post-body blockquote {
background:#CEECF5;  /* Color de fondo */
padding:10px;
width:85%;
border-radius: 0px 30px; /* Bordes redondeados */
border: 2px solid #fff; /* Borde interior */
-moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
-goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
}
.post-body blockquote:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopswNR_kOxbKh6ksZSfwBRHKchQebe7f-0EiCquXauKDk1Yyn1gmMUMUGcLG4ycHtlrDDt8tQpg0yVal-OihHPshG5OhrxE02VW4EemnYaD_BcdqcBRzeAiWMOFvSiOgYT421sX8dqz0/s52/comilla1.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post-body blockquote:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRMY0GpswjWZ_AXWPVLNhGipI_E-BDbOL8wp0PZrKLSplugcYiD4yy3gea_5RfDM1Gp7QfXlJMrkFzPM4QcuI2-doaAanf9zGcI_T5EQBkjYC1OA8wZ2QaJdOnokHG-jimOkGrTSu2EM/s39/comilla2.gif);
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}

Cualquiera de los c?digos anteriores los puedes poner en sustituci?n de los que ya tengas, o bien, sino los tienes definidos puedes ponerlos antes de ]]></b:skin>

Cualquiera de los ejemplos es completamente personalizable, en color verde est?n las anotaciones del ?rea a la que corresponde cada estilo.
En el caso de las comillas ver?s esto:

font-family: Georgia;
font-size:40px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding-top:10px;

font-family es el tipo de fuente, font-size el tama?o de la comilla, font-weight lo pone en negrita con la declaraci?n bold, line-height es el espacio entre l?neas, vertical-align es para alinearlo verticalmente, y padding-top el espacio respecto a la l?nea de arriba.

Ten en cuenta que algunos de estos estilos s?lo se ver?n en navegadores modernos -ya sabes por cu?l lo digo- , pero en el resto se ve perfectamente bien.