El Perro de Papel Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Cómo poner botones interactivos en tu blog

¿Te has fijado en los botones que uso en todos mis blogs de blogger? Como los que puedes ver en la barra lateral de este blog anunciando mis cursos y ebooks para bloggers y diseñadores. Son botones interactivos, yo elijo los colores y escribo el texto, el resto lo hace solito blogger gracias al código que tengo instalado en mi plantilla.


Y eso es lo que voy a compartir contigo hoy. ¡Verás que es muy sencillo! Y usando estos botones reduces el tiempo de carga de tu blog ¿sabes por qué? ¡Exacto! Tardan mucho menos en cargar que las imágenes y como puedes ponerles los colores que quieras, quedan perfectamente integrados en tu diseño.¿Empezamos?

1.- Entra en tu Plantilla HTML. Pincha en cualquier zona dentro del cuadrado del código y abre el buscador interno de blogger pulsando a la vez: Control + F.
2.- Busca:
]]></b:skin>
3.- Justo encima pega el siguiente código:
Botones
---------------------------------
botones genéricos
.button, .button:visited {
background: #222 url(https://lh6.googleusercontent.com/-NNMcmNvfCb4/UsK8V-E3KvI/AAAAAAAAN30/ATPRHM_quRQ/w1-h50-no/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor:pointer
}
.button:hover { el efecto hover
background-color: #111;
text-decoration: none;
color: #FFFFFF;
}
.button:active{   el efecto click
top: 1px;
text-decoration: none;
}
tamaños
 pequeños
.small.button, .small.button:visited {
text-decoration: none;
font-size: 11px ;
}
medianos
.button, .button:visited,.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
text-decoration: none;
}
 grandes
