Barra lateral con enlaces Sociales

Omar G. 27 Jun, 2011, 5:08 pm

Bueno les dejo esta barra lateral que yo uso en mi foro y como la idea no fue totalmente mía si no de Yaldaram por crear un plugin así (por lo menos de allí me base) pues no me molesta compartirlo.

Creo que no hay nada parecido en tutorial pero si en plugins.

Preview:

Pasos:
ACP -> Estilos y plantillas -> Plantillas -> TU_TEMA -> Cabecera - Plantillas -> header

Asta abajo coloca este código:

Código:
<div class="social">

        <a href="http://twitter.com/inusekai" title="InuSekai en Twitter" rel="nofollow"><img src="images/socialicons/twitter_large.png" alt="" title="InuSekai en Twitter" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.9;this.filters.alpha.opacity=90"/></a><br/>

        <a href="http://www.facebook.com/pages/InuSekai/171087752950469" title="InuSekai en Facebook" rel="nofollow"><img src="images/socialicons/facebook_large.png" alt="" title="InuSekai en Facebook" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.9;this.filters.alpha.opacity=90"/></a><br/>

        <a href="http://www.youtube.com/user/InuSekai" title="InuSekai en Youtube" rel="nofollow"><img src="images/socialicons/youtube_large.png" alt="" title="InuSekai en Youtube" class="bottom" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.9;this.filters.alpha.opacity=90"/></a><br/>

            </div>

Cambian inusekai por su nick de twitter, InuSekai/171087752950469 por el id de su pagina de facebook y el ultimo/segundo InuSekai por su cuenta de Youtube.

Claro pueden agregar sus propios enlaces.

En global.css de ese theme colocas esto al final:

Código:
div.social{position:fixed;top:30%;right:0;background-color:rgba(0,0,0,0.9);border:2px solid rgba(255,255,255,0.9);border-right:0;-webkit-border-radius:0;-webkit-border-top-left-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius:0;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-radius:0;border-top-left-radius:5px;border-bottom-left-radius:5px;-webkit-box-shadow:0 0 5px rgba(0,0,0,1);-moz-box-shadow:0 0 5px rgba(0,0,0,1);box-shadow:0 0 5px rgba(0,0,0,1);z-index:99999}div.social img{margin:2px;margin-bottom:0;border:0;padding:0;opacity:.9;filter:alpha(opacity=90)}div.social img.bottom{margin-bottom:2px}

Ahora suban estas imágenes en images/socialicons/twitter_large.png:
http://isanime.com.ar/images/social/twitter.png
http://isanime.com.ar/images/social/facebook.png
http://isanime.com.ar/images/social/youtube.png

Espero les sirva Smile

{SIGNATURE_IMAGE}

ZioGuE 27 Jun, 2011, 6:40 pm

Jee, justo andaba buscando algo así. Muchísimas gracias.

OscarHacker 27 Jun, 2011, 6:54 pm

Muy buen aporte gracias

DARKNESSDH 27 Jun, 2011, 6:56 pm

se parece al tuto que hizo bour :S

Omar G. 27 Jun, 2011, 6:58 pm

(27 Jun, 2011, 6:56 pm)DARKNESSDH escribió: se parece al tuto que hizo bour :S

Cual? Por que busque pero nada que encontré :S

{SIGNATURE_IMAGE}

Gustavo R. 27 Jun, 2011, 9:51 pm

Se llama Badget flotante algo así le puse Tongue

es parecido.

[Imagen: http://i.imgur.com/l7Qimoa.png]

Pixelz 28 Jun, 2011, 8:29 am

Muchisimas gracias Sama!, esta andando de diez!

Jaizu 9 Jul, 2011, 2:54 am

Quizás cree un Tuiter o como se escriba xD
Twiter? Bah da igual xD
Veré que hago, si lo hago uso este tuto, que por cierto, fácil y muy bueno.
Estaría bien un plugin de él, aun que usaría esto jaja

[Imagen: http://i.imgur.com/kLUbBrj.png]

RKen 31 Oct, 2011, 8:35 am

Jajaja me resulta gracioso, porque recién ahora lo leo a este tutorial y yo ya te habia copiado la barra desde tu foro Blush

.... jajaja para que no te enojes te di un punto de reputación Tongue

Saludos y Gracias! :thumbsup:

Ignnacio 31 Oct, 2011, 8:37 am

#10

Es bastante parecido al que hizo Gustavo Smile

, esta bueno.