Agrega Gadgets de Redes Sociales animado en tu Blog

Agrega este Gadget para perfiles de los redes sociales en tu blog & sitio Web sin javasript solo con html y Css3.
Para poner este Gadget en tu blog debes copiar este código css en tu blog esto puede ser por: Blogger> Eliges tu Blog> Diseño> Añadir un gadget >HTML/Javascript.
O si tu desear poner junto al estilo general del blog has lo siguiente: Blogger> Eliges tu Blog> Plantillas> Editar Html> Haces Ctrl + F sobre el código para buscar ( ]]></b:skin> )
> y luego pegas el codigo de tu estilo preferido antes de ( ]]></b:skin> ).

Vista Previa
Descargar Ver en Blog
.

<style type="text/css">
         
/* Creado por DanielSTh*/
body{

    margin:0 0;
    padding:0 0;
    color:#666;
    background:#f1f1f1 no-repeat;
}
#cont-r-s{
    position:fixed;
    bottom:30%;
    left:5px;
    z-index:99999
    
}
#cont-r-s li{
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    list-style:none;
    height:39px;
    padding:2px;
    margin-top: 2px;
    width:40px;
}
#cont-r-s span{
    background-image:url('http://s2.postimg.org/ik6be3ddx/Bg_icos_DSTh.png') ;
    background-size: 120px 30px;
    width:0;
    left:34px;
    padding:0;
    position:absolute;
    overflow:hidden;
    z-index:-1;

    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:30px;
    margin-top:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    -o-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    
}

/* 
Diseñado por DanieSTh
SitioWeb: www.DanieS-Th.blogspot.com 
*/

#cont-r-s a, #cont-r-s .mas{
    background:#FFF;
    height:38px;
    width:38px;
    display:block;
    position:relative;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
    box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
    color:#fff;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;

}
#cont-r-s .mas{
    background:#FFF;
    height:15px;
    width:15px;
    color:#000;
    border-radius:0 0 8px 8px;
    text-align: center;
    text-decoration: none;
    line-height:16px;
    margin:-3px 0 0 13px;
    z-index:-1;
}

#cont-r-s a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#cont-r-s a:hover{ text-decoration:none;
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
    -o-box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
    box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
}

/* Botón Facebook */
#cont-r-s .fb { background-position:0 0;background: url(http://s2.postimg.org/44szsxpqd/Fb_Ico_DSTh.gif);}
#cont-r-s .fb:hover {   background-position:0 1px;}
#cont-r-s .fb span{
    background-color:#3b5999;
}

/* Botón Twitter */
#cont-r-s .twitter { background-position:0 0;background: url(http://s2.postimg.org/x9r5ilfnp/Tw_Ico_DSTh.gif);}
#cont-r-s .twitter:hover { background-position:0 1px;}
#cont-r-s .twitter span{
    background-color:#29C5F6;
}
/* Botón YouTube */

#cont-r-s .YT { background-position:0 0;background: url(http://s2.postimg.org/p5j1dut8l/YT_Ico_DSTh.gif)}
#cont-r-s .YT:hover{ background-position:0 1px;}
#cont-r-s .YT span{
    background-color:#DD332B;
}

/* Botón G+ */
#cont-r-s .G-p { background-position:0 0;background: url(http://s2.postimg.org/4t1ubvog5/G_Ico_DSTh.gif)}
#cont-r-s .G-p:hover { background-position:0 1px;}
#cont-r-s .G-p span{
    background-color:#D74A38;
}

/* Botón Pinterest */
#cont-r-s .Pint { background-position:0 0;background: url(http://s2.postimg.org/zd1kq9fgl/Pine_Ico_DSTh.gif)}
#cont-r-s .Pint:hover{ background-position:0 1px;}
#cont-r-s .Pint span{
    background-color:#C61118;
}

/* Botón Feed */
#cont-r-s .feed { background-position:0 0;background: url(http://s2.postimg.org/jaz1jvfr9/Feed_Ico_DSTh.gif)}
#cont-r-s .feed:hover { background-position:0 1px;}
#cont-r-s .feed span{
    background-color:#FD8A06;
}

         </style>


<ul id="cont-r-s">
<!-- Diseñado por DanieSTh-->
    <li><a target="_blank" class="fb" href="https://www.facebook.com/"><span>Facebook</span></a></li>
    <li><a target="_blank" class="twitter" href="https://twitter.com/"><span>Twitter</span></a></li>
    <li><a target="_blank" class="YT" href="https://www.youtube.com/"><span>YouTube</span></a></li>
    <li><a target="_blank" class="G-p" href="https://plus.google.com/"><span>Google+</span></a></li>
    <li><a target="_blank" class="Pint" href="https://www.pinterest.com//"><span>Pinterest</span></a></li>
    <li><a target="_blank" class="feed" href="#"><span>Feed</span></a></li>
    <a target="_blank" class="mas" href="http://goo.gl/toHlLb" title="Agregar este Gadget">+</a>
</ul>

Elias Saez

Add Comment

Blog, Gadgets, Redes Sociales

lunes, 9 de marzo de 2015

Post Relacionados

Insertar gadgets Yoyo Cici Inserta este gadgets de Yoyo Cici que se esconde al poner el cursor sobre el. Tambien puedes ver
Botones Redes Sociales GadgetsGadgets para poner enlaces de las redes sociales. de Facebook, Twitter, YouTube, Google+. Vista Pr
Menu Fixed Responsive Encabezado Fijo que aparece cuando se baja la pagina. Vista Previa
Instalación botones circular estilo abanico [Redes Sociales]Hola, en este tutorial veremos como poner este botón que al hacer clic se expande algunas opciones
Mostrar Ocultar Spoiler - jQuery Spoiler que Muestra esconde y muetra el contenido al hacer click en el boton. Vista Previa

Páginas!

Categorias

Contacto

Agrega Gadgets de Redes Sociales animado en tu Blog

Post Relacionados