Tutorial: Diseño de botones estilosos para descargar en tu blog

WallpapersAnimeSV · 2016-08-24T00:26:04-0500

Hola este tutorial surgió por la duda del usuario javierbt de como poner un diseño de botones para descargar de diferentes servidores. A continuación muestro dos imágenes con las dos opciones para botones de descarga, ha muchas más pero solo esas dos puedo hacer, ya que las investigue hace un par de días para ponerlas en mi blog y al final dejaré los créditos =)

Hacer copia de seguridad de la plantilla antes de realizar este o cualquier cambio

Aquí las dos formas

Vamos con la primera.

Paso 1: Ir a blogger obviamente luego plantilla

Luego a editar html

Despues buscamos el siguiente codigo

y Antes de esa linea b:skin pegaremos el siguiente codigo

HTML:

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

Paso 2: Ir al post donde pondrás, tendrás que hacerlo manualmente porque no se otra forma, vas al post luego editar y seleccionas HTML

Ver el archivo adjunto 83940

Luego pegas el siguiente código ya sea al inicio final en medio depende donde quieras que aparezca los botones.

HTML:

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

¡Listo! en el post no se vera más cuando guardes los cambios si lo podrás ver en la página o blog. Pero aquí unos consejos para la edición:

En el gif se ven los colores celeste y naranja, si quieres cambiarlos para que combinen con tu plantilla deberas cambiar los siguientes codigos de colores en el primer codigo que te puse que es antes de la linea b:skin, si quieres cambiar el que es color celeste buscas donde tenga este codigo 0099cc y lo reemplazas por el color que te gusta, supongamos rojo, seria por este FF0000. siempre solo en el codigo que pegaste. Y si quieres cambiar el que es color naranja buscas este efa666 y lo reemplazas por el que quiersa, recuerda que hay otros colores como gris y blanco en el codigo, pero esos no los debes de tocar.

Tambien, como es sitio de descarga, si puedes apreciar en el gif, sale un icono de descarga y otro distinto, si tu quieres que en ambos botones salga el icono de descarga es simple, mira el segundo codigo que te pasé y localiza lo que está en rojo.

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">

Demo
Click here
</a>
<a href="#" class="btn-slide2" target="_blank">

Download
Click here
</a>
</div>

Donde dice fa fa-rocket debes pega fa fa-download para que en ambos salga el mismo icono de descarga

de la misma manera, para cambiar el texto, donde dice demo puedes poner mega y donde dice download mediafire, para que salgan los nombres de los servidores, luego donde dice click here puedes dejarlo así o poner descargar o download o como gustes.

Eso sería todo, para poner los botones y modificar el color y el icono y las letras, aquí una muestra de como me quedaron a mi en comparación con el original, le cambie nombres color y puse el mismo icono de descarga.

Ahora con la segunda opción que es mas sencilla o mas simple, basta con pegar el codigo siempre antes de b:skin

HTML:

.cajaejemplo {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #ffffff;
width: 150px;
text-align: center;
background: #889ccf;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 35px 0px 35px 0px;
-moz-border-radius: 35px 0px 35px 0px;
-webkit-border-radius: 35px 0px 35px 0px;
border: 2px solid #5878ca;
}

Luego de vas al post y seleccionas html y pegas esto

HTML:

<div class="cajaejemplo">
<a href="http://www.google.com/" target="_blank">Mega</a></div>

Cabe recalcar que en href= ira obviamente el link de descarga y en mega puedes poner mega o la palabra descargar como gustes segun lo hagas. quedar algo así

claro que si no te gusta ese estilo y quieres que se vea cuadrado en el codigo de borde colocas 0, yo colocaré 5 porque no me gusta las esquinas sin borde.

.cajaejemplo {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #ffffff;
width: 150px;
text-align: center;
background: #889ccf;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 2px solid #5878ca;
}

y se ve así:

ahora para que quede un poco como en la imagen que tu pones, devemos crear otros dos estilos, uno para donde se ve blanco y el otro negro.

solo copiamos el mismo codigo pero en ves de cajaejemplo pondremos cajaejemplo2, tambien modificaremos el width, en ves de 150 pondremos 350, y por ultimo el color o background pondremos FFFFFF, yo le puse border amarillo, pero si no quieres border le pones border 0 o donde esta el codigo de color le pones siempre blanco para que no se distinga.

.cajaejemplo2 {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #000000;
width: 350px;
text-align: center;
background: #FFFFFF;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 2px solid #FFF300;
}

Pero tambien el codigo en el post lo modificamos y pondremos mas div así.

HTML:

<div class="cajaejemplo2">

<div class="cajaejemplo">
<a href="http://www.google.com/" target="_blank">Mega</a></div>
<div class="cajaejemplo">
<a href="http://www.google.com/" target="_blank">Mediafire</a></div>
<div class="cajaejemplo">
<a href="http://www.google.com/" target="_blank">Putlocker</a></div>

</div>

quedaría así

Es cuestion de ponerle las letras a la par, quitare mega y mediafire y le pondré descargar y a la par le pondré el servidor, a los div le pondre la opcion de style float left a las letras y right a los cuadritos que dicen descargar para que queden a la par.

HTML:

<div class="cajaejemplo2">
<div style="float: left;">Mega</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div style="float: left;">Mediafire</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div style="float: left;">Putclocker</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />

</div>

se mirara así

Como hacemos para que queden a la par bien ordenado? creamos un estilo de caja pero sin border sin color, solo modificando un poco el tamaño.

Es el mismo codigo de la cajaejemplo2 solo que le quito las propiedades border color de fondo y de borde, solo modifico el tamaño, el codigo es este

HTML:

.cajavacia {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width: 70px;
text-align: center;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 0px solid #5878ca;
}

ahora editamos los div en el post, los que contienen las palabras mega mediafire, les agregamos el estilo que acabamo de crear que es la cajavacia y queda así en el post html

HTML:

<div class="cajaejemplo2">
<div class="cajavacia" style="float: left;">Mega</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div class="cajavacia" style="float: left;">Mediafire</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div class="cajavacia" style="float: left;">Putclocker</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />

</div>

se miraría así

ahora solo pondremos el estilo para el ultimo recuadro negro, copias el estilo de la cajaejemplo2 y modificamos el nombre a cajaejemplo3, el fondo a negro, el border a negro, las letras las ponemos a blanco, el codigo sería así del estilo de la ultima caja.

HTML:

.cajaejemplo3 {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #FFFFFF;
width: 400px;
background: #000000;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 2px solid #000000;
}

ahora solo falta en el post modificar el codigo html, agregamos un div que encierrre a todo lo que habíamos hecho, y la clase o estilo seria el ultimo y quedari cajaejemplo3

HTML:

<div class="cajaejemplo3">
Nombre del archivo<br />

Link:<br />

Información: <br />

<div class="cajaejemplo2">
<div class="cajavacia" style="float: left;">Mega</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div class="cajavacia" style="float: left;">Mediafire</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div class="cajavacia" style="float: left;">Putclocker</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />

</div>
</div>

se miraria así

Si aun no te salió bien, solo borra todo lo que has hecho, o restablece tu plantilla, buscas el codigo b:skin como está en la imagen al inicio y pegas esto:

HTML:

.cajaejemplo {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #000000;
width: 150px;
text-align: center;
background: #55A7DA;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 0px solid #55A7DA;
}


.cajaejemplo2 {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #55A7DA;
width: 350px;
text-align: center;
background: #FFFFFF;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 0px solid #D9DBDC;
}

.cajavacia {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width: 70px;
text-align: center;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 0px solid #5878ca;
}

.cajaejemplo3 {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #55A7DA;
width: 400px;
background: #363636;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 2px solid #000000;
}

Ahora vas a editar un post o creas uno nuevo de prueba como tu quieras, y escribes lo siguiente, siempre recordando que lo debes poner en la opción html del post:

HTML:

<div class="cajaejemplo3">
Nombre del archivo: Nombre del Archivo<br /><br />

Información: Aquí pondrás información sobre el archivo<br /><br />

Link: Aquí es un texto para decir donde descargar<br /><br />

<div class="cajaejemplo2">
<div class="cajavacia" style="float: left;">Mega</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div class="cajavacia" style="float: left;">Mediafire</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />
<div class="cajavacia" style="float: left;">Putclocker</div>
<div class="cajaejemplo" style="float: right;">
<a href="http://www.google.com/" target="_blank">Descargar</a></div><br />

