In DISEÑO WEBby

Botón flotante de WhatsApp en HTML

Aprende a poner un botón de whatsapp en tu página creada con código HTML y CSS, el módulo ya esta listo par agregar y poner el código del botón solo descarga los recursos y acomodalos en tu sitio web.

Después de descargar los recursos, es necesario revisar que cuentas con un documento html que es el icono y función del botón de whatsapp y un CSS que son los estilos del botón flotante, colores y posiciones. ¿Ya cuentas con los archivos?. Perfecto ahora si iniciemos.

1.- Vamos a ubicarnos con el index.html de nuestro botón de whatsapp, abrelo y copia todo el código y muevelo al index.html de tu página.

2.- Los archivos CSS, cámbialo de nombre por ejemplo whatsapp.css y muevelo a tu carpeta donde tengas los estilos

3.-Vuelve a tu documento .html y abre una referencia buscando tu archivo whatsapp.css.

Listo, el módulo ya tiene que estar activo, si el botón de whatsapp aparece en la parte superior en color gris, es por que no esta agarrando los estilos.

https://www.youtube.com/watch?v=dL6K3UjWgDA
In DISEÑO WEBby

Botón Dínamico de WhatsApp en HTML

Aprende a poner un botón Dínamico de whatsapp en tu página creada con código HTML y CSS, el módulo ya esta listo par agregar y poner el código del botón solo descarga los recursos y acomodalos en tu sitio web.

 

Descarga los recursos

 

 

Al descargar los recursos tienes que tener estos recursos:

1.- whats.css y whats2.css (Son 2 archivos css que serán los estilos)
2.- index.html (página y contenido html)
3.- script2.js (Este lo volvera dínamico)
4.- Una imagen que aparecerá

Ojo, no funciona ni con Blogger ni con Google Site ya que por obvias razones no te deja modificar el código de tu sitio, dicho esto ahora si empecemos.

Primero es necesario mencionar que cada archivo es recomendable ponerlo en una carpeta, yo lo dejo todo junto para que sea fácil descargarlo. Por ejemplo WHATS.CSS Y WHATS2.CSS deberán de ir en una carpeta llamada CSS y modificar el index.html que la referencia no sea WHATS.CSS que sea CSS/WHATS.CSS es decir carpeta y archivo. Adjunto un vídeo donde se explica como agregarlo a tu sitio web creado en html

https://www.youtube.com/watch?v=SsFzfcoTVrI
In DISEÑO WEBby

Barra social vertical

Aprende a poner una Barra Social flotante en tu página de HTML, este módulo ya esta creado y listo para agregarlo a tu sitio web y pospuesto para usarlo.

Descarga los recursos

Al descargar los recursos tienes que tener estos recursos:

1.- El código visual del código index.html
2.- Tres documentos CSS que son los estilos
3.- Un documento de fuentes para los iconos

Es muy importante que se creen 2 carpetas y se organicen los documentos, esta así ya que muchas personas tienen problemas al descargar en .rar

Después de descargar tendremos todos los documentos en forma de lista, si abrimos el index, la barra social no se va a ver bien, ya que se tienen que crear 2 carpetas y organizar los documentos, la primera carpeta obligatoriamente se debe de llamar FONTS la segunda CSS. en Fonts debe de ir el documento llamado: fontawesome-webfont y en la carpeta CSS: normalize.css y font-awesome.min.css

Ya teniendo nuestro módulo correctamente es hora de pasarlo a nuestro sitio web, para este paso es recomendable ver el vídeo que a continuación pondremos:

In DISEÑO WEBby

CONTADOR DE VISITAS

Aprende a agregar un widget para tu página en wordpress, así tendrás un control de visitas de tus páginas y artículos

Vamos a iniciar, estando en nuestro backend y buscamos la opción plugins y a la pestaña añadir nuevo, buscamos el módulo PAGE VISIT COUNTER lo instalamos y finalmente lo instalamos.
Y el siguiente paso es esperar, unos días después tendrás la facilidad de tener gráficas, contadores de páginas a continuación dejamos algunas captuas de pantalla

In DISEÑO WEBby

Keywords en WordPress

Aprende a agregar palabras clave en WORDPRESS, sin necesidad de instalar un módulo o plugin

Vamos a iniciar posicionándonos en el editor de nuestro tema, para esto vamos a nuestro backend de wordpress

Ya dentro de nuestro editor de temas tenemos que buscar la cabecera del tema tiene como nombre HEADER.PHP si tienes problemas con encontrarlo puedes apretar «ctrl + f » en la barra de búsqueda poner la sección que buscas en este caso header.php

Al tener éxito de encontrar la sección correspondiente, dentro de la etiqueta <head> se debe de poner el siguiente valor o etiqueta: <meta content=»» name=»keywords»> lo dejamos vació para que lo puedas copiar y pegar, dentro de las comillas en content=»palabra clave 1, palabra clave 2″ va tu palabra clave separada por comillas

Si gustas puedes ver nuestro vídeo

In DISEÑO WEBby

Ventana emergente en HTML

Pasos a seguir.

Primero vamos a copiar el siguiente código:

