Assine Nosso Feed!

Receba Nossas Atualizações em Seu E-mail:

  • Receba Todos os Nossos Artigos Automaticamente em Seu E-mail
  • Tenha a Exclusividade de Receber Boletins do Nosso Blog
  • Inscrever-se no feed do Nosso Blog é Fácil, Rápido e Seguro
  • Ajude a fazer Nosso Blog Crescer!!!


  • 28 de fevereiro de 2013

    Menu social com efeito hover e deslizante


    Como podemos notar vários blogs tem Widget de follow para  redes sociais e é de extrema importância, hoje em dia é indispensável esse maravilhosa ferramenta na vida de um blogueiro, já mostrei alguns modelos aqui no blog mas nada comparado a este, trazendo como caracteristica um visual simples, com efeito hover e  transição criado com Css3.

    Artigos recomendados:
    1. Menu de Redes Sociais na vertical com efeitos CSS
    2. Menu de redes sociais animado com css3
     


     Vamos ao Tutorial :

    Para adicionar em deu blog é simples e rápido vá em layout >>  adicionar widget >> HTML/javaScript e cole o código abaixo.

     <div dir="ltr" style="text-align: left;" trbidi="on">
    <style>
    #bssose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
    #bssose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
    #bssose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
    #bssose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(http://2.bp.blogspot.com/-05soRH2FN0M/URs3FjSpiBI/AAAAAAAABYc/UjN-swK_7yc/s320/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
    #bssose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
    #bssose .icon{overflow:hidden; color:#fafafa;}
    #bssose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
    #bssose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
    #bssose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
    #bssose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
    #bssose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
    #bssose li:hover .icon,
    .touch #bssose li .icon{width:210px;}
    .touch #bssose li .facebook, #bssose li:hover .facebook{background-color:rgba(59,89,152,1);}
    .touch #bssose li .twitter, #bssose li:hover .twitter{background-color:rgba(64,153,255,1);}
    .touch #bssose li .googleplus, #bssose li:hover .googleplus{background-color:rgba(228,69,36,1);}
    .touch #bssose li .pinterest, #bssose li:hover .pinterest{background-color:rgba(174,45,39,1);}
    .touch #bssose li .rss, #bssose li:hover .rss{background-color:rgba(255,102,0,1);}
    </style>
    <br />
    <ul id="bssose">
    <li data-alt="Siga-nos no Facebook"><a class="icon facebook" href="http://www.facebook.com/tecnologiablogger">Siga-nos no Facebook</a></li>
    <li data-alt="Siga-nos no Twitter"><a class="icon twitter" href="http://www.twitter.com/tecno_blogger">Siga-nos no  Twitter</a></li>
    <li data-alt="Siga-nos no Google+"><a class="icon googleplus" href="https://plus.google.com/XXXXXXXXXXXX">Siga-nos no  Google+</a></li>

    </ul>
    </div>

    Configurações:

    Claro que não pode esquecer de fazer as modificações, na parte em vermelho você troca pelo nome de sua Fan page.
    Na parte roxa troque pelo nome do Twitter.
    Já na parte azul troque pelo endereço do Google+ pode ser de sua página ou seu perfil pessoal.

    2 comentários:

    1. Olá Juliano,

      realmente é um excelente widget, parabéns pela partilha.

      Abraço!

      ResponderExcluir
      Respostas
      1. Olá Claudio,

        Bom que tenha gostado, Muito obrigado pelo comentário. ;)
        Grande abraço!

        Excluir