.large.button, .large.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
text-decoration: none;
}
extra grandes
.super.button, .super.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
text-decoration: none;
}
personalizados
.pink.button {  color: #000000background-color: #F78181; text-decoration: none; }
.pink.button:hover{  color: #000000background-color: #F5A9A9; text-decoration: none; }
.blue.button, .blue.button:visited { color: #FFFFFF; background-color: #8FE1D8; text-decoration: none;}
.blue.button:hover{ color: #FFFFFF; background-color: #A0E9E1; text-decoration: none;}
4.- Ahora vamos a ver que podemos personalizar del código:
font-size: marcado en rosa en cada tamaño del botón. Es el tamaño de la letra.
background-color: el color de fondo del botón.
color: el color del texto del botón.
5.- La parte del código donde creamos los botones de diferentes colores es:
Botones azules:
.blue.button, .blue.button:visited { color: #FFFFFF; background-color: #8FE1D8; text-decoration: none;}  color del botón normal
.blue.button:hover{ color: #FFFFFF; background-color: #A0E9E1; text-decoration: none;}  color del botón al hacer click con el ratón
6.- Podemos añadir más colores, por ejemplo, verde:
.green.button, .green.button:visited {  color: #FFFFFF; background-color: #91BD09; text-decoration: none;}
.green.button:hover{  color: #FFFFFF; background-color: #749A02; text-decoration: none;}
7.- Solo tenemos que ir añadiendo el nombre del color de nuestro botón, en mi caso están en inglés (pink, blue, green...) y cambiando los códigos de los colores por los que queramos. Puedes usar esta web para sacar tus códigos:
Códigos colores HEX
8.- Una vez añadido y modificado el código a nuestro gusto, guardamos los cambios y listo.
Ahora, cada vez que queramos añadir un botón en una de nuestras entradas, pasaremos a Vista HTML y haremos lo siguiente:
<a class="large button blue" href="LA URL A LA QUE QUIERAS ENLAZAR" target="_blank">TEXTO DEL BOTÓN</a>
Donde:
large button blue es botón grande azul
Los diferentes tamaños disponibles son:
small button blue    pequeño
medium button blue   mediano
large button blue   grande
super button blue   extragrande
Cambia el color en cursiva por el nombre que hayas dado a tu botón (pink, green...), elige el tamaño que quieras entre los cuatro disponibles ¡y listo! Una vez publicada tu entrada verás tu botón listo para que tus visitas puedan usarlo.¿Te animas a usar botones interactivos en tu blog y contarme qué te parecen?







Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

general medios sociales promocionar tu blog

Cómo poner otros botones para compartir en el blog

Os habréis dado cuenta ya que los iconos para compartir que trae Blogger, son bastante pequeñitos y discretos: Por eso yo los cambié hace ya tiempo por otros que pasan un pelín menos desapercibidos: Tampoco quiero ser "pesada" y poner unos gigantescos, pero esos me parece que se ven lo suficientemente bien como para "recordar" a la gente que pueden compartir mi post en las re ...

internet blog intermedio ...

Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees? 1.- El código que vamos a usar es: <form action="/search" id="buscador" method="get"> <input id="texto" name="q" onblur="if (this.v ...

general artículos blogs consejos para bloggers ...

Cómo poner publicidad en un blog

Si cuentas con un blog al que le estás dedicando bastante tiempo, lo mejor que puedes hacer colocarle publicidad a tu blog para que puedas comenzar a sacar un poco de rendimiento de él. Cómo ya te hemos explicado en otros posts, es posible que saques rendimiento a tu blog por medio de la publicidad que pongas, pero también es cierto que para sacar algún tipo de rendimiento, debes tener un tiempo y ...

Redes sociales Uncategorized Apariencia ...

Botones de click to tweet para tu blog y como ponerlos

Botones de click to tweet para tu blog y como ponerlos en wordpress y blogspot. Tenemos que incitar a nuestros lectores a que compartan nuestro contenido en las redes sociales para darnos a conocer. Una manera es conseguir que compartan nuestros post en Twitter, la mejor manera de hacerlo es mediante los famosos “clic to Tweet”. Existen muchos plugins sociales para Twitter o Facebook   ...

internet blog intermedio ...

Cómo poner la fecha debajo del título en Blogger

Si has visitado mi página de Cursos para Bloggers puede que te hayas fijado en la posición de la fecha de las entadas del blog, centrada debajo del título. Me han llegado varios emails preguntándome una manera sencilla de mover la fecha en Blogger... Y bueno, no sé si será la más sencilla de todas, pero es la que he usado yo y puedo asegurarte que funciona.Mover la fecha debajo del título 1.- Abri ...

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

internet blog básico ...

Poner sombras alrededor del cuerpo del blog

En una entrada anterior vimos como añadir bordes en blogger, a raíz de esa entrada me llegaron algunos emails preguntándome si era posible añadir sombras de colores en vez de bordes... ¡y sí, es posible! Hoy vamos a ver como añadir sombras en Blogger para enmarcar el cuerpo del blog. Si te perdiste la entrada sobre los bordes, puedes consultarla aquí: Añadir bordes en Blogger Pero si no quieres pe ...

avanzado BLOG redes sociales ...

Botones para imprimir, enviar por correo y compartir por Whastapp tus entradas

Dicen que si no estás en las redes sociales no existes y en cierto modo es así, si el posicionamiento web no es tu punto fuerte, crear una comunidad activa y participativa siendo activa en tus redes sociales puede hacer crecer tu blog. Aunque Google es Google. Esta semana he estado de cambios en el diseño del blog, me he centrado en simplificarlo al máximo y hacerlo todo más sencillo. Si te fijas, ...

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

general social

Cómo añadir botones para redes sociales y marketing de contenidos a tu Blog.

Te presento la manera más sencilla y rápida de añadir botones para redes sociales a tu blog, tu página web o cualquier contenido que tengas en Internet. Utilizaremos el servicio AddThis que recientemente ha actualizado su presentación y ha simplificado enormemente la creación de botones para compartir contenido en redes sociales. ¿Qué son los botones para compartir en redes sociales? Hoy día no ba ...