Gadget para mostrar dia, mês e ano no Blogger
Veja um demo clicando no botão abaixo.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.
0 comentários:
Postar um comentário
Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!