Social Links: columna deslizante.

❝VER EJEMPLO DEL EFECTO AQUÍ❞

Lo que veremos hoy, es como colocar nuestros links sociales de forma "flotante" pero con un efecto algo mas original & llamativo. El efecto consta en que, al pasar el cursor por "Links sociales" No se abre simplemente un box con los links, sino que se forma una columna estática & queda abierta hasta que el cursor deje de situarse sobre tal.

Como colocar este efecto ¿?

Para colocar este "Menú de links sociales" vamos a Plantilla / Edición HTML & buscamos {Ctrl + F} la siguiente linea:

]]></b:skin>

ARRIBA de ello, pegamos el código CSS:

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
/* LINKS */
a.navSL {
color:#EBE3E3; /* COLOR DE LINKS */
width: 90px;
height: 15px;
overflow:hidden;
border-top:14px solid #EBE3E3; /* BORDE TOP DE LINKS */
display:block;
text-decoration: none;
padding: 5px;
font: 10px arial;
text-transform: uppercase;
text-align: right;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
/* LINKS HOVER */
a.navSL:hover{
height: 30px;
color: transparent;
border-top:14px solid #fff; /* BORDE TOP DE LINKS */
text-shadow: 0px 10px 0px #fff; /* COLOR DE LINKS */
text-decoration: none;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
/* TITLE "LINKS SOCIALES"*/
.headSL {
background: #DB1D70; /* COLOR DE FONDO */
color:#EBE3E3; /* COLOR DE LETRA */
width: 90px;
overflow: hidden;
border-bottom:14px solid #9CAEA4; /* BORDE BOTTOM */
text-decoration: none;
padding: 5px;
font-size: 25px;
font-family: 'Nanum Brush Script', serif;
text-transform: ;
text-align: center;
}
#boxSL {height: 56px;overflow: hidden; -webkit-transition: 2.0s;
-moz-transition: 2.0s; background: #fff url(URL FONDO DE LA COLUMNA);}
#boxSL:hover {height: 100%; overflow: hidden; -webkit-transition: 1.0s;
-moz-transition: 1.0s;}

Una vez, tenemos colocado el código para editar, modificamos lo marcado a gusto propio.
Para termina de colocar esta columna, buscamos en nuestra plantilla {CTRL + F} la etiqueta:

</body>

Donde colocaremos ARRIBA de ella lo siguiente:

<div id="boxSL" style="left: 30px; position: fixed; top: 0px;">
<div class="headSL" title="links sociales">사회 링크</div>
<a class="navSL" style="background:#B7D95A;" href="/FACEBOOK"> facebook </a>
<a class="navSL" style="background:#F98E37;" href="/TWITTER"> twitter </a>
<a class="navSL" style="background:#DB1D70;" href="/TUMBLR"> tumblr </a>
<a class="navSL" style="background:#B7D95A;" href="/HEELLO"> heello</a>
</div>

De la misma forma que el tutorial del "Menu CUBE COLORS" aquí tenemos la opcion de colocarle un color de fondo diferente a cada link, para eso editar lo marcado en negrita.
Donde dice "사회 링크" sera el titulo que guiara a nuestros lectores a observar nuestros links, molificado a tu gusto.

Ten en cuenta:

Si decides colocar este efecto en tu blog, la idea esta en que no sitúes muchos efectos "flotantes", ya que el diseño mismo del blog, quedara repleto de elementos sumándose al espacio que ya ocupan las columnas del blog.

El fondo que utilice en el tutorial de ejemplo, fue extraído de 

colourslovers.com junto con la paleta que lo constituye:

~