boton de whatsapp sin plugin

boton de whatsapp sin plugin

boton de whatsapp, este fragmento de codigo html va en en el archivo header.php de tu theme de wordpress y la propiedad target _blank para abrir en una nueva pestaña

HTML
//boton flotante Audra
<a href="https://wa.me/51916151112?text=Hola,  necesito informacion" class="floating-whatsapp-button" target="_blank">
  <i class="fa fa-whatsapp"></i>
</a>

//fin boton fltoante Audra

para los estilos se necesita crear un archivo CSS nuevo en tu tema de WordPress, por ejemplo «floating-button.css» y subelo a tu servidor en la carpeta «wp-content/themes/tu-tema-actual/css_audra»

CSS
.floating-whatsapp-button {
    background-color: #25D366;
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    transition: all 0.2s ease-in-out;
}

.floating-whatsapp-button i {
    font-size: 24px;
    line-height: 50px;
}

.floating-whatsapp-button:hover {
    transform: scale(1.1);
}

boton de whatsapp sin plugin
boton de whatsapp sin plugin

Incluye el archivo «floating-button.css» en tu tema de WordPress, agregando el siguiente código en el archivo functions.php de tu tema:

PHP
function enqueue_floating_button() {
   wp_enqueue_style( 'floating-button', get_template_directory_uri() . '/css_audra/floating-button.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_floating_button' );

Asegurate de que la ruta sea la correcta, tambien te recomiendo instalar el plugin de Font Awesome y asi tendras todo su repertoerio de iconos sin la necesidad de instalar el CDN o importar los archivos.

como incluir el cdn de Font Awesome?

incluir Font Awesome en la sección head de tu documento HTML, como se muestra

HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

boton de whatsapp

boton de whatsapp

estos codigos son fueron utilizados para crear el boton flotante que ves en la pagina simple y sencillo de implementar.

Tabla de Contenido

Contenido Adicional

Programacion
Ego Cañari Torres

python matplotlib

python matplotlib es una biblioteca de visualización de datos en Python. Se utiliza para crear gráficos y diagramas en 2D y 3D, y se puede utilizar para representar una variedad de datos, como líneas, barras, histogramas, gráficos de dispersión, gráficos

Leer más »
Diseño web
diseño web
audra

Diseño web2

Diseño web es una disciplina que se encarga de la creación y planificación de sitios web, asegurando que estos sean atractivos, funcionales y fáciles de navegar. El objetivo del diseño web es crear una experiencia de usuario satisfactoria, y es

Leer más »
Las penas del joven Werther
Literatura
Recuerdos de un insomnio

Las penas del joven Werther

Werther es un joven alemán, amante del arte, la literatura y en especial de la naturaleza.  En busca de la constante sensación de la libertad decide mudarse, dejando atrás a su gran amigo Guillermo a quien le escribe constantemente contándole su día a día.                 

Leer más »
optimizar imagenes
SEO
Ego Cañari Torres

optimizar imagenes

Optimizacion de imagenes, tamaño, peso, dimensiones y todo lo que debes saber para publicar tu imagen en la web

Leer más »
Diseño experimental
Estadistica
Eylen Almendra Ortiz Perez

Diseño experimental

El diseño de experimentos es el uso del método científico para producir conocimiento sobre un sistema o proceso, mediante ensayos planificados adecuadamente. Esta metodología se ha establecido como un conjunto de técnicas estadísticas y de ingeniería, que facilitan comprender mejor

Leer más »
Fundamentos de Programacion
Programacion
Ego Cañari Torres

Fundamentos de Programación

Array en JavaScript: Array en Python: Array en Java: Array en C#: Array en PHP: Array en C++: If en los lenguajes mas populares Condicionales if, elseif y else en JavaScript Condicionales if, elseif y else en Java Condicionales if,

Leer más »

4 respuestas a “boton de whatsapp sin plugin”

  1. I have been browsing online more than three hours today,
    yet I never found any interesting article like yours.
    It is pretty worth enough for me. Personally, if all website owners and bloggers made good content as you
    did, the internet will be a lot more useful than ever before.

  2. I was overjoyed to discover this website on Bing; it was just what I was looking for, and I have also bookmarked it to my favorites collection.

  3. Noodlemagazine Nice post. I learn something totally new and challenging on websites

  4. Noodlemagazine This is really interesting, You’re a very skilled blogger. I’ve joined your feed and look forward to seeking more of your magnificent post. Also, I’ve shared your site in my social networks!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *