Thursday, December 29, 2011

Las entradas m?s visitadas y comentadas del 2011

No es que ande sin ganas de escribir (aj?), pero s� que muchos s?lo tienen oportunidad de retocar su blog en vacaciones pues es de cuando m?s tiempo disponen; adem?s sirve que hacemos una remembranza de las entradas m?s relevantes seg?n Analytics y Blogger.
As? que si eres de los que se quedaron frente al ordenador estas vacaciones, �stas son las entradas m?s visitadas y comentadas que se publicaron en el 2011 dentro de Ciudad Blogger.


Las entradas m?s visitadas del 2011


Las entradas m?s comentadas del 2011


Nos leemos en el 2012 :)
?Feliz A?o Nuevo!


Monday, December 26, 2011

Personalizar el gadget "Enlaces de Suscripci?n" de Blogger

En XarDesigns he visto una forma de personalizar el gadget de "Enlaces de Suscripci?n" que me ha gustado mucho. Y es que ese gadget no es tan usado, quiz? por lo poco atractivo que puede parecer para algunos. Sin embargo, ofrecerles a los lectores un medio para suscribirse al feed del blog debe ser primordial.
Con esta forma de personalizarlo el gadget luce m?s "sexi" seg?n el autor, pero lo mejor es que est? hecho a base de CSS3 as? que podemos cambiarle los colores sin problemas. Adem?s, se le ha agregado la suscripci?n por correo electr?nico con lo cual el gadget se vuelve m?s completo.

Este es el gadget original:

Y despu�s de modificarlo quedar? as?:

Y al desplegarse se ver? de esta forma:


Si a?n no usas el gadget entra en Dise?o | Elementos de la p?gina | A?adir un gadget | Enlaces de suscripci?n, o si usas la nueva interfaz entra en Dise?o | A?adir un gadget | Enlaces de suscripci?n.


Ya teni�ndolo en tu blog, o si ya lo ten?as puesto, entra en la Edici?n HTML de la plantilla, y SIN expandir los artilugios busca esta l?nea:
<b:widget id='Subscribe1' locked='false' title='Suscribirse a' type='Subscribe'/>
Elim?nala y en su lugar pon este c?digo:
<b:widget id='Subscribe1' locked='false' title='Suscribirse a' type='Subscribe'>
<b:includable id='main'>
<b:if cond='data:isPublic'>
<div style='white-space:nowrap'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:loop values='data:feeds' var='feed'>
<div expr:class='&quot;subscribe-wrapper subscribe-type-&quot; + data:feed.type'>
<div expr:class='&quot;subscribe expanded subscribe-type-&quot; + data:feed.type' expr:id='&quot;SW_READER_LIST_&quot; + data:widgetId + data:feed.type' style='display:none;'>
<div class='top'>
<span class='inner' expr:onclick='&quot;return(_SW_toggleReaderList(event, \&quot;&quot; + data:widgetId +data:feed.type + &quot;\&quot;));&quot;'>
<div class='subscribe-arrow-collapse'/>
<data:feed.title/>
</span>
<div class='feed-reader-links'>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://www.google.com/ig/add?source=bstp&amp;feedurl=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a Google</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://www.netvibes.com/subscribe.php?url=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a Netvibes</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://www.newsgator.com/ngs/subscriber/subext.aspx?url=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a NewsGator</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='&quot;http://add.my.yahoo.com/content?url=&quot; + data:feed.encodedUrl' target='_blank'>Agregar a MyYahoo!</a>
</div>
<div class='subscribe-add-platform'>
<div class='subscribe-add-bubble-wrapper'>
<div class='subscribe-add-bubble'>+</div>
<div class='subscribe-add-bubble-arrow'/>
</div>
<a class='feed-reader-link' expr:href='data:feed.url' target='_blank'>Suscribirse v?a Atom</a>
</div>
</div>
</div>
<div class='bottom'/>
</div>

<div class='subscribe' expr:id='&quot;SW_READER_LIST_CLOSED_&quot; + data:widgetId +data:feed.type' expr:onclick='&quot;return(_SW_toggleReaderList(event, \&quot;&quot; + data:widgetId +data:feed.type + &quot;\&quot;));&quot;'>
<div class='top'>
<span class='inner'>
<div class='subscribe-arrow-expand'/>
<span expr:onclick='&quot;return(_SW_toggleReaderList(event, \&quot;&quot; + data:widgetId +data:feed.type + &quot;\&quot;));&quot;'>
<data:feed.title/>
</span>
</span>
</div>
<div class='bottom'/>
</div>

</div>
</b:loop>
<div class="subscribe-via-email-wrapper">

<form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=Nombre-de-mi-feed\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
<input class='follow-by-email-address' name='email' placeholder='direcci?n de correo....' size='14' type='text'/>
<input class='follow-by-email-submit' type='submit' value='Submit'/>
<input name='uri' type='hidden' value='Nombre-de-mi-feed'/>
<input name='loc' type='hidden' value='es_ES'/>
</form>

</div>
<div style='clear:both'/>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
En donde dice Nombre-de-mi-feed pon el nombre que le has dado a tu feed en Feedburner, por ejemplo, en mi caso, esta es la URL de mi feed de Feedburner:
http://feeds.feedburner.com/CiudadBlogger
Por lo tanto, el nombre de mi feed, en mi caso es CiudadBlogger
Para que esa opci?n de correo funcione deber?s tener activado en Feedburner la suscripci?n por correo electr?nico.

Ahora antes de ]]></b:skin> agrega los estilos:
div.subscribe div.top, div.subscribe div.bottom {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='');}
div.subscribe div.top, div.subscribe div.bottom {
background: none !important;
padding:3px;
}

.feed-reader-links {
background-color: #222 !important; /* Color de fondo del contenedor desplegable */
padding: 1px 0 !important;
border-radius: 3px !important;
color: #000 !important;
-khtml-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-khtml-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
width:170px;
}
.subscribe-arrow-expand {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #333; /* Color de la flecha */
float: right;
margin-top: 6px;
}
.subscribe-arrow-collapse {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #333; /* Color de la flecha */
float: right;
margin-top: 6px;
}
.subscribe-add-bubble-wrapper {
float: left;
margin-right: 10px;
padding-top: 2px;
}
.subscribe-add-bubble {
background: #444; /* Color del ?cono dentro de los enlaces */
font-size: 8px;
padding: 3px;
border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
-khtml-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.subscribe-add-bubble-arrow {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #444; /* Color del ?cono dentro de los enlaces */
margin-left: 2px;
}
.subscribe-add-platform {
border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
line-height: 0.4;
background: #111; /* Color de fondo de los enlaces */
font-size: 12px;
margin: 4px 5px;
padding: 2px 3px;
}
.subscribe-add-platform:hover {
background: #333; /* Color de fondo de los enlaces al pasar el cursor */
}
.subscribe-add-platform a {
text-shadow: 1px 1px #000;
color:#F9F0D7; /* Color de los enlaces */
font-size:11px;
font-family:Verdana;
}
.subscribe-add-platform a:hover {
text-shadow: 1px 1px #000;
color:#FF8400; /* Color de los enlaces al pasar el cursor */
}
.subscribe-add-platform a:hover {
text-decoration: none;
}
.subscribe-via-email-wrapper {
margin: 8px 0 0 7px;
font-size: 1em;
}
.follow-by-email-address {
font-size: 11px;
background-color: #444; /* Color de fondo de la suscripci?n por correo */
padding:3px;
border: none;
color: #222; /* Color del texto "direcci?n de correo" */
width:120px;
}
.follow-by-email-submit {
font-size: 12px;
background-color: #000; /* Color del bot?n "Suscribir" */
border: 1px solid #000;
margin-left: -4px;
color: #999; /* Color del texto "Suscribir" */
padding:3px;
}
.follow-by-email-submit:hover {
background-color: #333; /* Color del bot?n "Suscribir" al pasar el cursor */
position: relative;
top: 1px;
left: 1px;
color: #FFF; /* Color del texto "Suscribir" al pasar el cursor */
}
Guarda los cambios y listo.
En color verde est?n las anotaciones a lo que corresponde cada ?rea que se puede cambiar.

Recuerda que est? hecho con CSS3, as? que algunas caracter?sticas como el sombreado y los bordes redondeados no se ver?n en navegadores antiguos.

De esta forma el tradicional gadget de suscripci?n al feed puede verse m?s atractivo, funcional, y vers?til.

Sunday, December 25, 2011

Men? horizontal con efecto deslizante (actualizado)

El men? horizontal con efecto deslizante, es un men? de subpesta?as hecho con jQuery el cual despliega sus subpesta?as con un deslizado suave, y aunque se public? hace ya bastante tiempo, es uno de los men?s de aqu? que he visto que usan mucho, pues es un men? que se adapta a muchos estilos de plantilla.
Sin embargo, algunos batallan cuando quieren personalizarlo, y es que al estar alojados en un hosting tanto el script como los estilos CSS, hace que se complique para algunos poder hacerle cambios para darle ese toque personalizado.
As? que en esta entrada veremos el mismo men?, pero, esta vez no alojaremos ni el script ni los estilos en ning?n servidor, todo estar? dentro de la plantilla para que sea mucho m?s f?cil hacerle cambios, adem?s usaremos una versi?n m?s reciente de jQuery, y como pil?n, ya tiene los cambios para que puedan usarlo junto con Scriptaculous y Prototype sin ning?n problema.

El men? en cuesti?n es el siguiente:

Bien, empecemos a colocar este men? horizontal con subpesta?as y efecto deslizante en el blog.

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 comenzar vamos a entrar a la Edici?n de HTML y agregamos antes de </head> los scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgee6zGY8v4YJuq0gjLwTLKz1ZM0De5BwAfjRBuoehyphenhyphenpvt5JoRehxRerO_ay_8fbErQezCVnmx-lU_pQHUzDMULNJFho5EE1R1NPJ-VvU6h4sXF8oPj-qxC2-1t6fpocX99twde6Ms23lca/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSN7TdYZRtuHMcjvL-ljzN_3MYLoixR1xgjOmxWPOqPids_El9pC65VjwEXYiPuWQzVRAMzGfeZ2lgIGt9v5vdnKeKYKNGhCoNwgTz4FjLFEAO898UDmOiK9xulY3sU3eCOhYoR21Ag4l/']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1)
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>
Luego, antes de ]]></b:skin> pega los estilos:
/* Men? horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu{
background: #414141; /* Color de fondo del men? */
width: 100%;
font-weight: bold;
font-size: 12px; /* Tama?o de la letra */
font-family: Verdana; /* Tipo de letra */
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a {
display: block;
background: #414141; /* Color de las pesta?as */
padding: 8px 10px;
border-right: 1px solid #778; /* Color del borde que separa las pesta?as */
text-decoration: none;
}

* html .jqueryslidemenu ul li a {
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #FFF; /* Color del texto */
}

.jqueryslidemenu ul li a:hover {
background: #000; /* Color de la pesta?a al pasar el cursor */
color: #FFF; /* Color del texto al pasar el cursor */
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul {
top: 0;
}

.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpesta?as */
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
Por ?ltimo entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Dise?o | A?adir un gadget | HTML/Javascript. Ah? pega la estructura del men?:
<div class="jqueryslidemenu" id="myslidemenu">
<ul>
<li><a href="URL del enlace">Pesta?a 1</a></li>
<li><a href="URL del enlace">Pesta?a 2</a></li>
<li><a href="#">Pesta?a 3</a>
<ul>
<li><a href="URL del enlace">Sub 3.1</a></li>
<li><a href="URL del enlace">Sub 3.2</a>
<ul>
<li><a href="URL del enlace">Sub 3.2.1</a></li>
<li><a href="URL del enlace">Sub 3.2.2</a></li>
<li><a href="URL del enlace">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pesta?a 4</a></li>
<li><a href="#">Pesta?a 5</a>
<ul>
<li><a href="URL del enlace">Sub 5.1</a></li>
<li><a href="URL del enlace">Sub 5.2</a></li>
<li><a href="URL del enlace">Sub 5.3</a></li>
<li><a href="URL del enlace">Sub 5.4</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pesta?a 6</a></li>

</ul>

<br style='clear: left'/>
</div>
A?ade las URLs de los enlaces y los nombres de las pesta?as donde se indica y listo.
En color verde se se?alan las ?reas que pueden personalizarse, como el color de fondo, el color de los enlaces, etc.
Las flechas de las subpesta?as son im?genes y pueden cambiarse en el primer c?digo, reemplazando las URLs en color naranja.

Si quisieras a?adir otra pesta?a s?lo agrega antes del ?ltimo </ul> una l?nea como esta:
<li><a href="URL del enlace">Otra Pesta?a</a></li>

Si quisieras agregar otra pesta?a que contenga subpesta?as entonces agrega igual antes de </ul> este c?digo:
<li><a href="#">Otra pesta?a</a>
<ul>
<li><a href="URL del enlace">Subpesta?a 1</a></li>
<li><a href="URL del enlace">Subpesta?a 2</a></li>
<li><a href="URL del enlace">Subpesta?a 3</a></li>
</ul>
</li>
Y ahora s?, quienes usan este men? o quienes quieran usarlo ya no se complicar?n para poder personalizar sus colores pues todo se podr? hacerse directo desde la plantilla sin necesidad de alojar nada en ninguna parte.

Este men? usa jQuery, as? que si ya tienes jQuery en tu plantilla recuerda dejar s?lo la versi?n m?s reciente y/o la que sea compatible con todas las aplicaciones que uses.

Thursday, December 22, 2011

?Feliz Navidad 2011!

Deseo de todo coraz?n, que esta Navidad est� llena de dicha y bienestar en sus hogares; y que el A?o Nuevo que se avecina les traiga prosperidad, salud y toneladas de �xitos para ustedes y sus seres amados.


Click para abrir



Tuesday, December 20, 2011

Cuenta regresiva para el 21 de diciembre de 2012

Dicen los que saben del tema, que el 21 de diciembre de 2012 se cumplir? una profec?a maya en la cual termina un ciclo de su calendario dando paso a una nueva era; se especula mucho sobre lo que suceder? y si bien hay muchas posturas en cuanto al tema, lo cierto es que es una fecha que est? en boca de muchos.
En mis vacaciones pasadas me encontr� en la Pen?nsula de Yucat?n mucha propaganda en camisetas, gorras, souvenirs, y espectaculares que hablan sobre este acontecimiento, as? que pens� que habr?a quienes les gustar?a tener en su blog algo alusivo a esta fecha, por ello dise?� estos gadgets.

Son dos contadores de cuenta regresiva para el 21 de diciembre de 2012 con motivos mayas que se instalan en un parpadeo, y que contar?n los d?as que faltan para que llegue esa fecha.

Cualquiera de ellos se agrega entrando en Dise?o | A?adir un gadget | HTML/Javascript.
Si usas la interfaz antigua entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript.
Ahora s?lo elige el c?digo del contador que m?s te guste y p�galo ah?.
Espero que sean de su agrado.






<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdjVjK8XS1bhTvW7Tto3xpCecuYOPzVwDsubrkQg_FYcfyhUXrUlYZdeqKZbM8JLolvA_NyFIboZNxCQSX_RjP6H014RZT2nDNc0e_kQKCVqSIP77m73u9xxTVyHsY5NhCFuzeU9xNQuk/s260/calendario-maya1.png"border="0"width="260"height="120"cellpadding="0"style="-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"><tbody><tr><td><div style="margin-top:3px;margin-left:170px;font-size:45px;font-family:impact;color:#eee;text-shadow: 1px 1px 10px #ccc;"><script type="text/javascript">// Cuenta regresiva 21 Diciembre 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/$|,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();if (num < 10) num = '0' + num;for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("December 21, 2012","00","%days%");</script></div></td></tr></tbody></table>







<style>body:first-of-type .contador2012{margin-top:-30px;}</style><!--[if IE]> <style>.contador2012{position:relative;margin-top:-30px;}</style><![endif]-->
<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1YILOlq6ApHbChDiXRY_G7Ft2hVtKMLTqm2CiWCXfz5IuH1PbbcEH4jGY4eBmhcHElj4j9ks8sH8bcJdPFilXzWNKGn2zq1IoQGDmc8pETbO48Anpat9TXf4JNeZWPu7UpfagtGXJDk/s260/calendario-maya2.png"border="1"bordercolor="5f4a35"cellspacing="0"width="260"height="120"cellpadding="0"><tbody><tr><td><div class="contador2012"style="position:absolute;margin-left:105px;padding-top:0px;font-size:45px;font-family:impact;color:#dbc49b;text-shadow: 1px 1px 5px #000;">
<script type="text/javascript">// Cuenta regresiva 21 Dieciembre 2012
// Diseñado por ciudadblogger.com
function renderMessage(dateStr,msg1,msg2,countFrom){var date=new Date(dateStr);var now=new Date();var diff=date.getTime()-now.getTime();var days=Math.floor(diff/(1000*60*60*24))+1;if(days<1){document.write(msg1)}else{if(countFrom)days=countFrom-days;document.write(msg2.replace(/%days%/g,number_format(days)))}}function number_format(num){num=num.toString().replace(/$|,/g,'');if(isNaN(num)){num="0"}sign=(num==(num=Math.abs(num)));num=Math.floor(num*100+0.50000000001);num=Math.floor(num/100).toString();if (num < 10) num = '0' + num;for(var i=0;i<Math.floor((num.length-(1+i))/3);i++)num=num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));return(((sign)?'':'-')+num)}</script><script type="text/javascript">renderMessage("December 21, 2012","00","%days%");</script></div></td></tr></tbody></table>

