Slider Social Icons

Slider Social Icons

Hola amigos de SMFsimple hoy les traigo un exelente tip para agregar iconos sociales a su theme con un diseño elegante.
cuando terminemos tendremos algo haci:

Show content

Bien empezemos vamos al index.template.php y buscamos:

Code: [Select]

// Here comes the JavaScript bits!
echo '
Agregamos despues:

Code: [Select]

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/Social.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/Social2.js"></script>
Buscamos:

Code: [Select]

// Show the menu here, according to the menu sub template.
template_menu();
Agregamos despues:

Code: [Select]

    // Social Icons By Monster Studios
echo'
    <ul id="navigation">
            <li class="Facebook"><a href="" title="Siguenos en Facebook"></a></li>
            <li class="Twitter"><a href="" title="Siguenos en Twitter"></a></li>
            <li class="Youtube"><a href="" title="Mira nuestros videos"></a></li>
        </ul>';Ahora vamos a nuestro index.css y agregamos al final:

Code: [Select]

/* Social Icos By Monster Studios.
------------------------------------------------------- */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 25%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .Facebook a{
    background-image: url(../images/Social/Facebook.png);
}
ul#navigation .Twitter a      {
    background-image: url(../images/Social/Twitter.png);
}
ul#navigation .Youtube a      {
    background-image: url(../images/Social/Youtube.png);
}Ahora solo ay que descoprimir el archivo adjunto y agregar los archivos  a sus respetivas carpetas

Social.js y Social2.js a la carpeta scripts de su theme.
La carpeta Social la enviamos a la carpeta images de su theme

Muy bueno!!! agregado a favoritos!

Muy buen tips, estas cosas agregan alguna funcionalidad con un diseño bastante elegante!
Gracias!

Exelente


Tengo 2 dudas.

1.- no lo encuentro en mi "index template"  (lo adjunte para que lo veas)

Code: [Select]

// Show the menu here, according to the menu sub template.
template_menu();


2.- donde modifico en enlace para redireccionar los iconos Sociales?

Gracias por compartir Muy Elegante!

Nota final: el theme defaul salio de maravilla pero no el theme que uso.

genial! te dejo mis 20 del dia!

Exelente


Tengo 2 dudas.

1.- no lo encuentro en mi "index template"  (lo adjunte para que lo veas)

Code: [Select]

// Show the menu here, according to the menu sub template.
template_menu();


2.- donde modifico en enlace para redireccionar los iconos Sociales?

Gracias por compartir Muy Elegante!

Nota final: el theme defaul salio de maravilla pero no el theme que uso.

En tu index busca simplemente busca

Code: [Select]

<div id="toolbar">
',template_menu(),'
</div>
Y por ahí lo arreglas

En tu index busca simplemente busca

Code: [Select]

<div id="toolbar">
',template_menu(),'
</div>
Y por ahí lo arreglas

Muchas gracias  "distante" disculpe usted si le cause una molestia aun estoy aprendiendo! (me demore 40 minutos en que encajara en theme) 

* La otra consulta es donde Redirecciono mis enlaces para los "Iconos Sociales" ?

Muchas Gracias....
Tratare de Probarlo, haber si me Queda bien en SMF...Yo lo tengo en mi Web de Blogger esto... 

EDIT: Listo1 Instalado y Funcionando 

Exelente


Tengo 2 dudas.

1.- no lo encuentro en mi "index template"  (lo adjunte para que lo veas)

Code: [Select]

// Show the menu here, according to the menu sub template.
template_menu();


2.- donde modifico en enlace para redireccionar los iconos Sociales?

Gracias por compartir Muy Elegante!

Nota final: el theme defaul salio de maravilla pero no el theme que uso.

El link de tus perfiles de redes sociales lo tienes que agregar en este codigo:

Code: [Select]

    // Social Icons By Monster Studios
echo'
    <ul id="navigation">
            <li class="Facebook"><a href="" title="Siguenos en Facebook"></a></li>
            <li class="Twitter"><a href="" title="Siguenos en Twitter"></a></li>
            <li class="Youtube"><a href="" title="Mira nuestros videos"></a></li>
        </ul>';
En las lineas:

Code: [Select]

            <li class="Facebook"><a href="" title="Siguenos en Facebook"></a></li>
            <li class="Twitter"><a href="" title="Siguenos en Twitter"></a></li>
            <li class="Youtube"><a href="" title="Mira nuestros videos"></a></li>
Quedara por ejemplo haci:

Code: [Select]

    // Social Icons By Monster Studios
echo'
    <ul id="navigation">
            <li class="Facebook"><a href="AQUI EL URL" title="Siguenos en Facebook"></a></li>
            <li class="Twitter"><a href="AQUI EL URL" title="Siguenos en Twitter"></a></li>
            <li class="Youtube"><a href="AQUI EL URL" title="Mira nuestros videos"></a></li>
        </ul>';

excelente tutorial!!! ! me gusto mucho van 15 puntitos!!!

Gracias Zoom

Me servicio de mucho!!

Gracias me quedo perfecto : ) .