Menu de redes sociais fixo com efeito mostrar/ocultar
Autor: Bruno Luiz | Publicado: 2012-01-01T12:42:00-08:00


»»» Menu de redes sociais fixo com efeito mostrar/ocultar&nbsp;«««
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.
Mas voltando ao assunto, este menu que estarei postando não possui nenhuma outra linguagem além de HTML e CSS3.
A instalação é bem simples, você apenas terá que entrar no Painel do seu Blogger e ir em "Desing" &gt;&gt;“Editar HTML” e procurar por &lt;body&gt; &nbsp;e abaixo dela, colar o seguinte código:


&nbsp; &nbsp; &lt;style&gt;
&nbsp; &nbsp; .minhasredes1 {&nbsp; &nbsp; padding: 15px;&nbsp; &nbsp; width: 250px;&nbsp; &nbsp; position:fixed;&nbsp; &nbsp; top: 50px;&nbsp; &nbsp; color: black;&nbsp; &nbsp; z-index: 99999999999;&nbsp; &nbsp; margin-left: 10px;&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredes1 a {&nbsp; &nbsp; -webkit-transition:All 1s ease;&nbsp; &nbsp; -moz-transition:All 1s ease;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredesrede {&nbsp; &nbsp; background:#222;&nbsp; &nbsp; width: 160px;&nbsp; &nbsp; margin-top: 21px;&nbsp; &nbsp; height: 20px;&nbsp; &nbsp; padding: 11px;&nbsp; &nbsp; -webkit-transition:All 0.2s ease;&nbsp; &nbsp; -moz-transition:All 0.2s ease;&nbsp; &nbsp; -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-150px);&nbsp; &nbsp; border-radius: 15px;&nbsp; &nbsp; padding-left:20px;
&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredesrede a {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; color: #999;&nbsp; &nbsp; font-family: Arial;&nbsp; &nbsp; float:left;&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredesrede a:hover {&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredesrede:hover {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; color: #999;&nbsp; &nbsp; font-family: Arial;&nbsp; &nbsp; text-shadow: 1px 1px 0px #111;&nbsp; &nbsp; -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-35px);&nbsp; &nbsp; height: 50px&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredesrede img{&nbsp; &nbsp; float:right;&nbsp; &nbsp; margin-top:-40px;&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredes1 a:hover {&nbsp; &nbsp; }
&nbsp; &nbsp; .minhasredes1 img {&nbsp; &nbsp; }&nbsp; &nbsp; .minhasredes1 img:hover {&nbsp; &nbsp; -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);&nbsp; &nbsp; }
&nbsp; &nbsp; &lt;/style&gt;
&nbsp; &nbsp; &lt;div class='minhasredes1'&gt;
&nbsp; &nbsp; &lt;div class='minhasredesrede'&gt;&lt;a href='URL PERFIL TWITTER'  title='Siga-me no Twitter'&gt;Twitter&lt;a class='twitter-share-button'  data-count='horizontal'  href='https://twitter.com/share'&gt;Tweet&lt;/a&gt;&lt;script  src='//platform.twitter.com/widgets.js'  type='text/javascript'/&gt;&lt;img  src='http://icons.iconarchive.com/icons/creativenerds/black-white-social/48/twitter-icon.png'/&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp; &nbsp; &lt;div class='minhasredesrede'&gt;&lt;a href='URL PERFIL FACEBOOK'  title='Me adicione no Facebook'&gt;Facebook&lt;iframe  allowTransparency='true' frameborder='0' scrolling='no'  src='//www.facebook.com/plugins/like.php?href&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;width=100&amp;amp;show_faces=false&amp;amp;action=like&amp;amp;colorscheme=light&amp;amp;font=arial&amp;amp;height=21&amp;amp;appId=143978012364348'  style='border:none; overflow:hidden; width:100px;  height:21px;'/&gt;&lt;img  src='http://icons.iconarchive.com/icons/creativenerds/black-white-social/48/facebook-icon.png'/&gt;&lt;/a&gt;&lt;/div&gt;
&nbsp; &nbsp; &lt;div class='minhasredesrede'&gt;&lt;a href='URL PERFIL GOOGLE PLUS'  title='Me circule no Google Plus'&gt;Google Plus&lt;!-- Inclua esta tag  na seção head ou logo antes da tag de fechamento da seção body --&gt;&nbsp; &nbsp; &lt;script src='https://apis.google.com/js/plusone.js' type='text/javascript'&gt;&nbsp; &nbsp; &nbsp; {lang: &amp;#39;pt-BR&amp;#39;}&nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;!-- Inclua esta tag onde desejar que o botão +1 seja exibido --&gt;&nbsp;  &nbsp; &lt;g:plusone/&gt;&lt;img  src='http://icons.iconarchive.com/icons/creativenerds/black-white-social/48/googleplus-icon.png'/&gt;&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;
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 pedido de postagem, deixe um comentário. Se estiver com problemas na instalação, nos diga!
Gosto Comenta aew..Custa Nada