.jpg "eltorga")
Con esta linda movida del tomorrowland, cree un clon de los iconos sociales que aparecieron en la pagina del tomorrowland brasil 2015. y es así como presento estos iconos para que los puedan agregar a su lindo blog.
Para instalar realice lo siguiente:
1) Vamos a Plantilla y la editamos en HTML
2) Vamos al modo buscar
Buscamos la etiqueta
<body> y debajo de ella pegamos lo siguiente<a class='nonblock nontext' href='#' id='ttwitter' target='_blank'><!-- simple frame --></a>
<a class='nonblock nontext' href='#' id='tyoutube' target='_blank'><!-- simple frame --></a>
<a class='nonblock nontext' href='#' id='tbook' target='_blank'><!-- simple frame --></a>
<a class='nonblock nontext' href='#' id='tinsta' target='_blank'><!-- simple frame --></a>
<a class='nonblock nontext' href='#' id='tpluss' target='_blank'><!-- simple frame --></a>
Ahora vamos a volver buscar ahora la etiqueta
</b:skin> y pegamos el siguiente codigo encima de la etiqueta:#ttwitter:hover,#tbook:hover
{
background-repeat: no-repeat;
background-position: center bottom;
width: 46px;
height: 77px;
min-height: 0px;
margin: 0px;
}
#ttwitter
{
z-index: 43;
width: 46px;
height: 77px;
border-style: none;
border-color: transparent;
position: fixed;
top: 0px;
right: 243px;
background: transparent url("https://lh3.googleusercontent.com/-6iRBTM2JoLk/VW-T2tGYXzI/AAAAAAAAAjY/8a57qkHhZrA/w73-h234-no/sprite_tw.png") no-repeat center top;
}
#tyoutube
{
z-index: 44;
width: 47px;
height: 77px;
border-style: none;
border-color: transparent;
position: fixed;
top: 0px;
right: 191px;
background: transparent url("https://lh3.googleusercontent.com/-hZLDpAUF6rU/VW-T2w5IybI/AAAAAAAAAjk/rjL8NCr9cz8/w73-h234-no/sprite_yt%2B%25281%2529.png") no-repeat center top;
}
#tyoutube:hover
{
background-repeat: no-repeat;
background-position: center bottom;
width: 47px;
height: 77px;
min-height: 0px;
margin: 0px;
}
#tbook
{
z-index: 45;
width: 46px;
height: 77px;
border-style: none;
border-color: transparent;
position: fixed;
top: 0px;
right: 142px;
background: transparent url("https://lh5.googleusercontent.com/-NvoPEj8hm40/VW-T3RcnVCI/AAAAAAAAAjo/_EBxpThgqe0/w73-h234-no/sprite_f%2B%25282%2529.png") no-repeat center top;
}
#tinsta
{
z-index: 46;
width: 48px;
height: 77px;
border-style: none;
border-color: transparent;
position: fixed;
top: 0px;
right: 90px;
background: transparent url("https://lh5.googleusercontent.com/-1z87FX9YLYY/VW-T2S287kI/AAAAAAAAAjU/qHICB8POU70/w73-h234-no/sprite_in%2B%25281%2529.png") no-repeat center top;
}
#tinsta:hover
{
background-repeat: no-repeat;
background-position: center bottom;
width: 48px;
height: 77px;
min-height: 0px;
margin: 0px;
}
#ttwitter:hover,#tbook:hover
{
background-repeat: no-repeat;
background-position: center bottom;
width: 46px;
height: 77px;
min-height: 0px;
margin: 0px;
}
#tpluss
{
z-index: 44;
width: 47px;
height: 77px;
border-style: none;
border-color: transparent;
position: fixed;
top: 0px;
right: 38px;
background: transparent url("https://lh5.googleusercontent.com/-7G_mwEtHtaI/VW-T4UxYMLI/AAAAAAAAAjw/JWngYb5xviA/w73-h234-no/googlesprite.png") no-repeat center top;
}
#tpluss:hover
{
background-repeat: no-repeat;
background-position: center bottom;
width: 47px;
height: 77px;
min-height: 0px;
margin: 0px;
}
Ahora finalmente vamos a guardar la plantilla y tendremos los iconos sociales estilo Tomorrowland en nuestro blog.
En el HTML modifican los # por las urls de sus respectivas redes sociales.
Y pues obviamente les dejo el demo en en esta entrada. Suerte!