Monday, December 19, 2011

Reducir el espacio debajo de los comentarios

No es que sea un problema, pero algunos encuentran esteticamente poco atractivo el espacio que hay entre el formulario de comentarios y los enlaces de navegaci?n. No s� si sea mucho o poco espacio pues eso viene siendo relativo, lo cierto es que si no te gusta tener todo ese espacio no tienes que vivir con ello pues puedes modificarlo.


Para reducir el espacio que hay debajo de los comentarios ingresa a la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca este c?digo:
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
Busca el segundo height que se muestra en color rojo y cambia su valor por uno m?s bajo, por ejemplo height='260'
Y habiendo hecho eso el espacio se habr? reducido.

Si se te dificulta encontrar el c?digo gu?ate por la l?nea en color gris, pero toma en cuenta el height del cual hablamos aparece dos veces en ese c?digo, y el que hay que modificar es el segundo.

Friday, December 16, 2011

M?s luces de Navidad para el blog

S?, ya s� que ya hab?amos visto c?mo poner luces de Navidad en el blog, pero Vicky muy amablemente nos ha compartido sus im?genes y no me pude resistir a compartirlo tambi�n con ustedes, pues s� que muchos gustan de la variedad. Y si de variedad de trata pues aqu? hay 10 luces de Navidad que podemos usar para decorar el blog en estas fiestas.

Las luces quedar?n arriba del blog, y s?lo hay que entrar a la Edici?n HTML de la plantilla y agregar antes de </body> el c?digo que las luces que prefieras:

<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13LI4UaKpDGVPsPJYJr_awQwGh08tpjTh8Te_FlQci1CttOydXEbqpm-VpmKxOTrr5ZfXC7BGn0DYh8PVzjva1-7ykPPsIo51NGvirFtjD9Z_gXpOjWzxBNoMjxkPvKKa_iNpkNjpFDo/s435/luces%2525209.gif);
background-repeat:repeat-x;
height:25px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw_23iKGoYA5ILvtc-a691XcIluyPy2HO_v-2t-16DRzEGQxbCrQIf9wGQGYQmrlhS5Yt7Z5i8e7QJiZLEJvGb1aRFzP4jsodNrZLYBVtEsS3yCVLgLWoP7BpwWPIb0S41BJmOntlWfk4/s457/luces%25252010.gif);
background-repeat:repeat-x;
height:32px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzM8beFgSKvx1ovGtWAFE1981RmWULGL0wHNUoIghQD1mvKZEN85uAGFLeh2LRJG8Dd5yohotub8qB7cyfYULOXXvpd5c_vxajig1kMAOZj_DcwK7UM-6VPjuHcDsJ4HsGS7xofb9rVQ/s500/luces%25252012.gif);
background-repeat:repeat-x;
height:47px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGqsHgy0RdPfl7QZhmj7YEhNwFMzOWNIHPzdTAPla3zHETWq8Ru5gRTLuEJnmipAKPG4I3unBRUPCNRwg6Gdcx8A9KrwRJA8-LS1u5w3KNU43-m0LVXYPn6yJ7kZbwQ-NcuD4Cz1hAAI/s628/luces%25252014.gif);
background-repeat:repeat-x;
height:48px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhalHYsCJJ82UAb7bppLr-lLQMukdywcGzrXYKAyPLE5XAsvIQVw6Jh3vrqIdujpJexGlV8sssF-Kn4kdFJe_7CjrCkItXXg4VTaZgZiKj-roMEXJ3PHWLTAh1JLrmAAHYw0bCtyRsOvmk/s80/luces%25252015.gif);
background-repeat:repeat-x;
height:20px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKBADqoE1W7S_jwlB9xDfRvPHEKDhx3zBfNEOQGY0i7ib_X5KWz7Epv_lNkIwSv8Nx8V7dtLrO1fZnwULGZUl9mJgmNvPqQOfYl9T-BRbUqeWfsFHRUxd7utOCnU8dq3WZQkb9NrOjATQ/s360/luces%25252017.gif);
background-repeat:repeat-x;
height:21px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Ks0R5Nvp3A0EZukBZtHP0K45LDBaZieCAR_hnQ7fsz5mQ-MK-O2y_vplMRWHOVhCeYrk2-iKOckQfaREHvRNZuuoVQvJQY9v9AQnhS0sGO6kRJlix-xTQyxTi_7YPx4wHNUPHgthYns/s204/luces%25252036.gif);
background-repeat:repeat-x;
height:69px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWVwckyTrU609VTC2Ux2mB-Cc0rRm7MBmSgIsmY4Fob15dseLoDuJfM5QBSLaVXB8-Jkb5k9FR0_ICL-IvmymczTYiorgr8XSAY6RazcIrWZ3nTzTgZ6gvqMCR2kPz-npUtphOky0f_U/s123/luces%25252037.gif);
background-repeat:repeat-x;
height:44px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhawH1mqG-6zFZ3Rt-C7jzYERUIUFiLM3o2oLo5vISDz9qP-zm2ui5QIM2r5wFEztMV904LojbPH26zP7HpFxHvYQi64VQLIu_mim_N65L5I8NLUSPm3xsZAuoOf6mIvJMgBBXbEpin8vQ/s333/luces8.gif);
background-repeat:repeat-x;
height:45px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->


