Botones para descargar con estilo. Botones para descargar con estilo.
Botones para descargar con estilo.
Página 1 de 2 12 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 19
  1. #1
    Botones para descargar con estilo.
    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

    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.
    Vamos con la primera.

    Paso 1: Ir a blogger obviamente luego plantilla

    plantilla.png

    Luego a editar html

    editarhtml.png

    Despues buscamos el siguiente codigo

    bskin.png

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

    Código 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

    Archivo Adjunto 83940

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

    Código 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">
    <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>

    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.

    botones-animados.gif

    botones-modificados.gif

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

    Código 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

    Código 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í

    caja-estilosa.jpg

    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í:

    cuadro sin bordes.png

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

    Código 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í

    botones en cuadro.jpg

    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.


    Código 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í

    letras desordenadas.jpg

    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

    Código 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

    Código 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í

    letras ordenadas.jpg


    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.

    Código 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

    Código 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í

    final final.png

    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:

    Código 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:

    Código 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.

    finafinafinal.jpg

    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
    Imágenes Adjuntas Imágenes Adjuntas
    • Tipo de Archivo: jpg final.jpg (56,4 KB (Kilobytes), 210 visitas)

  2. #2
    Registro
    24-julio-2013
    Ubicación
    Venezuela
    Edad
    29
    Mensajes
    3.606
    Hace mucho que ni entro en mis sitios de blogger, pero están bonitos los botones, buen aporte.

  3. #3
    Gracias, que bueno que te gustaron. =)

  4. #4
    Registro
    29-agosto-2013
    Ubicación
    México
    Mensajes
    117
    Buen tutorial

  5. #5
    Gracias buen tutorial

  6. #6
    Excelente tutorial, voy a probar esos botones

    - - - Actualizado - - -

    Cita Iniciado por WallpapersAnimeSV Ver Mensaje
    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

  7. #7
    Registro
    04-marzo-2012
    Ubicación
    Venezuela
    Edad
    21
    Mensajes
    293
    Buen tutorial lo probare aver

  8. #8
    Cual de los dos específicamente? O ambos?

    - - - Actualizado - - -

    Cita Iniciado por Oliver17 Ver Mensaje
    Excelente tutorial, voy a probar esos botones

    - - - Actualizado - - -



    Se nota que te gustaron jajja quedaron bien en tu web

    - - - Actualizado - - -

    ise todo asi y no me salen los botones
    Recuerda que en la edición del post no se ven hasta que guardas los cambios y vas al blog.

  9. #9
    Registro
    21-agosto-2016
    Ubicación
    Maracaibo - Venezuela
    Edad
    26
    Mensajes
    17
    buen estilo de botones le dan mas vida a los blog

  10. #10
    Botones para descargar con estilo.
    Cita Iniciado por WallpapersAnimeSV Ver Mensaje
    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

Página 1 de 2 12 ÚltimoÚltimo

Temas similares

  1. Tutorial: Botones grandes de "COMPARTIR" para blogger | Estilo UPSOCL
    Tutorial simple y sencillo... Vas a plantilla>editar html Codigos Facebook <a href="javascript:var dir=window.document.URL;var...
    Respuestas: 33
    Último mensaje: 18-dic-2015
  2. Botones para compartir al estilo sharethis.com
    Amigos, en mi sitio tengo botones para compartir de sharethis.com iba todo muy bien hasta que me di cuenta que al compartir aveces tiene problemas...
    Respuestas: 2
    Último mensaje: 09-ene-2014
  3. Plantillas para Blogger estilo "Magazine" para descargar gratis
    hola amigos de FB, hace unos días encontré este sitio con plantillas para blogger del estilo “magazine” y la verdad que se ven muy buenas, muchas...
    Respuestas: 13
    Último mensaje: 26-dic-2013
  4. Hice unos botones para el indice, estilo WINDOWS XP
    Bueno eso mismo, me gustaria compartir estos botones que hice Bueno, les dejo el archivo ZIP, son nada mas los botones que van arriba de todo en...
    Respuestas: 0
    Último mensaje: 05-ene-2004

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •