Olá blogueiro! Neste tutorial estarei ensinado a colocar um menu de redes sociais no blog, cujo diferencial, é fixo e possui um efeito de mostrar e ocultar. Nos últimos dias procurei postar mais tutoriais relacionados a redes sociais por ser o assunto mais procurado no cblogger.
Mas voltando ao assunto, este menu que estarei postando não possui nenhuma outra linguagem além de HTML e CSS3. Se quiser ver ele em ação, apenas clique no link abaixo:
A instalação é bem simples, você apenas terá que entrar no “Editar HTML” do seu blog, procurar por<body> e abaixo dela, colar o seguinte código:
<style>
.minhasredes1 {
padding: 15px;
width: 250px;
position:fixed;
top: 50px;
color: black;
z-index: 99999999999;
margin-left: 10px;
}
.minhasredes1 a {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
text-decoration: none;
}
.minhasredesrede {
background:#222;
width: 160px;
margin-top: 21px;
height: 20px;
padding: 11px;
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-150px);
border-radius: 15px;
padding-left:20px;
}
.minhasredesrede a {
font-size: 18px;
text-align: left;
color: #999;
font-family: Arial;
float:left;
}
.minhasredesrede a:hover {
}
.minhasredesrede:hover {
font-size: 18px;
text-align: left;
color: #999;
font-family: Arial;
text-shadow: 1px 1px 0px #111;
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-35px);
height: 50px
}
.minhasredesrede img{
float:right;
margin-top:-40px;
}
.minhasredes1 a:hover {
}
.minhasredes1 img {
}
.minhasredes1 img:hover {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
</style>
<div class='minhasredes1'>
<div class='minhasredesrede'><a href='URL PERFIL TWITTER' title='Siga-me no Twitter'>Twitter<a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/><img src='http://icons.iconarchive.com/icons/creativenerds/black-white-social/48/twitter-icon.png'/></a></div>
<div class='minhasredesrede'><a href='URL PERFIL FACEBOOK' title='Me adicione no Facebook'>Facebook<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=arial&height=21&appId=143978012364348' style='border:none; overflow:hidden; width:100px; height:21px;'/><img src='http://icons.iconarchive.com/icons/creativenerds/black-white-social/48/facebook-icon.png'/></a></div>
<div class='minhasredesrede'><a href='URL PERFIL GOOGLE PLUS' title='Me circule no Google Plus'>Google Plus<!-- Inclua esta tag na seção head ou logo antes da tag de fechamento da seção body -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'pt-BR'}
</script>
<!-- Inclua esta tag onde desejar que o botão +1 seja exibido -->
<g:plusone/><img src='http://icons.iconarchive.com/icons/creativenerds/black-white-social/48/googleplus-icon.png'/></a></div>
</div>
Após isso, altere as partes em vermelho no código colocando a URL do seu perfil de cada rede social.
Se alguém quiser fazer algum pedidio de postagem, deixe um comentário. Se estiver com problemas na instalação, nos diga!
Nenhum comentário:
Postar um comentário