]

viernes, 31 de octubre de 2014

Gadget de Páginas se haga flotante al bajar el scroll

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

24 de marzo de 2014 176 comentarios,


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ú.

Formulario de Contacto de Blogger

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

191 comentarios

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/AVvXsEji_S2MqSplGFgVK1Q4Yg_6eqG7Gdg0pH4ixIAwsCKrg-93BQqzL3uBhgK3JH-q-_liZZLuPePaj2TKr8Ku2Dm2A_o6WpB9dGVKWbdDQIsckoK8pzTdFp3bmKkm5nMc6axLDBCOk__EDngg/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/AVvXsEjlyIe6QYWQTQXXUClgMRaoyadkuXSbXuZSKApxlrk0j2uAUneinS2KtzQbZvfHlml7lIgcCO-s4pOxKq-_RMdxY4n44gIbJvCV6bFWzowjbWbqqqUMERN66wl0R4KKA7dYlp30hjDj4ZhO/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/AVvXsEg3fAUtbifdemrdhNOQdCUzOz4IutEfO866IapG7yNAlrzXrTi9gRgQxDJBTBx19xFanCLWl4HFP050F_k6-JmWSfQOys_68zb91a5ITKHAXNxODY3D15ZI_K_YES8qW41fesqoHkYeJGE9/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/AVvXsEgVV-b_5tqgqhU-OKQJ-DiaA8VmRJPcuCshBPVB9iU4zRRKSb9EOwHoMwVXTcolNxpwwKQKtmFZD-yRFgMJUMLLQj_2OXi-6n3TfDZNlTvBSaJ9oJpkI8WvJCsMxs-HSX7rC-2Hao9e6uOE/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/AVvXsEjzOko2lH2TF_V8KozhI1BkbYqcMgiunfzhyYhsusYvfsgNfYYGKRfOtlf5ZtChutgpWQGwGmmrfYxX9x-SL5P4sAQMrud7FZxuZ6HnZGqLvfjX9I4NKuzK4Z57V9rxC_nqsJVnO104tNUj/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.


jueves, 30 de octubre de 2014

BARRA SUPERIOR CON MENÚ

PONER UNA BARRA ARRIBA DEL TODO EN EL BLOG
Bien antes de empezar, contaros que tenéis dos opciones a la hora de usar la barra:
• Menú normal y corriente
• Menú con iconos sociales incorporados

En ambos el proceso es bastante similar, sin embargo lo voy a dividir en dos, en el primero os explico cómo poner la barra normal, y en el segundo cómo poner también los iconos. 

BARRA SUPERIOR CON MENÚ NORMAL

Primero, vamos a instalar el menú en la plantilla de blogger, para ello vamos a Plantilla → Editar HTML (recordad hacer una copia de seguridad!) y buscamos lo siguiente (para buscar en la plantilla pinchamos en cualquier lugar de la misma y pulsamos CTRL + F):

<body

Os saldrá como resultado esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Justo debajo de ella pegamos el siguiente código:

<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='
URL 1'>Nombre 1</a></li>
<li><a href='
URL 2'>Nombre 2</a></li>
<li><a href='
URL 3'>Nombre 3</a></li>
<li><a href='
URL 4'>Nombre 4</a></li>
</ul>
</div>
</div>


Donde tenemos que reemplazar:
• Las URL que queremos poner
• El nombre que va a llevar cada pestaña del menú


Si tenéis más de cuatro secciones, vais añadiendo líneas debajo de <li><a href='URL 4'>Nombre 4</a></li>, que van a ser exactamente igual:
<li><a href='URL X'>Nombre X</a></li>


Vamos que tened cuidado de que siempre se queden estas tres líneas las últimas:
</ul>
</div>
</div>


→ Una vez está hecho esto, guardamos la plantilla y vamos a pasar a darle forma mediante CSS. Si veis el blog, queda todo descuadrado, pero no os preocupéis, porque ahora lo solucionamos.

Lo dicho, vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código. Os he marcado con color todo lo que debéis cambiar y al lado está el comentario de lo que es cada cosa.

[ACTUALIZO: debido a todas las peticiones que me habéis hecho para que se queda fija, he añadido el código las líneas correspondientes para que esto ocurra, si preferís que no se quede fija, las borráis y listo :D]

#barra-superior {
background: #000000;  /*Color de la barra*/
width:100%; 
height:40px; /*Alto de la barra*/
margin:0;

position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
 
}
#menu{
margin:0 auto;
width:920px; /*Ancho del menú dentro de la barra, con este valor sobra*/
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, puede ser center (centrado) right (a la derecha)*/
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}
#menu ul li{
display:block; 
float:left; 
height:30px;
}
#menu ul li a{ 
display:block;  
float:left;  
color:#ffffff; /* Color del texto */
font: 12px 'Arial'; /* Tamaño del texto tipografía que queráis usar*/
text-decoration:none;
padding:12px 20px 0 20px;
}
#menu ul li a:hover{  
background:#000000; /* Color del fondo al pasar el ratón por encima de cada pestaña, yo no quiero que sea diferente, por eso lo tengo del mismo color que la barra*/
color:#ffd0c2; /* Color del texto al pasar el ratón por encima*/
height:20px;
}

Guardamos y ya tenemos nuestra barra menú lista 



El proceso es igual que el de antes, pero primero debemos instalar una fuente de iconos sociales. Esto es un poco engorroso, así que hacedlo con calma y leed bien todo.

Vamos a esta página y lo primero de todo, nos descargamos el paquete de la fuente de iconos sociales pinchando en download.

Abrimos el zip y vamos a descomprimir la carpeta que pone font, que es la que nos interesa.

A continuación, subimos los cuatro ficheros (el de .empty lo podemos borrar) a nuestro sitio. Para esto os recomiendo que uséis dropbox (lo debéis subir a la carpeta public!!)

Ahora vamos a definir esta fuente en nuestra plantilla para que la reconozca, para ello vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código:

@font-face {
    font-family: 'socicon';
    src: url('URL acabada en.eot');
    src: url('URL acabada en.eot?#iefix') format('embedded-opentype'),
         url('URL acabada en.woff') format('woff'),
         url('URL acabada en.ttf') format('truetype'),
         url('URL acabada en.svg#sociconregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Y aquí debéis reemplazar las URL por las que obtenéis de dropbox (pincháis en el archivo con el botón derecho → copiar enlace público). Veréis que estos enlaces acaban con la extensión de cada archivo anterior: .eot, .woff, .ttf y .svg

[Actualizo: si no conseguís de ninguna manera poner bien los enlaces, a continuación os facilito los míos, no los voy a eliminar jamás de los jamases así que no preocuparse :D] 
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.eot
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.woff
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.ttf
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.svg

a continuación pegamos este otro código también en añadir CSS:

.socicon {
    font-family: 'socicon' !important;
}
.socicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'socicon';
  font-style: normal;
  font-size: 15px; /* Tamaño que van a tener los iconos, cambiadlo una vez hayáis instalado la barra*/
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

Y ya por último, vamos a instalar la barraEl proceso es igual que antes, pero el código HTML de la plantilla cambia un poco:

<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='
URL 1'>Nombre 1</a></li>
<li><a href='
URL 2'>Nombre 2</a></li>
<li><a href='
URL RED SOCIAL 1'><span class='socicon'>Nombre red social 1</span></a></li>
<li><a href='
URL RED SOCIAL 2'><span class='socicon'>Nombre red social 2</span></a></li>
<li><a href='URL RED SOCIAL 3'><span class='socicon'>Nombre red social 3</span></a></li>
</ul>
</div>
</div>

También podéis añadir tantas líneas cómo queráis. El código CSS que debéis poner es exactamente el mismo que en el primer caso.


Ocultar títulos de las páginas estáticas

¿cómo ocultar los títulos de las páginas estáticas? Al ser simples páginas el tener un título les da una apariencia de entradas comunes y es justo eso lo que queremos evitar.

El procedimiento es sumamente sencillo y basta usar una condicional que dará la instrucción que cuando se trate de una página entonces el título desaparezca.
Para ocultar los títulos de las páginas sólo entra en Plantilla | Edición de HTML y antes de </head> pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
h3.post-title {
display:none;
}
</style>
</b:if>

Con ese simple y sencillo paso el título de las páginas no se mostrarán.



Quitar títulos de los gadgets:
Poner en el recuadro del título:  <h2/h2>