Agregar Iconos Sociales en header

Hola a todos, les traigo una forma muy sencilla de agregar iconos sociales en su foro con un efecto bonito.

Una ves terminado quedará asi:



En el archivo index.themplate.php

Buscamos

Code: [Select]

</head>
y agregamos despues

Code: [Select]

<div class="social_icon">
    <a href="http://www.facebook.com/id-de-su-perfil" target="_blank"><img src="url del icono"></a>
    <a href="http://www.youtube.com/user/Id-de-su-canal" target="_blank"><img src="">url del icono</a>
<a href="[url=http://twitter.com/#]Twitter[/url]!/id-de-su-cuenta" target="_blank"><img src="url del icono" ></a>
</div>
Tengan en cuenta que hay que editar los ID de las cuentas y la url de los iconos que usen


Luego en index.css del theme

agregamos al final

Code: [Select]

.social_icon
{
    position: absolute;
    top: 157px;
    right: 250PX;
}
Pueden ajustar la posición de los iconos con los valores top y right del css.

Cualquier cosa solo pregunten

Es un tip muy sencillo y facil de hacer pero a alguien le puede servir.

Adjunto los iconos que salen en la imagen pero pueden usar los que mas les gusten. 

Saludos

Muy bueno! +1 por compartirlo con la comunidad!

PD: Contestame el mp 

Muy bueno! Gracias por compartir +1!!

Salu2!!

Muy bueno! y con esas imágenes genial!

+1

Pd: Dile que si a Lean, el amor esta en todas partes!

Eh hecho todo a cada paso y no se mustran las imagenes pero. Pero si los links y todo esta correcto y verificado al 100% ¿Porque sera? Uso SMF 2.0

Muéstrame el código donde pones los link de las imágenes y podrías dejar la URL de tu foro para poder ayudarte mejor.

Saludos

Muéstrame el código donde pones los link de las imágenes y podrías dejar la URL de tu foro para poder ayudarte mejor.

Saludos

Mi foro lo tengo en localhost :/ Y el codigo es este:
<div class="social_icon">
    <a href="http://www.facebook.com/pages/Wayserver/172216339476186" target="_blank"><img src="images/facebook.png"></a>
    <a href="http://www.youtube.com/user/wayservercom" target="_blank"><img src="">images/youtube.png</a>
   </div>

Y claro ya eh subido las imagenes a images/

Tienes mal la ruta de los iconos

prueba asi y me dices:

Code: [Select]

<div class="social_icon">
<a href="http://www.facebook.com/pages/Wayserver/172216339476186" target="_blank"><img src="../Themes/default/images/facebook.png"></a>
<a href="http://www.youtube.com/user/wayservercom" target="_blank"><img src="../Themes/default/images/youtube.png"></a>
</div>
cambia "default"  por el nombre del theme que usas

Saludos.

uniz5410
 Gracias uniz ya se soluciono 

ok. de nada..un aplauso no me molesta..(dicen que después los cambiaran por dinero en efectivo por eso lo pido jeje)

ok. de nada..un aplauso no me molesta..(dicen que después los cambiaran por dinero en efectivo por eso lo pido jeje)

Oops ,  Disculpame esa . Ya te di el aplauso

buen aporte!

Gracias mi hermano  estupendo el tuto... pero cuando instale  las  imagenes  me quedaban atras asi que  puse una  linea mas y comparto derrepende muchos tuvieron  mi caso  Gracias +10

Code: [Select]

 
    .social_icon
{
    position: absolute;
    right: 23px;
    top: 64px;
    z-index: 1;
}


Hola, excelente aporte, queda de 10 en el foro.
Tengo una duda, hay manera de que solamente aparesca en el index del foro y no dentro del foro?

Estando en esa posicion no se puede.