Monday, March 31, 2014

Pronto!: Plantilla para Blogger

Descargar descargas
Nombre:Pronto!
Autor:Ciudad Blogger
Compatibilidad:Chrome Firefox Safari Opera Internet Explorer9,10,11
Caracter?sticas:Plantilla temporal para Blogger, 1 columna, Responsive Web Design, HTML5, Indicador de cuenta regresiva, Personalizable desde el Dise?ador de Plantillas, Gadget de suscripci?n, Botones de redes sociales.
Incluye:Plantilla XML, Instrucciones de instalaci?n, Licencia



Pronto! es una plantilla temporal para Blogger ideal para quienes est?n por lanzar un blog, est?n en el proceso de cambio de plantilla, o mientras ponen en receso su blog. Y digo que es temporal porque es una plantilla para usar s?lo cierto tiempo ya que incluye un contador de cuenta regresiva que le indicar? a los lectores cu?nto falta para que su blog "salga al aire".

Adem?s de ello, incluye un gadget de suscripci?n al feed para que sus futuros (o actuales) lectores se enteren cuando se ha publicado una nueva entrada y sepan que el blog ya est? en funcionamiento, ya que esta plantilla no muestra ninguna entrada, pues su fin es otro al tradicional.

Esta plantilla est? escrita en HTML5 y tiene dise?o web adaptable, es decir, que se adapta a distintas resoluciones de pantalla, y ha sido probada con �xito en los navegadores principales con sus ?ltimas versiones.

Personalizaci?n:
Si los colores de la plantilla no son de tu gusto no te preocupes, puedes entrar en Plantilla | Personalizar
Ah? podr?s cambiar los colores de la plantilla, dentro de la secci?n Avanzado.

La imagen de fondo la puedes cambiar por otra sustituyendo esta URL que se encuentra en la Edici?n HTML:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqI1GzpUjtfNTc76UfYsEbxJJvAKRxWGl9tFdmJ_4Npjpe-mTlukp3FrP625SQx-omjS4TUGaGRnaiukEj0C9ZtwqNbWPxbST5qQn3WZstMJgKJKLgbT2IZ1BNzqmXDTS2w1eGgnEfFd8/s0/venecia.jpg

La fecha del contador se modifica en esta ?rea:
// Settings
$('#prontoCountdown').timeTo({
timeTo: new Date(new Date('Jun 11 2014 10:00:00 GMT-0600 (CST)')),
displayCaptions: true,
fontSize: 75,
fontFamily: 'Metrophobic',
lang: 'en',
captionSize: 13
});

Si quieres cambiar a espa?ol las palabras "days", "hours", etc. cambia lo que est? en negrita por sp
La fecha del contador se cambia en la parte en color rojo. Deber?s poner primero el mes en ingl�s, usando las tres primeras letras de la palabra: Jan, Feb, Mar, Apr, Jun, Jul, Aug, Sep, Oct, Nov, Dec
Luego el d?a, despu�s el a?o, y a continuaci?n la hora en formato de 24 horas. Por ?ltimo establece en GMT el huso horario que tengas, en el ejemplo est? GMT-0600 que es el correspondiente a M�xico, hora del centro.

La caja de suscripci?n es el mismo gadget que Blogger ofrece. Si ya usas Feedburner aseg?rate de tener activada la suscripci?n por correo electr?nico.
Dando click en Editar al gadget de Suscripci?n podr?s a?adir o editar la URL de tu feed de Feedburner

La plantilla incluye ?conos de las principales redes sociales, para a?adir el enlace a cada uno de ellos localiza esta parte:
<div class='share-wrapper'>
<a href='#'>
<span class='fa fa-facebook'>
</span>
</a>
<a href='#'>
<span class='fa fa-twitter'>
</span>
</a>
<a href='#'>
<span class='fa fa-google-plus'>
</span>
</a>
<a href='#'>
<span class='fa fa-pinterest'>
</span>
</a>
<a href='#'>
<span class='fa fa-youtube'>
</span>
</a>
</div>
Cambia los signos de gato # por la URL que corresponda.

Y eso es todo. Aunque no es una plantilla nada convencional espero que a alguien pueda serle de utilidad para alg?n proyecto con el que quieran generar expectativa.
Recuerda que se trata de una plantilla temporal, as? que cuando haya terminado la espera (o el contador llegue a su fin) deber?s cambiar la plantilla por la que desees.

(17/abr/2014) ACTUALIZACI?N: Se han corregido diversos errores, entre ellos el problema que a algunos no les aparec?a la imagen de fondo y el contador.

Monday, March 24, 2014

C?mo hacer que el gadget de P?ginas se haga flotante al bajar el scroll



Hace alg?n tiempo vimos c?mo poner unos botones para compartir que se detienen y flotan al bajar la p?gina. Esta vez usando el mismo script conseguiremos el mismo efecto pero con el gadget de P?ginas. Lo que hace este c?digo es que al bajar el scroll de la p?gina el gadget de P?ginas flota y se mantiene visible, y una vez que se sube el scroll de la p?gina el gadget toma de nuevo su posici?n original.
En este blog de pruebas puedes verlo funcionando, sube y baja por la p?gina para ver c?mo se comporta el men?.