</div>
</div>

Y listo ahí lo tienes.

Espero te sirva este tutorial, perdó por los errores de ortografía y demás pero ya es noche y debo ir a dormir xD tambien puedes usar este ultimo metodo para crear botones de redes sociales para compartir, solo jugando con el tamaño y color.

aquí los créditos de donde aprendí a hacer estos botones.

Primera forma aquí

Segunda forma aquí.

La ultima imagen que saldrá despues de este texto no se porque rayos sale si borro todo lo que sigue pero sigue apareciendo =S

Lord Pepe · 2016-08-24T00:29:41-0500

Hace mucho que ni entro en mis sitios de blogger, pero están bonitos los botones, buen aporte.

WallpapersAnimeSV · 2016-08-24T00:43:55-0500

Gracias, que bueno que te gustaron. =)

User72 · 2016-08-24T01:02:31-0500

Buen tutorial :encouragement:

Helion · 2016-08-24T02:28:21-0500

Gracias buen tutorial 😀

Yorwin Ramos · 2016-08-24T05:15:36-0500

Excelente tutorial, voy a probar esos botones 😱nthego:

- - - Actualizado - - -

WallpapersAnimeSV dijo:
Gracias, que bueno que te gustaron. =)

Se nota que te gustaron jajja quedaron bien en tu web

- - - Actualizado - - -

ise todo asi y no me salen los botones :fatigue:

OscarJ · 2016-08-24T07:34:02-0500

Buen tutorial lo probare aver :encouragement:

WallpapersAnimeSV · 2016-08-24T07:57:11-0500

Cual de los dos específicamente? O ambos?

- - - Actualizado - - -

Oliver17 dijo:
Excelente tutorial, voy a probar esos botones 😱nthego:

- - - Actualizado - - -

Se nota que te gustaron jajja quedaron bien en tu web

- - - Actualizado - - -

ise todo asi y no me salen los botones :fatigue:

Recuerda que en la edición del post no se ven hasta que guardas los cambios y vas al blog.

Joel Redactor · 2016-08-24T10:16:03-0500

buen estilo de botones le dan mas vida a los blog:rolleyes3:

Yorwin Ramos · 2016-08-24T10:29:58-0500

WallpapersAnimeSV dijo:
Cual de los dos específicamente? O ambos?

- - - Actualizado - - -

Recuerda que en la edición del post no se ven hasta que guardas los cambios y vas al blog.

Mira como quedo en mi blogs osea solo letras... - Oliver Pay Voy a borrar la entrada en 24 Horas 😀

wmasterhelp · 2016-08-24T10:51:10-0500

Buen aporte :encouragement:

WallpapersAnimeSV · 2016-08-24T20:51:45-0500

Oliver17 dijo:
Mira como quedo en mi blogs osea solo letras... - Oliver Pay Voy a borrar la entrada en 24 Horas 😀

He quitado el codigo para los estilos de mi plantilla, y me sale igual que tu, puedo confirmar que no has colocado el codigo de estilos correctamente, o por algún motivo algo interfiere, puedes tomar una captura donde termina el codigo de los estilos? a ver en que posición lo pegas?

Onixa Guaina · 2016-08-25T05:55:16-0500

Lo probare a ver como me va, buen tutorial

Yorwin Ramos · 2016-08-25T06:07:57-0500

WallpapersAnimeSV dijo:
He quitado el codigo para los estilos de mi plantilla, y me sale igual que tu, puedo confirmar que no has colocado el codigo de estilos correctamente, o por algún motivo algo interfiere, puedes tomar una captura donde termina el codigo de los estilos? a ver en que posición lo pegas?

[MENTION=167919]WallpapersAnimeSV[/MENTION] creo que lo ise como sale en el tutorial...

WallpapersAnimeSV · 2016-08-25T09:18:47-0500

Editado

Oliver17 dijo:
[MENTION=167919]WallpapersAnimeSV[/MENTION] creo que lo ise como sale en el tutorial...

Ver el archivo adjunto 84012

Hagmos dos cosas, borra esa linea en blanco y separa el } porque lo tienes así }]]></b:skin> ponlo que quede así

}
]]></b:skin>

Segundo, en el codigo de estilos que pegaste antes de b:skin buscaras esto y lo borraras.

#wrap br {
display: none;
}

Prueba eso, creo que es por la etiqueta br que está dando el problema, de lo contrario, si no funciona, probaremos otro método que siempre tiene que ver con esa etiqueta, pero primero haz eso y espero te funcione.

Yorwin Ramos · 2016-08-25T09:47:08-0500

WallpapersAnimeSV dijo:
Hagmos dos cosas, borra esa linea en blanco y separa el } porque lo tienes así }]=]=></b:skin> ponlo que quede así

}
]=]=></b:skin>

Segundo, en el codigo de estilos que pegaste antes de b:skin buscaras esto y lo borraras.

#wrap br {
display: none;
}

Prueba eso, creo que es por la etiqueta br que está dando el problema, de lo contrario, si no funciona, probaremos otro método que siempre tiene que ver con esa etiqueta, pero primero haz eso y espero te funcione.

Ya lo hice y sigue saliendo igual... el codigo que estoy usando en el post es el correcto cierto...

<div id="wrap">
<a class="btn-slide" href="https://www.blogger.com/blogger.g?blogID=2552325610108167612#" target="_blank">

Demo
Click here
</a>
<a class="btn-slide2" href="https://www.blogger.com/blogger.g?blogID=2552325610108167612#" target="_blank">

Download
Click here
</a>
</div>

WallpapersAnimeSV · 2016-08-25T11:03:51-0500

<div id="wrap">
<a href="#" class="btn-slide" target="_blank">

Demo
Click here
</a>
<a href="#" class="btn-slide2" target="_blank">

Download
Click here
</a>
</div>

- - - Actualizado - - -

Oliver17 dijo:
Ya lo hice y sigue saliendo igual... el codigo que estoy usando en el post es el correcto cierto...

<div id="wrap">
<a rel="nofollow" class="btn-slide" href="https://www.blogger.com/blogger.g?blogID=2552325610108167612#" target="_blank">

Demo
Click here
</a>
<a rel="nofollow" class="btn-slide2" href="https://www.blogger.com/blogger.g?blogID=2552325610108167612#" target="_blank">

Download
Click here
</a>
</div>

Copia y pega eso en el post. Lo tienes diferente.

Yorwin Ramos · 2016-08-26T05:03:20-0500

Sigue saliendo de la misma manera :ambivalence:

- - - Actualizado - - -

WallpapersAnimeSV dijo:
<div id="wrap">
<a href="#" class="btn-slide" target="_blank">

Demo
Click here
</a>
<a href="#" class="btn-slide2" target="_blank">

Download
Click here
</a>
</div>

- - - Actualizado - - -

Copia y pega eso en el post. Lo tienes diferente.

Sigue saliendo de la misma manera

- - - Actualizado - - -

Jeje ya solucione, era la plantillas que por algun motivo no me dejaba usar eso, cambie de plantillas y funciono perfectamente, muchas gracias [MENTION=167919]WallpapersAnimeSV[/MENTION] Saludos

sebalopez · 7 Sep 2016

Buen aporte amigo, gracias!

thesulla · 24 Jul 2017

para wordpress ,,donde puedo sacar el tuto para wp?? slaudos.

Tutorial: Diseño de botones estilosos para descargar en tu blog

WallpapersAnimeSV

Adjuntos

Lord Pepe

WallpapersAnimeSV

User72

Helion

Yorwin Ramos

OscarJ

WallpapersAnimeSV

Joel Redactor

Yorwin Ramos

wmasterhelp

WallpapersAnimeSV

Onixa Guaina

Yorwin Ramos

WallpapersAnimeSV

Yorwin Ramos

WallpapersAnimeSV

Yorwin Ramos

sebalopez

thesulla

Temas similares

Tutorial: Diseño de botones estilosos para descargar en tu blog

WallpapersAnimeSV

Adjuntos

Lord Pepe

WallpapersAnimeSV

User72

Helion

Yorwin Ramos

OscarJ

WallpapersAnimeSV

Joel Redactor

Yorwin Ramos

wmasterhelp

WallpapersAnimeSV

Onixa Guaina

Yorwin Ramos

WallpapersAnimeSV

Yorwin Ramos

WallpapersAnimeSV

Yorwin Ramos

sebalopez

thesulla

Temas similares

Privacidad y transparencia

Privacidad y transparencia