Nuevamente en este articulo deseo compartir Botones que son necesarios en nuestros blogs para redirigir a paginas de demostracion o pagina de descarga.Estos botones convierten un enlace simple a uno mas atractivo.Para ver una demostracion de lo que les digo pon el cursor de tu mouse(raton) en los boton de abajo.Chequea Articulo Como Añadir Widget de Botones Sociales
Estos botones usan el codigo CSS3 asi que el navegador de IE no lo soporta o no se ejecuta.Estos botones trabajan en casi todos los demas navegadores. Antes de comenzar este proyecto haga una copia de la plantilla.
Aqui el tutorial para añadir estos botones a tu blog de blogger.
1,Entra a tu cuenta de Blogger.
.button {display: inline-block;position: relative;padding: 10px
20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius:
8px;text-decoration: none!important;text-shadow: 1px 1px 0
rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space:
nowrap;vertical-align: baseline;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png');background-position:
bottom left;background-position: bottom left,top right,0 0,0
0;background-repeat: no-repeat;background-clip:
border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-box-shadow: 0 0
1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition:
background-position 1s;-moz-transition: background-position
1s;transition: background-position 1s;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color:
#0f4b6d!important;background-color: #48b5f2;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1)
0,rgba(89,208,244,0)
100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(89,208,244,1) ),to(rgba(89,208,244,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#4fbbf7),to(#3faeeb));}
.blue.button:hover {background-color: #63c7fe;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1)
0,rgba(109,217,250,0)
100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(109,217,250,1) ),to(rgba(109,217,250,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#63c7fe),to(#58bef7));}
.green.button {border: 1px solid #96a37b!important;color:
#345903!important;background-color: #79be1e;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1)
0,rgba(162,211,30,0)
100px),-moz-linear-gradient(#82cc27,#74b317);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(162,211,30,1) ),to(rgba(162,211,30,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#82cc27),to(#74b317));}
.green.button:hover {background-color: #89d228;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1)
0,rgba(183,229,45,0)
100px),-moz-linear-gradient(#90de31,#7fc01e);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(183,229,45,1) ),to(rgba(183,229,45,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#90de31),to(#7fc01e));}
.orange.button {border: 1px solid #bea280!important;color:
#693e0a!important;background-color: #e38d27;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1)
0,rgba(232,189,45,0)
100px),-moz-linear-gradient(#f1982f,#d4821f);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(232,189,45,1) ),to(rgba(232,189,45,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#f1982f),to(#d4821f));}
.orange.button:hover {background-color: #ec9732;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1)
0,rgba(241,192,52,0)
100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(241,192,52,1) ),to(rgba(241,192,52,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#f9a746),to(#e18f2b));}
.gray.button {border: 1px solid #a5a5a5!important;color:
#525252!important;background-color: #a9adb1;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1)
0,rgba(197,199,202,0)
100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(197,199,202,1) ),to(rgba(197,199,202,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#c5c7ca),to(#92989c));}
.gray.button:hover {background-color: #b6bbc0;background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1)
0,rgba(202,205,208,0)
100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png'),
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMXckOgKBevZkfTXUsOPSM9yqPbLO0UWDtgM4WVC6KvlKAd8PvgvMvc96HtOLOIG4b2fJx_4Dgq7fsOqIltt_Cp7xc_7zSFwMjIq_YYDdd3hgIXfF0NBfT2t1tA7atFLnpYIykUrsJW_n/s144/button_bg.png')
,-webkit-gradient(radial,50% 100%,0,50%
100%,100,from(rgba(202,205,208,1) ),to(rgba(202,205,208,0)
)),-webkit-gradient(linear,0% 0,0% 100%,from(#d1d3d6),to(#9fa5a9));}
4.Despues de añadir este codigo Guarde la Plantilla.Luego añada el codigo de HTML donde desee que estos botones aparezcan.
He colocado estos botones de acuerdo al tamaño.Solo tienes que añadirlo en la entrada o articulo o en la plantilla mas bien donde asi le guste.
Chequea Articulo Como Añadir Botones de Redes Sociales a Blogger
HTML Para Botones Grandes
<a class="button big blue" href="Enlace">Nombre de Enlace</a>
<a class="button big green" href="Enlace">Nombre de Enlace</a>
<a class="button big orange" href="Enlace">Nombre de Enlace</a>
<a class="button big gray" href="Enlace">Nombre de Enlace</a>
Html Para Botones de Tamano MEDIUM
<a class="button blue medium" href="Enlace">Nombre de Enlace</a>
<a class="button green medium " href="Enlace">Nombre de Enlace</a>
<a class="button orange medium" href="Enlace">Nombre de Enlace</a>
<a class="button gray medium" href="Enlace">Nombre de Enlace</a>
HTML Para Botones de tamano SMALL
<a class="button small blue" href="Enlace">Nombre de Enlace</a>
<a class="button small green" href="Enlace">Nombre de Enlace</a>
<a class="button small orange" href="Enlace">Nombre de Enlace</a>
<a class="button small gray" href="Enlace">Nombre de Enlace</a>
5.Reemplace la palabras Enlace con su enlace deseado y Nombre de Enlace con el texto que desea escribir en el boton.
Eso es todo. Es tan dificil hacerlo.Que disfruten el diseño de botones.
0 comentarios:
Publicar un comentario