Widget de assinatura sociais para Blogger

Olá amigos Mult-focos, neste post vamos ver como adicionar um chamativo Widget de assinatura sociais.

Gadget para mostrar dia, mês e ano no Blogger

Veja um demo clicando no botão abaixo.

DEMO
Como adicionar em seu blog. Copie o código HTML no Box de códigos e siga os procedimentos necessários de adicionar um gadget, se não sabe como aprenda AQUI.

Como configurar.

Clique na imagem para ver com nitidez

<style> 
.Mbt-Social-metro { 
    width: 960px; 
    float: left; 
    margin: 0; 
    padding: 1em 0; 
}
.Mbt-Social-metro ul { 
    margin: 0; 
    padding: 0; 
}
.Mbt-Social-metro ul li { 
    list-style: none; 
    list-style-type: none; 
    padding: 0; 
    text-transform: none; 
    margin: 0; 
    float: left; 
    display: inline-block; 
    width: 20%; 
}
.Mbt-Social-metro ul li a { 
    font-size: 80%; 
    color: #fff!important; 
    display: block; 
}
.Mbt-Social-metro ul li a:hover { 
    color: #000!important; 
    background-color: #00FF00; 
    text-decoration: none; 
}
idc-scoail ul li a, ul li a:hover { 
    -moz-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
}
.Mbt-Social-metro ul li .rss { 
    background: url("https://lh4.googleusercontent.com/8xRs9uve3xC0YrR5R8p-k7nbA7KwSWJQyCem523QACo=s197-p-no") no-repeat scroll 10px center #F87E12; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .twitter { 
    background: url("https://lh6.googleusercontent.com/RuRfyco1TiM5VzfZUMMXEVFXzR3KZSDVPKqYnNn6zv0=s197-p-no") no-repeat scroll 10px center #4CACEE; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .facebook { 
    background: url("https://lh6.googleusercontent.com/Dq6VJMVBQsZ6J0sH4dxmkG26h9DA8Ob0mL3B_1hrss4=s197-p-no") no-repeat scroll 10px center #3B5998; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .google { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFAcGQ5jJhsz0m9ik9yPi1Q_vbXjRkeXGd7bE2QaCP2YaHJEpkCpIphFng0kdj6moWhLvbP1HJbw8UQLbSq_yPfXEvl3gjZc4QoB-S6TBJ5arb_lfPLw8HRA7ICid_SbInGc4F1QTldx4/s197-p-no/") no-repeat scroll 10px center #D44937; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .linkedin { 
    background: url("https://lh5.googleusercontent.com/-yPH4gaUFAdM/VCto4_bx0BI/AAAAAAAAHVs/jbEdk43J2xE/s197-no/linkedin%2B197x197.png") no-repeat scroll 10px center #3692C3; 
    background-size: 20px; 
    padding: 10px 50px; 
}
/* width of 768px */ 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
    .Mbt-Social-metro ul li { 
        width: 50%; 
    }; 
}
/* width of 480px */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .Mbt-Social-metro ul li { 
        width: 50%; 
    }; 
}
/* width of 320px */ 
@media only screen and (max-width: 480px) { 
    .Mbt-Social-metro ul li { 
        width: 100%; 
    }; 
}
</style>
<div class='Mbt-Social-metro'> 
<ul> 
<li><a class='rss' href='http://feeds.feedburner.com/mult-focos'>Assine o nosso feed</a></li> 
<li><a class='twitter' href='https://twitter.com/multfocos'>Siga-me no Twitter</a></li> 
<li><a class='facebook' href='https://www.facebook.com/Multfocossuarevistadigital'>Encontre-me em Facebook</a></li> 
<li><a class='google' href='https://plus.google.com/105144526522017770430'>Junte-me no Google+</a></li> 
<li><a class='linkedin' href='http://in.linkedin.com/nhome/?trk=hb_signin'>Conecte-se com o LinkedIn</a></li> 
</ul> 
</div>

See the Pen Widget de assinatura sociais by Mairink (@Oemes) on CodePen.

---

---