Para colocarlo en tu blog entra en Plantilla | Edici?n de HTML y antes de </head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$(function() {
var $flotarMenu = $("#PageList1"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '880px', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
#PageList1 {
width:880px; /* Ancho del gadget de P?ginas */
background:#fff; /* Color de fondo del gadget */
z-index: 99;
}
</style>
?Qu� hay que tener en cuenta si decides usarlo?
Si ya tuvieras jQuery omite la primera l?nea en color gris. Y si usaras Scriptaculous/Prototype deber?s hacer unos cambios.

Lo que est? en color rojo es el ID del gadget de P?ginas, as? que aseg?rate que el ID de tu gadget sea el mismo que el que se muestra en el c?digo, ya que algunas veces puede variar a #PageList2, #PageList3, etc. si as? fuera s?lo cambia lo que est? en rojo por tu verdadero ID.
Incluso puedes usarlo con cualquier otro men?, s?lo tendr?s que cambiar lo que est? en rojo por el ID de tu men?, aunque seguramente tendr?s que a?adir algunos estilos extras debajo de <style>

En color azul se establece el ancho del gadget. Si ves que queda muy angosto o muy ancho ah? es donde deber?s moverle.

Si usas la plantilla Fant?stico, S.A. (Awesome Inc.) sabr?s que el men? cubre todo el ancho de la pantalla, as? que quienes usen esa plantilla deber?n usar este c?digo en lugar del anterior:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(function() {
var $flotarMenu = $(".tabs-outer"),
$window = $(window),
offset = $flotarMenu.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarMenu.css({'position' : 'fixed', 'width' : '100%', 'top' : '0px'});
} else {
$flotarMenu.css({'position' : 'relative', 'top' : 'auto'});
}
});
});
//]]>
</script>
<style>
.tabs-outer {
width:100%;
background: url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_groovy.png) repeat scroll 0px 0px #000; /* Color de fondo */
z-index: 99;
}
</style>
En este caso no hace falta verificar el ID del gadget ni cambiar el ancho del gadget, pero en caso de que lo requieras puedes cambiar el color de fondo modificando lo que est? en negrita.

Como has podido ver la instalaci?n es de un solo paso y no hace falta hacer nada m?s excepto retocar algunos estilos en caso de ser necesario; y el resultado adem?s de ser muy llamativo puede ser muy pr?ctico para tus visitantes y para ti, sobre todo si quieres que tus lectores tengan siempre visibles y a la mano los enlaces de tu men?.

Wednesday, March 19, 2014

5 atractivos dise?os para el Formulario de Contacto de Blogger


Una de las novedades que me perd? fue el gadget de Formulario de Contacto de Blogger, un formulario con el que nuestros lectores pueden ponerse en comunicaci?n privada con nosotros sin necesidad de que ellos tengan que abrir el correo. El gadget por s? solo es ?til, y aunque no tiene opciones me parece que incluye los campos m?s b?sicos y suficientes que la mayor?a de los bloggers necesita.

La ventaja de este gadget es que no tenemos que depender de servicios externos que luego nos limitan con un n?mero mensuales de env?os y nos obligan a mantener visible su link.
La desventaja es que su dise?o es demasiado simple, y tal vez esa sea una raz?n por la que muchos usuarios no se atreven a usarlo.

La buena noticia es que esa misma simplicidad de su dise?o permite que podamos modificarlo a nuestro gusto y adaptarlo a nuestra plantilla.

Ya saben que no soy muy bueno con el dise?o, no obstante ayer dedicando una horas realic� estos ejemplos con los que se podr?n dar una idea de la manera como podemos transformar radicalmente estos widgets y pasar de los simple a lo llamativo.

Son 5 dise?os, y el c?digo est? listo para copiar y pegar. Primero deber?s tener el gadget del Formulario, si a?n no lo tienes entra en Dise?o | A?adir un gadget, se abrir? una ventanita, del men? de la izquierda selecciona M?s gadgets y ah? elige Formulario de contacto.



Ya que lo tengas en tu blog entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> pega el c?digo del estilo del formulario que prefieras. Guarda los cambios y listo.




Estilo B?sico

/* Formulario de Contacto, Estilo B?sico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
float: left;
padding: 10px;
background: #d5dde6;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #4a7694;
border: none;
}


Estilo Postal

/* Formulario de Contacto, Estilo Postal
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9Aq7Ob90VLnIGMe10xBPktVRwzl3oq8brkXgKQLsBiW1GXBDp9IweGNj7RWG9_nt2cup3Ae2ccJ2ZjckCXdxSbz_czUiwfKYe4guzMfRMigV0stpX0xpHqYu8-ttkotkuovCAhIXMwc8/s74/postal.png);
color: #000;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Estilos del contenedor interno */
.contact-form-widget div.form {
background: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS52Rs9ge8KmHS5M4DgDXZVm7lI4x90oNxEFQfM2YTca1AmSf5nC-3a2OljXM4bWcdQVKP0mrg8wQ_LymakuuEz5o6GiANn9e2GtcNbncnelWLT90NlLD1njTaP7TCHvrfVwSkWQdqHN6B/s133/stamp.png);
background-repeat: no-repeat;
background-position: 95% 85%;
padding: 1px 10px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
width: 60%;
max-width: 60%;
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #28597a;
padding: 2px 5px;
border-radius: 5px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #a14248;
border: none;
}


Estilo Negro Lim?n

/* Formulario de Contacto, Estilo Negro Lim?n
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border:none;
background: #282828;
border-bottom: 35px solid #98bd3c;
color: #98bd3c;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #98bd3c;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #282828;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #F9D423;
color: #282828;
border: none;
}


Estilo Girly

/* Formulario de Contacto, Estilo Girly
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #d44897;
border-bottom: 10px solid #d44897;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEbbUrH4mRcHdlWKRAB-RoSt6AlKgG-cl2OLYDQi74zCHWsTMpKw5NeS4AELv0v0Ug6Zo6WX5TJtPRamRNoIe5D0EdG_RrZ-nbdKYrVwFPX3dXhyM6DEyADtBRlxrOO8166tFp2Xv86jj/s55/pink.png);
color:#424242;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
border-radius: 18px;
}
/* Estilos del contenedor interno */
.contact-form-widget:before {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7OaDAcZlLTENYd-8XBy18ncmDQxIvonD40SsHZtAKU9-Yr-sZC5njiec-R7-rEtYDOu__s_wyGGZSAl5TbJ8wCtY5xIGaUu9SySnwFR0n1-uaoaRlLOe_gdY9S9tHEWo2-RAwe8IbfQCp/s160/lazo.png);
background-repeat: no-repeat;
background-position: 100% 0;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 25%;
max-width: 35%;
height: auto;
background: #d44897;
padding: 2px 5px;
border-radius: 2px;
border: none;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #d1f6ff;
color: #424242;
border: none;
}


Estilo Met?lico

/* Formulario de Contacto, Estilo Met?lico
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 280px;
margin: 0 auto;
margin-bottom: 25px;
padding: 10px;
border-top: 35px solid #424242;
border-bottom: 25px solid #424242;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ac0T_lLDHCenSb75OsBVtsI9awopPC0_pz08f7CekSvTeEAyvDAwnvfvO_tQhZuowxYPSKSxln0GziOVTo9RBiI5JP_pDioFE3hgwFFa20G5u7raHsBm2fbQ13FsV_mt0QLyS5R6mQz3/s128/metal.gif);
color:#424242;
text-shadow: 1px 1px 1px #FFFAFB;
box-shadow: -6px 6px 6px 0px rgba(50, 50, 50, 0.65);
border-radius: 18px;
float: left;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
box-shadow:inset 1px 1px 5px 1px #808080;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
}
/* Bot?n de enviar */
.contact-form-button-submit {
width: 40%;
max-width: 40%;
height: auto;
border: none;
border-top: 1px solid #9c9c9c;
background: #424242;
background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#575757));
background: -webkit-linear-gradient(top, #424242, #575757);
background: -moz-linear-gradient(top, #424242, #575757);
background: -ms-linear-gradient(top, #424242, #575757);
background: -o-linear-gradient(top, #424242, #575757);
padding: 2px 5px;
border-radius: 8px;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #fff;
font-size: 13px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
margin-bottom: 10px;
float: right;
}
/* Bot?n de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #424242;
color: #ccc;
border: none;
}

En color verde he puesto a qu� ?rea pertenece cada grupo de estilos por si alguien le quiere modificar algo, o por si alguien se anima a hacer sus propio dise?o.
En todos los casos el ancho m?ximo del gadget se controla en esta parte: max-width: 280px;
Toma en cuenta que algunos estilos al ser CSS3 podr?an no verse de la misma manera en todos los navegadores, sobre todo en Internet Explorer.

Espero que les gusten y los disfruten.

Monday, March 17, 2014

Gracias por esperar

Pas? casi un a?o desde que hicimos este largo par�ntesis tanto en el blog como en las redes sociales. Y en estos meses han habido varias novedades de Blogger que al menos yo me he perdido, pero seguramente muchos de ustedes han de estar muy familiarizados.

S� que muchos de los lectores asiduos a este blog nos siguen visitando, lo s� porque aun cuando no he podido publicar nuevas entradas, s? he podido leer y responder sus comentarios. Y debo decirlo, los he extra?ado mucho, con todo el coraz?n.

Quiero agradecerles por su paciencia, su apoyo, sus ?nimos, y su entera participaci?n, sobre todo a quienes desinteresadamente ayudaron a otros usuarios a resolver sus dudas tanto en el blog como en Facebook, a ellos un agradecimiento muy especial.

Y como ya saben que soy de pocas palabras no dir� m?s, ya que tenemos que ponernos al d?a aunque sea poco a poco. Porque Ciudad Blogger est? de vuelta.