<a href=»javascript:void(0);» onclick=»window.open(‘cambiar.html‘, ‘popup’, ‘top=100, left=100, width=599, height=680, toolbar=NO, resizable=NO, Location=NO, Menubar=NO, Titlebar=No, Status=NO’)» rel=»nofollow»>TEXTO DENTRO DEL URL</a></p>

Después creamos el botón y la página deseada para que aparezca nuestro enlace y nuestra ventana emergente yo por ejemplo hice un un aviso de privacidad

En la captura de pantalla de arriba «Ya adentro de nuestro código html» podemos observar que tenemos que crear una página en html o bien la tenemos que hacer redireccionar a una, en mi caso yo le puse terminos.html más adelante podemos cambiar el ancho «width» y lo largo «height» por ultimo tenemos que agregar un texto a nuestro enlace, también se puede un botón.

In DISEÑO WEBby

Justificar un texto en WordPress

En esta ocasión vamos a aprender a justificar cualquier texto de wordpress, pero normalmente se utiliza para las noticias o los artículos, Son solo 3 pasos los que tenemos que seguir y lo mejor de todo, es que no es necesario instalar ningún plugin.

Primer paso:

Vamos a ubicar un menú en la parte superior y seleccionamos la opción «peronalizar» después vamos a CSS adicional y vamos a crear una clase la cual «llevará un punto al principio» (vean el ejemplo) esta clase puede llevar el nombre que sea en mi caso se llama justificado. abrimos las llaves y ponemos un text-align: justify con punto y coma. de igual forma aquí dejo un texto para que lo copies y pegues en el CSS adicional.

.justificado {
text-align: justify;
}

Publicamos un vídeo paso a paso para que puedas lograrlo, Saludos.

In DISEÑO WEBby

FLIPBOOK | WordPress

En esta ocasión aprenderemos a colocar un FlipBook en nuestro sitio de WordPress utilizando un Widget Gratuito, Vamos a iniciar con los pasos necesarios para lograr nuestro objetivo

1.- Vamos a nuestro catalogo de Plugins y vamos a buscar uno llamado 3D FLIPBOOK y procedemos a instalarlo
2.- Ya instalado vamos a nuestra pestaña de de medios y vamos a cargar el documento pdf y copiamos el URL
3.- Vamos a la pestaña que se nos agrego la cual se llama 3D FLIPBOOK y vamos a ShortCode Generator
4.- Ponemos la casilla en PDF y pegamos el url que previamente copiamos que era del PDF

Ultimo paso: podemos ver como en la parte superior se va a generar un código, este se puede pegar directamente en el editor de página, o con una etiqueta de html o también en elementor, Adjunto un libro y el video en html para una correcta instalación.

[3d-flip-book mode=»fullscreen» pdf=»https://visualmex.com/wp-content/uploads/2020/09/pdf-video.pdf»][/3d-flip-book]

In DISEÑO WEBby

AGREGA un contador de VISITAS en tu PÁGINAS WEB 🥇

En este artículo aprenderemos a agregar un contador en nuestra página web, puede ser en html o puede ser en wordpress, lo primero es acceder a esta  página

https://www.websmultimedia.com/contador-de-visitas-gratis

 

 

El siguiente paso es seleccionar el contador de nuestro agrado darle en el botón de descargar

Nos pedirá un valor inicial pueden poner el número de su agrado.

 

 

Más adelante, nos preguntará en donde vamos a colocar el contador podemos poner cualquier sitio

 

Por ultimo nos va a generar un código, les recomiendo eliminar el fragmento que esta subrayado para que lo puedan ubicar mejor empieza desde la etiqueta <BR> y termina en la etiqueta </A>

Solo pegan el código en su página web y es todo, pueden hacerlo en su página web de HTML o WORDPRESS, para más fácil dejo un video con la explicación a detalle.

 URL CON LINK https://www.websmultimedia.com/contador-de-visitas-gratis

 

In DISEÑO WEBby

Galería en HTML Y CSS

 

En este video aprenderemos a colocar una galería totalmente responsiva y con efecto light box en nuestra página web, dejo en claro que el Widget o módulo esta listo para descargar y colocarlo en nuestra página web, entonces vamos directamente con los pasos necesarios, (Al final del artículo hay un video donde explico a detalle cada paso)

Paso número 1: debemos de descargar los recursos para eso debemos darle clic al botón verde «DESCARGA EL MÓDULO».


Paso número 2: debemos te tener 2 carpetas abiertas una es de nuestro módulo y otro de nuestra página en HTML.


Paso número 3:  si  en nuestra carpeta de HTML ya tenemos un style.css deberemos cambiar el nombre nuestros estilos de la galería yo le puse galeria.css


Paso número 4:  Tenemos que pasar el archivo CSS del módulo que descargamos a nuestra página en HTML.

Paso número 5:  Ahora viene mi parte favorita incrustar el código para esto debemos de abrir nuestro editor de código en mi caso uso Brackets y  abrimos el index.html de nuestro módulo que descargamos y vamos a pasar primero el css a nuestra página web.

Paso número 6: ahora vamos a pasar el js

Paso FINAL:

Agregar la galería en HTML

Paso extra:

No olvides que en el paso 3 probablemente cambiaste el nombre de style.css, si lo hiciste debes de cambiarlo en el código.

 

De igual forma dejo un video con una explicación a detalle