segunda-feira, 7 de novembro de 2011

Menu de redes sociais fixo com efeito mostrar/ocultar

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.

image 

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:

Clique aqui para ver uma demostração

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&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21&amp;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: &#39;pt-BR&#39;}
</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!

Marcadores: , , , , , , ,

7 Comentários:

Às 7 de novembro de 2011 13:36 , Blogger Caio disse...

Ótimo, simplesmente ótimo!

 
Às 8 de novembro de 2011 18:09 , Blogger FozGamer disse...

Realmente muito bom,mas ta muito bugado

 
Às 12 de novembro de 2011 15:19 , Blogger A Dona do Blog ★ disse...

Muito bom!

 
Às 15 de novembro de 2011 01:56 , Blogger SITE CASEIRO disse...

Gostei muito desses menus, em breve colo eles no meu blog!

 
Às 20 de novembro de 2011 11:24 , Blogger luuz .-. disse...

O curtir não funciona, depois de curtir ele volta como se n tivesse curtido

 
Às 12 de dezembro de 2011 22:24 , Blogger Izaque disse...

Coloquei e gostei valew cara mas eu quero saber como colocar essa barra de compartilhamento que segue a página quando rolamos pra baixo com um efeito legal tem ai ?

 
Às 11 de setembro de 2013 22:33 , Blogger rodrigues rodrigues disse...

meu blo viro tv agora

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial