29.10.14

| Tutorial Blogger | Como poner las redes sociales en la parte superior blog

Hola Beautys!!!

Bueno inauguramos sección!!! Esta va de la mano de Ana, ya la conocéis es el 50% de Beauty, ella os traerá soluciones a vuestras dudas con blogger, youtuber, wordpress, redes sociales...y todo aquello que conlleva el tener un blog/canal ya que no solo es ponerse a escribir hay que tener un sitio bonito, para que la gente esté cómoda.


Pues para empezar hoy la sección traemos una petición de una de nuestra colaboradoras de Bea, y ella nos pregunta como se ponen los iconos de las redes sociales en la parte superior del blog como los tenemos nosotras puestos!! Así que como vuestras peticiones son órdenes para nosotras, vamos a ello!!! Al final tenéis un vídeo de como voy haciendo el paso a paso ;) por si alguien se pierde con tanto escrito. Bueno antes de continuar con el tutorial os recomiendo que hagáis un guardado de la plantilla del blog!!!Ya que vamos a modificar el código HTML y claro, si nos equivocamos al seguir los pasos LA HEMOS ARMADO!!! así que os hago antes un minitutorial de como guardar una copia de nuestra plantilla!!!Os parece? Vamos a ello

Vamos a Plantilla y en la parte superior derecha pone Crear/Restablecer copia de seguridad, le damos ahí y luego a Descargar plantilla completa.

Una vez con nuestra copia de seguridad, ya estamos a salvo!! así que ya podemos empezar el tutorial para poner las redes sociales en la parte superior!!

Iremos a Plantilla >> Editar HTML pinchamos dentro de la plantilla del blog y con el teclado apretaremos ctrl+f para que nos salga dentro de la plantilla en la parte superior izquierda un cuadro que nos ayudará a buscar dentro de la plantilla. En él pondremos esto ]]></b:skin> 

Una vez tengamos localizado ]]></b:skin>  esto dentro de la plantilla, encima de ello pegaremos este código 
/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}
Seguimos en la edición HTML y ahora en el recuadrito que antes nos ayudo a buscar una parte de la plantilla ahora ponemos lo siguiente:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Encima de esta línea escribimos lo siguiente:
<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='URL DEL PERFIL DE LA RED SOCIAL O PÁGINA'><img border='0' src='URL DONDE ESTE ALOJADO EL ICONO'/></a></li>
</ul></div>
Y diréis pero ahí solo hay para poner una red social y vosotras tenéis puestas más!!! Bien para añadir más iconos con más redes sociales o web o lo que sea dentro de ese código antes de </ul></div> añades lo siguiente tantas veces como necesites.

<li class='social_icon'><a href='URL DEL PERFIL DE LA RED SOCIAL O PÁGINA'><img border='0' src='URL DONDE ESTE ALOJADO EL ICONO'/></a></li>


Y ahora si le damos a guardar plantilla!!! y listo!!!! Pero como quizá no se entiende mucho os dejo un vídeo para que el paso a paso sea más fácil de entender!!



¿Qué os parecen este tipo de tutoriales?¿queréis más? 
Si es así dejarnos por aquí peticiones sobre dudas o temas, que queráis soluciones y si sabemos como hacerlo subiremos un post :)

13 comentarios:

  1. A mi este tipo de tutoriales me encantan y me ayudan un montón. La verdad es que desconozco hasta las posibilidades que tenemos en un blog. Me planteo las cosas cuando las veo en un tutorial como este. Muchas gracias por vuestra ayuda!!

    ResponderEliminar
  2. Estoy muy interesada en poner los iconos sociales en la parte de arriba de mi blog. ¿Este tutorial también sirve para wordpress o solo para blogguer?

    ResponderEliminar
  3. esto si que sirve de ayuda! muchas gracias por compartirlo con nosotros!
    www.sweetlive.es

    ResponderEliminar
  4. Muchas gracias, es de gran ayuda.
    Http://mirincondequitaypon.blogspot.com.es

    ResponderEliminar
  5. Un tutorial estupendo, super útil y de gran ayuda para aquellas que no sabemos como hacerlo
    Muaks

    ResponderEliminar
  6. De gran ayuda, yo quiero saber como dividir el blog en secciones.
    http://laeleganciaestaenlonatural.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. En secciones como?enséñanos algun ejemplo por fi

      Eliminar
  7. Me gustan este tipo de tutoriales, nos viene bien para las que estamos "verdecillas" en estos temas.

    ResponderEliminar
  8. Llegasteis a subir vuestros iconos a algún lado?
    Besinos!

    ResponderEliminar
    Respuestas
    1. No los hemos subido, pero si quieres unos avisanos ;)

      Eliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Muchas gracias por compatir este tutorial, me ha venido fenomenal, ya que buscaba el poner las redes sociales en la parte superior.

    ResponderEliminar