¿Cómo estamos hoy? ¿todo bien?
pues nada yo ando por aquí haciéndoos un tutorial que espero que sea la mar de molón.
¿Cómo poner una barra social?
Pues la verdad es que no es complicado pero sí que hay que tener nociones de programación, al menos unas poquitas, para poder hacerlo.
Espero que os guste ;)
¿qué es una barra social?
Una barra social es un apartado de nuestro blog, página o cualquier otro site donde están accesibles todos los enlaces a nuestras redes sociales:
Basicamente lo que tengo un poco más arriba :)¿Cómo podemos hacer una barra social?
Necesitamos una cajita HTML para poder hacer esto, y es que al final esta barra social no es más que imágenes monas con un enlace.
Una imagen
Las imágenes en HTML se insertan de la siguiente manera:
<img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/Instagram-icon_zpstqbzo23b.png" width="60" height="60"/>
Donde tenemos:
img -> etiqueta de imagen
src -> source -> Lugar donde se encuentra la imagen, tiene que ser un sitio online con lo cual necesitaremos un servidor de imágenes. Yo desde hace mucho tiempo utilizo photobucket que es gratuito.
Por último tenemos width y height que no son más que ancho y alto de la imagen, estas medidas se ponen en píxeles, con lo que es mejor pone una medida estandar e ir modificando hasta que veamos que el tamaño que hemos puesto cuadra con todo nuestro diseño.
Un enlace
Para añadir un enlace se hace lo siguiente:
<a href="https://instagram.com/iam_dreamland/"> LOQUESEA </a>
Es muy sencillo ya que sólo tienen que poner el href (que es referencia web) o sea donde quieres ir una vez que se clicke.
Donde pone LOQUESEA, realmente es que ahí va lo que sea, si quieres una imagen un texto...
Con lo que ya tenemos nuestro botón con imagen hecho :)
Lo siguiente es centrarlo que en HTML se pone <center> </center>
Pues nada, lo siguiente que hay que hacer es colocarlo en una caja de HTML de nuestro blog y...TODAS LAS ETIQUETAS HTML DEBEN IR CERRADAS <APERTURA> </APERTURA>
Tachán!!
Yo lo que hice fue decorarlo un poco con unas imágenes que pegaban con el blog y una barras laterales para delimitarlo :) Os dejo mi código para que le echéis un ojo:
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAYItQfDmkF16ix82wKm78WdS3oUWI0vhyNMRlivpsjtQFSEV0pue_8Xe9UXXki67bWWgIuFOCjpug0U9CuBjvKhqIgeK6pZJgX7cpFGv_0EJiwSVhW4j8C4vtFUyXQIrvq2baSpmN_o7/s0/dec_border.jpg"/></center>Os dejo también estas páginas donde sacar iconos de redes sociales (también podéis buscarlo así en google)
<br/>
<center><a href="https://www.facebook.com/pages/IAM-Sweet-Temptation/167095156823165"><img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/Facebook-icon_zpsnzxpokbk.png" width="60" height="60"/></a><a href="https://twitter.com/iamsweettemptat"><img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/Twitter-icon_zpsv5ipezyw.png" width="60" height="60"/></a><a href="https://plus.google.com/109207039959173407945/posts"><img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/Google-Plus-icon_zpshmppjpyj.png" width="60" height="60"/></a>
<a href="https://www.youtube.com/channel/UCli9ht4QGArIN5RNq36i_cQ"><img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/YouTube-icon_zpsi0rmxj76.png" width="60" height="60"/></a>
<a href="https://es.pinterest.com/iamdreamland/"><img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/Pinterest-icon_zpsm8j83ym0.png" width="60" height="60"/></a>
<a href="https://www.linkedin.com/profile/view?id=AAIAABtB1kQBBVSTqYj8COh1t-qkzB0jyI-4BU4&trk=nav_responsive_tab_profile"><img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/Linkedin-icon_zpswzb7j2mh.png" width="60" height="60"/></a>
<a href="https://instagram.com/iam_dreamland/"><img src="http://i807.photobucket.com/albums/yy353/iamsweettemptation/Instagram-icon_zpstqbzo23b.png" width="60" height="60"/></a>
</center>
<br/>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAYItQfDmkF16ix82wKm78WdS3oUWI0vhyNMRlivpsjtQFSEV0pue_8Xe9UXXki67bWWgIuFOCjpug0U9CuBjvKhqIgeK6pZJgX7cpFGv_0EJiwSVhW4j8C4vtFUyXQIrvq2baSpmN_o7/s0/dec_border.jpg"/></center>
Espero que os guste y si tenéis dudas ya sabéis!!
Un beso y
Sed buenos
0 comentarios:
Publicar un comentario
¡Dime cualquier cosa!