Anuncie aqui!
Anuncie aqui!
       

Menu de redes sociais com sistema de mostrar e ocultar

Postado Por : Josivan
 
»»» 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.

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" >>“Editar HTML” e 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 pedido de postagem, deixe um comentário. Se estiver com problemas na instalação, nos diga!

Tambem vou estar disponibilizando para voces leitores o Download do codigo:



Sem comentários »

0 comentários:

Postar um comentário

     

.