Barra vertical de redes sociales para mi web o blog


Hola amigos bienvenidos a este nuevo pos, hoy te traigo un widget de redes sociales vertical ya sea para blogger, wordpress o html5.

Yo en este caso lo are en blogger, pero en html5 funciona mucho mas genial es muy sencillo de desarrollar para ello solo te dejare el codigo html5 y css3 para que solo copees y pegues en tu web.

1: Paso
Descarga o copea los códigos

Estructura Básica de la barra vertical html5 y estilos css


Paso2
Edita los enlace y copea los de tus redes sociales esto viene en el código html, si puedes leer atentamente ahí en el código hay algo que dice aquí va tu enlace; simpel ahi solo tienes que borrar eso y luego remplazarlo por el enlace de tu red social


nota bien que solo vas a remplazar lo que esta dentro de las comillas  

3:Paso

Abrimos nuestro blog de blogger



Luego abrimos la opción donde dice diseño


Cuando ya hemos entrado en la opción de diseño nos vamos a los archivos que hemos descargado, el primero en abrir sera html5


Bien lo seleccionamos todo y le damos copiar o control+c, luego nos vamos donde dice  Agregar un gadget y donde dice  HTML/JavaScript hacemos clic



Luego que hemos dado clic nos cargara una interfaz como esta


Donde dice contenido vamos a pegar el codigo html5 que copiamos en el archivo que descargaste 


cuando ya los copiado todo el código solamente tienes que hacer clic en guardar y listo ya tienes una buena parte de tus redes sociales, solo faltan unos pocos pasos mas y ahora sigue copiar el código css que descargasteis.

4:Paso
Selecciona todo el código css y copialo 


Luego de haber copiado todo el código css busca la opción que dice tema en la barra lateral izquierda, luego te cargara una interfaz mas o menos a si


Ahora has clic en personalizar y luego te llevara a otra interfaz 


Vas hacer clic donde dice opciones avanzas y te cargar esa interfaz en blanco como un editor de texto, ahí vas a copiar el código css y después harás clic en aplicar al blog 


Y listo ya tienes los gadgets de redes sociales para tu blog solo es cuestión de que los pruebes.

También si no quieres usar todo el código css y omitir los pasos anteriores solamente copea la esta etiqueta: 
<link href='https://cdn.rawgit.com/arauz7/9b7d953da0a58d9e43d7ba734e9e29e2/raw/c2699c5c76a53fcfee7af8a075ac3e7848c5f58b/iconossociales.css' rel='stylesheet'/>

Luego te vas a la opción de plantilla y ya estando ahí seleccionas editar html

Luego que ya has dado clic en editar html te cargara una especie de editor de codigo ahi vas a ir abajo de la etiqueta  de cierre </head> y donde te aparecen varias etiquetas link vas a pegar el codigo anterior que te deje 
y listo todo esta genial ya solo te queda probarlo en el sitio, si no te funciona revisa que estés haciendo los pasos tal y como yo te lo explico 

Si te gusto este post recuerda compartir darnos un me gusta y visitarnos regularmente ya que estamos compartiendo contenido de buena calidad para los bloggeros.




Entradas similares

Cerrado

No se permiten nuevos comentarios