Widget de Perfil Personal Social Expandible Para Blog de Blogger

En este articulo te traigo un atractivo y animado widget para tu blog de blogger.Este es un perfil social que se expande y se encoje al poner el cursor del mouse sobre el mismo ,sus colores semejan al menu metro UI.

Clores atractivos y llamativos que van a corde con la tecnologia y diseño moderno como window 8 de seguro te encantara despues que lo veas en tu blog especialmente su apriencia de plantillas Metro UI .

Este esta hecho desimple codigo CSS3 para activar sus efectos de expandir y contraerse y facil de instalar en tu blog de blogger.
Ejemplo:de click siguiente boton
Demo
Como Añadir este Widget a tu Blog..

• Entra en "Blogger"
• Da Click en seccion de Diseño
• Luego da click en "Añadir un Gadget" ..
• Apareceran una lista de opciones ..escoje y da click en "HTML/Java Script"..
• Luego paga el codigo de abajo en dentro de este.

<style>

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img {
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}


/*****************fb*****************/
.ca-menuf{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menuf li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #017CD4;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menuf li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menuf li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentf{
    color: #fff;
    position: absolute;
    left: 12px;
    width: 100%;
    height: 100%;
    top: 10px;
}
.ca-mainf{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subf{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menuf li:hover{
    background:  #1f69b3;
    color: #fff;
}
.ca-menuf li:hover .ca-iconf{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menuf li:hover .ca-mainf{
    font-size: 14px;
    color: #fff;
}
.ca-menuf li:hover .ca-subf{
    color: #fff;
    font-size: 30px;
}

/*****************tw*****************/
.ca-menut{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menut li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #00BFFF ;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menut li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menut li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentt{
    color: #fff;
    position: absolute;
    left: 12px;
    width: 100%;
    height: 100%;
    top: 10px;
}
.ca-maint{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subt{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menut li:hover{
    background:#0CA8F0;
    color: #fff;
}
.ca-menut li:hover .ca-icont{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menut li:hover .ca-maint{
    font-size: 14px;
    color: #fff;
}
.ca-menut li:hover .ca-subt{
    color: #fff;
    font-size: 30px;
}
/*****************g+*****************/
.ca-menug{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menug li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #da4a38;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menug li:last-child{
    margin-bottom:2px;
    color: #fff;
}
.ca-menug li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentg{
    position: absolute;
    left:12px;
    width: 300px;
    height: 60px;
    top: 10px;
    color: #fff;
}
.ca-maing{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subg{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menug li:hover{
    background: #DC321E;
    color: #fff;
}
.ca-menug li:hover .ca-icong{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menug li:hover .ca-maing{
    font-size: 14px;
    color: #fff;
}
.ca-menug li:hover .ca-subg{
    color: #fff;
    font-size: 30px;
}
/*****************rss*****************/
.ca-menur{
    padding: 0;
    width:100%;
    color: #fff;
    margin: 1px auto;
}
.ca-menur li{
    width: 70%;
    height: 75px;
    overflow: hidden;
    display: block;
    background: #FFA500 ;
    color: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.ca-menur li:last-child{
    margin-bottom: 2px;
    color: #fff;
}
.ca-menur li a{
    text-align: left;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    position:relative;
}
.ca-contentr{
    position: absolute;
    left: 12px;
    width: 300px;
    height: 60px;
    top: 10px;
    color: #fff;
}
.ca-mainr{
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-subr{
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menur li:hover{
    background: #FF8C00 ;
    color: #fff;
}
.ca-menur li:hover .ca-iconr{
    text-shadow: 0px 0px 1px ;
    font-size: 50px;
    color: #fff;
}
.ca-menur li:hover .ca-mainr{
    font-size: 14px;
    color: #fff;
}
.ca-menur li:hover .ca-subr{
    color: #fff;
    font-size: 30px;
}
</style><br> <ul class="ca-menuf">
<li>
<a href="https://www.facebook.com/nombredepagina">
<div class="ca-contentf">
<h2 class="ca-mainf">
Facebook</h2>
<h3 class="ca-subf">
Danos Like en Facebook</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menut">
<li>
<a href="https://twitter.com/nombrepagina"><div class="ca-contentt">
<h2 class="ca-maint">
Twitter</h2>
<h3 class="ca-subt">
Siguenos en Twitter</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menug">
<li>
<a href="https://plus.google.com/u/0/123456789"><div class="ca-contentg">
<h2 class="ca-maing">
Google+</h2>
<h3 class="ca-subg">
Añadenos en Google+</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menur">
<li>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=Tu enlace"><div class="ca-contentr">
<h2 class="ca-mainr">
RSS</h2>
<h3 class="ca-subr">
Suscribete a nuestro RSS</h3>
</div>
</a>
</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

• Da luego click en Guardar Html/Javascripts

Customizacion :

• Luego para finalizar Reemplace los enlaces de texto ensombrecidos en color amarillo de Facebook,Twitter,Google+,RSS con tus enlaces.. 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati