In DISEÑO WEBby

Barra Social Vertical WP

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

Vamos a nuestro Backend de nuestro sitio web, y buscamos el pluging «Float Menú Lite» y escogemos la primera opción donde el autor es:  Wow-Company

Después de instalar el módulo mencionado  observamos que se nos crea una nueva pestaña, esta se llama «Wow Plugings»  buscamos la opción Float Menu y añadimos uno nuevo,
Finalmente solo agregamos los iconos y los enlaces correspondientes y le damos en el botón «Save»

In DISEÑO WEBby

Temporizador HTML

a continuación un botón para obtener los recursos del widget temporizador en HTML ideal para una página de PRÓXIMAMENTE

ya no es necesario que agregues nada solo edítala a tu gusto

Descarga los recursos

Obtén los archivos desde el botón que esta arriba de este texto, la carpeta es por medio de MEGA y contiene: index.html, script.js ,script2.js y style.css  todos los recursos funcionan, entonces lo único que se tiene que hacer es modificar la plantilla a tu gusto, si tienes problemas al editar la plantilla te dejo un video de Youtube  donde edito la plantilla
 
 

In DISEÑO GRÁFICOby

Vectoriza una imagen

Vamos a aprender a vectorizar cualquier imagen en tan solo unos segundos y con solo 3 clics  en esta ocasión vamos a trabajar con Adobe Illustrator AI, entonces para no llegar este post con relleno vamos a pasar con los pasos agregando algunas capturas de pantalla y un video tomando en cuenta todos los pasos de este post.

1.- Vamos a abrir nuestro programa de AI, adentro vamos a abrir la imagen que queremos vectorizar
2.- Esto es opcional podemos crear una copia de seguridad
3.- VAMOS A VECTORIZAR. Selecciona con un clic la imagen a vectorizar, después vamos a la parte superior y buscamos la opción ventana, se va a abrir un menú buscamos CALCO DE IMAGEN, le damos clic y se nos va a abrir una ventana
4.- Vamos a darle clic al icono de la cámara y nuestra imagen se vectoriza de manera automática

In DISEÑO WEBby

#5 Juegos en HTML

Traemos una lista de 5 juegos creados en HTML, listos para descargarlos, editarlos y subirlos a su página web
Nosotros no hicimos los juegos y no nos damos ningún tipo de crédito

1# Tetris: https://mega.nz/folder/BksVgTya#9pMPx_tXVY7fVZDN8qQkrw
2# Pacman: https://mega.nz/folder/BksVgTya#9pMPx_tXVY7fVZDN8qQkrw
3# p0rtal: https://mega.nz/folder/soc2jYJQ#Nct_eSCCjBY7at7zkDA7NA
4# PingPong: https://mega.nz/folder/J8UARAxC#ay-XJUNS7_ZUQWBnoNI9ag
5# FlappyDino: https://mega.nz/folder/gtEGiQII#g5u3Ue94TOGE61E4IZcBNQ

Son 5 juegos sin publicidad para que los descargues directamente, para evitar publicidad en futuras publicaciones, por favor apoyanos suscribiendote a nuestro canal de YouTube, igualmente si gustas puedes ver una vista previa de cada uno para que puedas descargar el juego que más te guste.

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

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

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

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

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

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