<!-- Luces de Navidad -->
<style type="text/css">
.luces {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkqqrrAms_CogJCZ6t8Uu9cVEgkB-kAKS9zZLXXiCCVL6f9_01IMrIk5sAhxwdalfdtFK12NYRRaas2N4fKh96jhW53yEhN9PGjBG-fJRIdauTW2ofaR0iuQ9O0yl9Jf1ovwX1d1nDzs/s129/luces7.gif);
background-repeat:repeat-x;
height:43px;
width:100%;
position:absolute;
top:0;
left:0;
}
</style>
<div class='luces'></div>
<!-- Luces de Navidad -->

Si quisieras que las luces fueran flotantes s?lo cambia position:absolute; por position:fixed; para que las luces de Navidad sean visibles aun cuando se baje la p?gina.

Y cuando acaben las fiestas decembrinas, o se te pase el esp?ritu navide?o (lo que pase primero), s?lo quita ese c?digo y se habr?n apagado las luces.

Tuesday, December 13, 2011

Cambiar de lugar los enlaces de navegaci?n

Los enlaces de navegaci?n son esos links que aparecen al final de todo el blog y al final de las entradas que dicen "Entradas recientes", "P?gina principal" y "Entradas antiguas". Siempre aparecen al final a menos que la plantilla los tenga ocultos.


Pero que siempre aparezcan ah? no significa que no podamos cambiarlos de lugar. De hecho vamos a ver c?mo cambiarlos de lugar, ya sea ponerlos arriba de todas las entradas, arriba de los comentarios, o arriba de cada entrada individual.

Lo que vamos a hacer es simple, primero condicionaremos los que ya tenemos para que no sean visibles en las entradas, as? que entra a la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca este c?digo:
<b:include name='nextprev'/>
En su lugar pon este:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
Con eso haremos que los que tenemos siempre debajo del todo no se muestren en las entradas individuales.
Ahora puedes decidir d?nde quieres tenerlos.

Arriba de los comentarios
Si quieres tenerlos entre el final de la entrada y el inicio de los comentarios, busca esta parte en tu plantilla:
</b:includable>
<b:includable id='status-message'>
Justo arriba de ese c?digo agrega esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Arriba de cada la entrada
Con esta forma podr?s poner los enlaces de navegaci?n justo arriba de la entrada, es decir, antes del t?tulo del post.
Para ello busca esta l?nea:
<b:includable id='post' var='post'>
Debajo de ella agrega esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Con esos dos m�todos anteriores los enlaces de navegaci?n se ver?n s?lo en las entradas individuales, as? que hay que ingresar al post para verlos.

Arriba de todas las entradas
Con esta forma haremos que se muestren hasta arriba de todas las entradas, as? que si quieres puedes conservar los enlaces de navegaci?n de hasta abajo, si es as? omite el primer paso, sino puedes continuar.
Para ponerlo arriba de todas las entradas busca esta l?nea:
<b:includable id='main' var='top'>
Debajo de ella agrega esto:
<b:include name='nextprev'/>

Independientemente de d?nde hayas decidido ponerlos puedes darles un poco de estilo, por ejemplo puedes cambiar los enlaces de navegaci?n por una imagen, o agregarle un poco de CSS, como ponerle un color de fondo, un borde, etc.


Tan s?lo a?ade antes de ]]></b:skin> este c?digo:
#blog-pager {
background:#eee; /* Color de fondo */
border:1px solid #ccc; /* Borde */
padding:8px;
/* Bordes redondeados */
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#blog-pager a {
background:#eee; /* Color de fondo */
color:#000; /* Color de los enlaces */
}
Ese es s?lo un ejemplo sencillo pero se pueden a?adir m?s estilos si lo deseas.

Friday, December 9, 2011

Santa Claus volando en su trineo por el blog


La Navidad pasada vimos c?mo poner el trineo de Santa Claus en el blog usando una imagen y el atributo MARQUEE; un m�todo sencillo que no requiere nada mas que una imagen. Sin embargo si quieres una decoraci?n de Navidad en tu blog m?s llamativa puedes tener este Santa Claus (o Pap? Noel) volando por el blog y soltando a su paso unos peque?os destellos.
Es un script de Giffy y puedes verlo volando por esta misma entrada, se cruzar? por el blog cada cierto tiempo de abajo hacia arriba.

El script no tiene opciones de configuraci?n, pero as? como est? me parece bastante lindo, y lo mejor es que se instala pegando tres l?neas de c?digo, as? que hasta el m?s novato puede llevarse este Santa Claus al blog.

Para ponerlo s?lo entra en la Edici?n HTML de la plantilla y agrega antes de </head> este script:
<!-- Santa Claus volando por el blog -->
<script type="text/javascript" src="http://blogparts.giffy.me/0017/parts.js" />
<!-- Santa Claus volando por el blog -->

Y listo. Cuando terminen las fiestas navide?as s?lo elimina ese c?digo y habr?s mandado a descansar a Santa Claus y su reno.


AVISO
El sitio que provee el gadget ha insertado un banner publicitario en el script, por lo que al tener este adorno se mostrar? dicho banner en la parte superior del blog. Si no deseas que aparezca el banner habr? que eliminar el gadget en forma definitiva.

Tuesday, December 6, 2011

Agregar la caja de comentarios de Facebook en Blogger

Uno de los temas m?s solicitados es c?mo poner la caja de comentarios de Facebook en el blog, y es que a veces se vuelve m?s f?cil comentar desde Facebook pues la mayor?a est? conectado a esa red social todo el tiempo, adem?s no necesitamos ingresar con nuestros datos de Google para poder comentar en un blog que contenga este tipo de comentarios.

Este m�todo lo vi en Vagabundia, donde explican c?mo agregar el Plugin de comentarios de Facebook de manera que cada entrada tenga su propia caja de comentarios y sea independiente a las dem?s.

Como primer paso entra en la Edici?n HTML del blog y busca la etiqueta:
<body>
Si usas una plantilla del Dise?ador entonces la encontrar?s como:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas agrega esto:
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Despu�s busca esta l?nea:
<b:includable id='post' var='post'>
Si vieras una flechita ▶ al lado de ella da click para que se expanda ese artilugio. Y justo antes del siguiente </b:includable> agrega esto:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='comentariosFacebook'><div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'/></div>
</b:if>

As? se ve el ?rea donde se agrega el c?digo (la parte que est? arriba del ?rea marcada en rojo puede variar de plantilla en plantilla)


Con eso ya tendr?s la caja de comentarios de Facebook en tus entradas (recuerda que debes ingresar a un post para poder verla).
La caja estar? arriba de los comentarios de Blogger. Si quieres que est� debajo del formulario de comentarios entonces el c?digo del plugin ponlo justo arriba de este c?digo:
</div>
<b:if cond='data:post.includeAd'>

Dentro del ?ltimo c?digo que a?adimos veremos estos par?metros:
data-num-posts='5'
data-width='500'
data-colorscheme='light'
El primero es el n?mero de comentarios que se mostrar?n; el segundo el ancho del formulario; y el tercero el color del formulario, puedes cambiar light por dark

Hasta ah? ya tenemos el CommentBox de Facebook; si deseas personalizarlo un poco puedes colocar antes de ]]></b:skin> algunos estilos, por ejemplo:
#comentariosFacebook {
background:#F2F2F2; /* Color de fondo del contenedor */
width:520px; /* Ancho del contenedor */
padding:10px;
margin-top:0px; /* C?mbialo por -180px si lo has puesto debajo de los comentarios de Blogger */
}

Si quieres que cada vez que alguien haga un comentario te llegue una notificaci?n de Facebook, y puedas moderar los comentarios, ser? necesario que crees una aplicaci?n. Pero para ello es necesario tener verificada la cuenta de Facebook.

Si es as?, entra a Facebook Developers y haz click en el bot?n Crear nueva aplicaci?n.


Ah? escribe el nombre de la aplicaci?n, acepta los t�rminos y click en Continuar.


En la siguiente pantalla haz click en Sitio web, ah? escribe la URL de tu blog donde lo pondr?s; tambi�n copia el n?mero que est? en App ID.


Ahora entra de nuevo en la Edici?n HTML de tu blog y pega antes de </head> esto:
<meta content='ID de USUARIO' property='fb:admins'/>
<meta content='ID de APLICACI?N' property='fb:app_id'/>
En la ID de aplicaci?n agrega la serie de n?meros que copiaste. Y en ID de usuario agrega tu ID de Facebook, sino lo conoces ingresa a este enlace:
http://graph.facebook.com/usuario
Cambia donde se indica tu nombre de usuario y da click, ah? ver?s cu?l es la ID de tu usuario de Facebook (Gracias a Siniestro por el tip).

Una vez hecho eso ingresa a una entrada para ver tu caja de comentarios y dale click en Configuraci?n. Ah? ver?s varias opciones del plugin; en donde dice Moderadores, agrega tu nombre y guarda los cambios.


Una vez habiendo hecho todo lo anterior podr?s moderar los comentarios y recibir?s las notificaciones en tu cuenta de Facebook cada vez que alguien haga un comentario. Sino lo haces podr?s seguir teniendo tu caja de comentarios de Facebook pero sin estas opciones.

Al final de la entrada he puesto una para que puedas probar el resultado, pero cualquier duda sobre el tema d�jala en los comentarios de Blogger ;)

Sunday, December 4, 2011

Nieve en el blog que se acumula al final de la p?gina



La temporada navide?a ya es oficial, y al menos los que estamos en el hemisferio norte relacionamos la nieve con la Navidad, as? que es hora de abrigarnos porque haremos que caiga nieve en el blog.

En esta ocasi?n usaremos un script de Schillmania que har? que caigan unos finos copos de nieve en el blog y que se ir?n acumulando al final de la p?gina. Adem?s, la tormenta de nieve se mueve en direcci?n contraria al cursor, por lo que si movemos el cursor a la derecha entonces la nieve caer? desde la izquierda y viceversa.

Puedes ver un ejemplo en este blog de pruebas.

Para no complicarnos descargando y subiendo archivos, pegaremos el script directo en un gadget, as? podr?s quitar la nieve del blog cuando quieras con s?lo eliminar el gadget.
Si usas la interfaz antigua entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript.
Si usas la nueva interfaz entra en Dise?o | A?adir un gadget | HTML/Javascript.
Ah? dentro del gadget pega el siguiente c?digo:
<script type="text/javascript">
//<![CDATA[
// Nieve en el blog
/** @license
DHTML Snowstorm! JavaScript-based Snow for web pages
--------------------------------------------------------
Version 1.42.20111120 (Previous rev: 1.41.20101113)
Copyright (c) 2007, Scott Schiller. All rights reserved.
Code provided under the BSD License:
http://schillmania.com/projects/snowstorm/license.txt
*/
var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=40;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="&bull;";this.snowStick=true;
this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null,
p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice,
b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop,
10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt=
function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(),
a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake=
function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width=
a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display=
"none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&&
b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting?
b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin=
"0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&&
(f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval*
3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove",
a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt;
a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document);
//]]>
</script>
Guarda los cambios y a aguantarse el fr?o virtual.
El n?mero 40 es la velocidad en la que cae la nieve, con un valor m?s bajo caer? m?s r?pida y con uno m?s alto caer? m?s despacio.
En color rojo est? el c?digo del color de la nieve, en este caso es blanca, pero puedes cambiarlo por otro en caso que tu blog sea de un color claro, sino pues no se ver?.
Cuando acabe la temporada navide?a s?lo elimina el gadget donde pusiste el c?digo y se habr? ido la nieve.

?No te gusta esta nieve? Aqu? hay otra opci?n para hacer que caiga nieve en el blog.

Wednesday, November 30, 2011

Aumentar el t?tulo del blog o imagen de la cabecera al pasar el cursor

Esto de las transiciones con CSS3 es algo que a todos encanta por la variedad de efectos que podemos obtener y sin necesidad de utilizar ning?n script, todo es CSS.
Uno de estos efectos que me han preguntado es c?mo hacer para que la imagen de la cabecera (o el t?tulo del blog en caso de que no tengamos imagen) pueda aumentar al pasar el cursor con este efecto suave y deslizante.







Primero hay que procurar tener la imagen en un tama?o grande, esto es para que no se pixele al aumentarse. Con esto quiero decir que si por ejemplo, la imagen de la cabecera aumentar? a 400px de ancho entonces el ancho original de la imagen debe ser de 400px o m?s.

Luego, hay que saber las medidas que tendr? la imagen cuando est� peque?a, para eso tendremos que sacar las medidas proporcionalmente para que no se desproporcione al reducirla (?ves? te dije que alg?n d?a te servir?a)

Ahora s?, entra en la Edici?n HTML de la plantilla y agrega antes de ]]></b:skin> lo siguiente:
#header img {
width:200px; /* Ancho de la imagen en su estado normal */
height:200px; /* Alto de la imagen en su estado normal */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header img:hover {
width:400px; /* Ancho de la imagen al pasar el cursor */
height:400px; /* Alto de la imagen al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambia los valores de width y height, width es el ancho de la imagen, y height el alto, en color verde ver?s a cu?l corresponde cada una.
Si lo crees conveniente puedes agregar unos m?rgenes para que la imagen no parezca que se va hacia la derecha, es decir, que d� la impresi?n que el zoom es desde el centro, para ello agrega debajo de #header img:hover { esto:
margin-top:-10px;
margin-left:-30px;
Puedes jugar con esos valores hasta que des con los correctos.

Pero si no usas una imagen como cabecera entonces tambi�n puedes aplicar este efecto al t?tulo del blog.


Nombre de mi blog




El procedimiento es similar; agrega antes de ]]></b:skin> esto:
#header h1 {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#header h1:hover {
font-size:80px; /* Tama?o del texto al pasar el cursor */
color:#FF00FF; /* Color del texto al pasar el cursor */
margin-left:-30px; /* Margen izquierdo */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
Aqu? es menos complicado pues no tienes que saber las medidas de ninguna imagen, s?lo debes poner el tama?o de la fuente que tendr? el t?tulo del blog al pasar el cursor. Aunque por supuesto puedes agregar ah? otras propiedades como un color diferente, y tambi�n puedes usar los m?rgenes para que el texto se aumente desde el centro, pero si no quieres estas dos ?ltimas opciones puedes eliminarlas sin problema.

Y as? de sencillo puedes tener tu cabecera del blog con efecto de zoom al pasar el cursor, aunque, lamento desilusionar a los usuarios de Internet Explorer pues ellos no ver?n ning?n efecto de deslizamiento. Otra raz?n m?s para usar un navegador moderno.


Monday, November 28, 2011

Fecha tipo calendario en las entradas del blog


Hay una forma muy particular de mostrar la fecha que llama mucho la atenci?n a muchos, y es la fecha tipo calendario, que le da un aspecto bastante interesante y distinto a este dato de las entradas que usualmente no le damos mucha importancia.


Para poner la fecha tipo calendario en el blog, primero descarga este archivo, es el que contiene todas las im?genes del calendario, elige la que m?s te guste y s?bela a Picasaweb o al hosting que prefieras.

Luego entra en Configuraci?n | Formato | Formato de cabecera de fecha, y cambia la fecha de manera que quede primero el d?a, luego el mes y por ?ltimo el a?o, por ejemplo: 29 noviembre 2011


Si usas la nueva interfaz entonces entra en Configuraci?n | Idioma y formato | Formato de cabecera de fecha, y c?mbiala de igual forma.




Ahora entra en la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios y busca esta l?nea:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Es posible que la encuentres dos veces, la segunda es la que nos interesa.
Ya que la hayas localizado elim?nala y en su lugar pon esto:
<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>
Ahora agrega antes de </head> lo siguiente:
<script type='text/javascript'>
//<![CDATA[
var FechaCalendario;
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";

document.write(mes+dia+anio);
FechaCalendario = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del d?a */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del a?o */
}
</style>
</b:if>

Agrega la URL de la imagen donde se indica y listo. En color verde ver?s d?nde cambiar el color de los datos de la fecha.
Si el calendario no se viera por completo, o si quieres que se muestre dentro del post cambia el -70px  por 0px
El archivo contiene 14 im?genes con distintos colores para que elijas el que mejor se adapte a los colores de tu plantilla.

ACTUALIZACI?N: Es importante que para que la fecha pueda mostrarse primero deba estar habilitada en las entradas, para ello ingresa a Elementos de la p?gina | Entradas del blog, y haz click en Editar, ah? marca la casilla de la fecha. Si usas la nueva interfaz sigue el mismo procedimiento entrando en Dise?o.

Tuesday, November 22, 2011

El gadget de P?ginas que no aparece

No es la primera vez que alguien me dice que cambi? la plantilla del blog, quiso poner el gadget de P?ginas pero no puede, porque el supuesto gadget ya se ha a?adido en el blog, pero �ste no aparece por ning?n lado de la plantilla. Incluso yo, hace poco en un blog de pruebas cambi� la plantilla, quise poner el gadget de P?ginas y dec?a que ya se ha a?adido, sin embargo del gadget, no hab?a ni sus luces.


Supongo que son de esas cosas que pasan en Blogger y uno no entiende. El caso es que, si te ha pasado algo similar entonces deber?s agregar el gadget manualmente, es decir, habr? que agregar el c?digo del gadget directo en la plantilla.


ACTUALIZACI?N:
En la nueva interfaz se puede solucionar este problema yendo a la secci?n "P?ginas", y donde dice "Mostrar p?ginas como" tendremos que seleccionar "Pesta?as principales", o "Enlaces laterales", con eso se mostrar? el gadget de p?ginas en el blog.



?C?mo hacerlo? Aseg?rate de no tener gadgets debajo de la cabecera, si los tuvieras arr?stralos moment?neamente a la sidebar. Luego ingresa en la Edici?n HTML de la plantilla, y SIN expandir los artilugios busca esta l?nea:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
Elim?nala y en su lugar pon esto:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
Habiendo hecho eso el gadget de P?ginas estar? en la plantilla. Antes de guardar los cambios usa la Vista Previa para asegurarte que todo ha salido bien.


Monday, November 21, 2011

Ganadores del concurso para seguidores de Facebook y Twitter

Pues s?, al igual que la vez anterior, terminamos regalando un dominio de m?s, pero es que esto de los concursos se pone siempre tan bueno que es imposible no dejarse llevar por la emoci?n. Sobre todo esta vez que me qued� sorprendido de lo bien que conocen "las calles de esta ciudad", pues fueron decenas los que sab?an a la perfecci?n las respuestas; de verdad que no pens� que conocieran tan bien este blog.

As? que una vez m?s, no fueron dos los dominios que se regalaron, ?sino tres?
Los dos primeros como lo prometimos se entregaron por Twitter y Facebook, pero como la participaci?n en Facebook fue bastante, nos decidimos a regalar uno m?s por esa v?a.
En Twitter Antonella fue la ganadora del primer dominio, y por Facebook Lupita Astro y Lucas Maidana fueron los afortunados ganadores.






Felicidades a los ganadores de los dominios y muchas gracias a todos por participar y siempre estar tan animados con los concursos que realizamos. Con estos ya son 12 los dominios que hemos regalado adem?s de otros premios que se han entregado, as? que si a?n no has resultado ganador no te preocupes que seguiremos entregando m?s dominios, y uno de los pr?ximos dominios puede ser tuyo.

?Hasta la pr?xima y gracias a todos!



Nota aclaratoria: Facebook a veces oculta mensajes que contienen enlaces a fin de prevenir el SPAM. Cuando eso sucede los dem?s usuarios no pueden ver esos comentarios, y el administrador de la p?gina ve esos comentarios remarcados con un fondo gris para que decida si debe eliminarlo o no.

Thursday, November 17, 2011

Poner en el blog aviso En Construcci?n

Hace poco ve?amos c?mo hacer para que s?lo el administrador del blog pueda ver ciertos gadgets, y los dem?s lectores no. Usando la misma etiqueta que ocupamos en esa entrada podemos hacer que el blog quede oculto para los dem?s, y as? podemos poner un aviso para decir que el blog est? en construcci?n.
De esta forma mientras cambiamos de plantilla, o hacemos modificaciones al blog, los lectores no podr?n ver nada, s?lo el administrador podr? ver el blog, los dem?s ver?n una imagen que indica que el blog est? en construcci?n.




Para poner este aviso en tu blog entra en la Edici?n HTML de la plantilla, y agrega justo antes de body { esto:
body#layout #construccion {display:none !important;}
body#layout .blog-admin {display:block !important;}
Luego busca la etiqueta:
<body>
Si usas una plantilla del Dise?ador de Plantillas de Blogger entonces debes localizar esta l?nea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de esas dos agrega esto:
<div id='construccion' style='background:#FFF; height:700px;'>
<div style='margin-top:-30px; text-align: center; padding-top:100px;'>
<img border='0' src='URL de la imagen'/></div>


</div>
<span class='item-control blog-admin'>
Ahora busca la etiqueta </body> y justo arriba de ella agrega esto:
</span>
Ya s?lo pon la URL de la imagen que dir? "En construcci?n" y listo.
En color verde puedes modificar el color de fondo, la altura de la pantalla, y la distancia de la imagen desde arriba.

Pero una imagen no es lo ?nico que puedes poner, de hecho puedes poner cualquier elemento aceptable, como un texto, un video, o un juego en flash para que tus lectores se entretengan mientras terminas de construir el blog. Cualquiera de esos elementos debes ponerlos antes del </div> en color azul.

De esta forma mientras hagas cambios importantes en el blog los lectores no ver?n todo el tiradero. Pero toma en cuenta que, aunque nosotros s? podremos ver el blog, no podremos verlo completo desde la Vista Previa, y si entras a tu blog mientras tengas el aviso "En construcci?n" primero ver?s el mismo anuncio que ven tus lectores, y bajando la p?gina aparecer? todo tu blog.