03 de febrero de 2017 Marc Coiduras

Tutorial WordPress para añadir botón en footer


  • Hola amigos, qué tal la semana? Bueno para hoy tengo un pequeño tutorial WordPress para añadir un botón en el footer.

    Ya sabes, el típico botón fijo con un mensaje tipo “TE LLAMAMOS” o “CONSULTANOS” que al hacer clic en él nos redirige a la página de contacto.

    La verdad que se le puede dar muchas funciones a este pequeño botón.

    Por ejemplo podemos utilizarlo para añadir un código que muestre las últimas noticias o comentarios del blog.

    Tutorial WordPress

    Bueno, este tutorial lo realizó para WordPress pero es simple código HTML5 y CSS3, así que puede exportarse a cualquier plataforma.

    De hecho, en este tutorial vamos a crear una plantilla HTML5, la cual nos servirá para que podamos exportarlo donde queramos.

    ¿Empezamos?

    Creando archivo .html

    Bien, este paso es sencillo. Crea una nueva carpeta en tu escritorio y dentro, crea un nuevo archivo de texto.

    El nombre de la carpeta es irrelevante, pero para organizarnos, vamos a nombrar la carpeta como: PlantillaBtnf.

    Lo mismo con el nombre de archivo, lo nombraremos como: Btnf.html.

    Cuando renombramos el archivo de texto de “nuevo archivo.txt” a “Btnf.html” Windows, nos preguntará si queremos cambiar la extensión.

    Responderemos que Sí.

    Código HTML cabecera

    Bueno, como es una plantilla HTML5 vamos a añadir el código de la cabecera o head.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
    <head>

    Ahora, debajo de la etiqueta <head> vamos a añadir el código CSS para los estilos del botón.

    Este código deberás importarlo o insertarlo allá donde quieres añadir tu botón.

    Si el sitio donde vas a añadir el código CSS ya tiene un archivo .css omite las etiquetas <style> y </stile>

    <style>
    @media (min-width: 480px)
    .msg-fijo {
        width: 150px;
    }
    
    .msg-fijo {
        position: fixed;
        bottom: 0;
        right: 0;
        font-size: 12px;
        line-height: 16px;
        z-index: 1000;
        width: 100%;
        text-align: center;
    }
    
    .msg-fijo a {
        text-decoration: none;
        color: white;
        display: block;
        height: 34px;
        width: 15%;
        padding: 10px 0;
        background: #333;
        border-bottom: 3px solid #40BF70;
        transition: background 200ms linear;
    }
    
    * {
        box-sizing: border-box;
    }
    
    @media (min-width: 544px)
    body {
        font-size: 16px !important;
        line-height: 24px;
        padding-top: 52px;
    	font-family: opensans,Helvetica,Arial,sans-serif !important;
    
    }
    
    html {
        font-size: 10px;
        -webkit-tap-highlight-color: transparent;
    }
    </style>

    Y con esto ya hemos terminado la parte de la cabecera de la plantilla.

    Ahora añadimos la etiqueta </head> para cerrar la cabecera.

    Código HTML body

    Bien, ahora vamos a la parte del cuerpo, donde irá el botón.

    Justo debajo de la etiqueta </head> vamos a colocar el siguiente código:

    <body>
    <div class="msg-fijo" style="display: block;">
      <a href="#" title="Te llamamos" class="llamamos trackevent" data-category="we-call-you" data-label="fixed-tab">TE LLAMAMOS</a>
    </div>
    
    </body>

    Como con el código de los estilos, si vamos a añadir el código del botón en una web, vamos a tener que omitir las etiquetas <body> y </body>.

    Para finalizar vamos a añadir la etiqueta </html> para cerrar el código.

    Nuestra plantilla debería quedar de la siguiente forma:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
    <head>
    <style>
    @media (min-width: 480px)
    .msg-fijo {
        width: 150px;
    }
    
    .msg-fijo {
        position: fixed;
        bottom: 0;
        right: 0;
        font-size: 12px;
        line-height: 16px;
        z-index: 1000;
        width: 100%;
        text-align: center;
    }
    
    .msg-fijo a {
        text-decoration: none;
        color: white;
        display: block;
        height: 34px;
        width: 15%;
        padding: 10px 0;
        background: #333;
        border-bottom: 3px solid #40BF70;
        transition: background 200ms linear;
    }
    
    * {
        box-sizing: border-box;
    }
    
    @media (min-width: 544px)
    body {
        font-size: 16px !important;
        line-height: 24px;
        padding-top: 52px;
    	font-family: opensans,Helvetica,Arial,sans-serif !important;
    
    }
    
    html {
        font-size: 10px;
        -webkit-tap-highlight-color: transparent;
    }
    </style>
    </head>
    <body>
    <div class="msg-fijo" style="display: block;">
      <a href="#" title="Te llamamos" class="llamamos trackevent" data-category="we-call-you" data-label="fixed-tab">TE LLAMAMOS</a>
    </div>
    
    </body>
    </html>

    Conclusión

    Como dije al principio del artículo, este botón tiene infinidades de aplicaciones en nuestro sitio web, depende de ti encontrar su utilidad.

    Espero que este artículo te haya servido de ayuda.



  • Marc Coiduras

    Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
    Zona Web
    Google+
    Reddit
    Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
    Zona movil
    Tagged: , ,
    Artículos relacionados

    About the Author

    Marc Coiduras Hola, mi nombre es Marc Coiduras y soy diseñador web, localizado en Valencia, España.

    Deja un comentario

    CONTACTA CONMIGO PARA CUALQUIER COSA

    Te doy la bienvenida a ponerte en contacto conmigo para obtener más información
    sobre cualquiera de mis productos o servicios.