Ícones com efeito JQuery na lateral do blog



     Gente, eu não podia deixar de postar esse tutorial fantástico, simplesmente eu adorei o efeito, é bem provável que no próximo layout do Ecleticus ele esteja incluindo. Veja o Exemplo AQUIEntão, gostaram do efeito, eu amei. E como eu sou um blogueiro bonzinho, irei postar o tutorial aqui para vocês, só espero que se vocês usarem, não esqueça de creditar, certo?    Let's Go Baby.

1. Entre no seu blog, clique em Designer > Editar Html.
2. Copie o código abaixo, e cole-o acima de ]]></b:skin>.

ul#menusisi {
position:fixed;
margin:0;
padding:0;
top:50px;
left:0;
list-style:none;
z-index:9999;
}
ul#menusisi li {
width:100px;
}
ul#menusisi li a {
display:block;
margin-left:-50px;
width:100px;
height:55px;
background-color:#D3D3D3;  /* Cor de fundo do botão */ background-repeat:no-repeat;
background-position:48px center;
border:1px solid #D3D3D3;  /* Cor da borda do botão*/ 
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .home a {
}
ul#menusisi .twitter a {
}
ul#menusisi .rssfeed a {
}
ul#menusisi .contato a {
}
Caso você não esteja satisfeito com as imagens, você pode encontrar várias nesse site AQUI 

3. Agora copie o Script abaixo e cole acima de </head>
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type='text/javascript'>
$(function() {
$(&#39;#menusisi a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},1000);
$(&#39;#menusisi &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-50px&#39;},200);
}
);
});
</script>
4. Por último, copie o Código HTML abaixo, coloque seu endereço nos locais sinalizados.
<ul id='menusisi'>
<li class='home'><a href='SEU-ENDEREÇO' title='Home'/></li>
<li class='twitter'><a href='twitter.com/USARNAME' title='Twitter'/></li>
<li class='rssfeed'><a href='http://SEU_BLOG.blogspot.com/feeds/posts/default'title='RSS Feed'/></li>
<li class='contato'><a href='mailto: SEU_EMAIL' title='Contato'/></li>
</ul>
    Então gente, gostaram do efeito? Espero que sim né, se não seria um post atoa. Ah! E não esqueça de creditar. Até a próxima!

Postado por: Jeff Bolton
bolton Capricorniano, 17 anos, garoto divertido e engraçado, gosta muito de blogar e assistir TV, odeia falsidade e adora curtir a vida do jeito que ela é. @ecletiicus

14 comentários:

  1. Ah que divo esse efeito , adorei
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  2. Hii (:
    Amei esse fundo aqui, super hiper divo *o*
    E esse theme? Simplismente PERFEITO.
    Achei o tutorial muito util, esse efeito é muito massa, rs
    Bjbj ;*

    ResponderExcluir
  3. Aw, eu já sabia fazer esse efeito :) Ele é bem bacaninha mesmo.
    Beeijo!

    ResponderExcluir
  4. Legal o tutorial, é bom pra quando eu for trocar de lay... Só quase em 2012 rsrsrs
    Lembrei de você escrevendo o post de hoje

    jeito-inedito.blogspot.com

    ResponderExcluir
  5. Adorei esse tutorial ♥
    http://conversando-com-a-lua.blogspot.com/

    ResponderExcluir
  6. Hii de novo (:
    Então, eu já tive vicio em fazer designer também, antigamente.. Mas hoje tenho muita preguiça, ai eu desisto, nem gosto mais de fazer theme e essas coisas, rs'
    Bjbj ;*

    ResponderExcluir
  7. qual é a fonte que vc usou para fazer seu cabeçalho?

    Quero a fonte que vc utilizou para escrever Oficial

    ResponderExcluir
  8. Amei! O do Bob é perfeeito. Você faz layout para encomenda? Beijinhos

    garotambulante.blogspot.com

    ResponderExcluir
  9. Ah, que bom saber.. Quero um completíssimo, igual ao do bob esponja, só mudando o tema né.. não quero de desenho animado ou algo parecido. Prefiro algo mais feminino, bem colorido (: responda-me por email o valor, fica melhor. garotambulante@hotmail.com

    ResponderExcluir
  10. O tutorial é ótimo!
    Eu queria aprender como faz esse efeito num menu... pra ele subir um pouco em cada opção, vc tem algum tuto ou pode postar? Ia ser de grande utilidade haha
    Adorei seu blog!
    Beijo

    ResponderExcluir
  11. Rapaz, né que fica bom demais?
    Gostei muito, estou usando em meu blog!
    *-* funcionando certinho. Parabéns;
    e até o blog de teste eu gostei rsrs... s2

    ResponderExcluir
  12. Oi Jeff, queria ver contigo se você pode me ajudar.
    Estou montando um blog no Blogger e gostaria de criar um ícone tipo "Like", pra que quando um leitor gostasse da postagem ele clicasse nesse ícone e automaticamente aparecesse quantas pessoas gostaram do post. Sei que esse ícone tem de ser feito com Javascript, mas eu manjo muito pouco de JS, entendo de css e html, mas JS eu sou uma negação. Será que você consegue me auxiliar, ou sabe me indicar algum site que ensine? Eu vi um botão parecido nesse blog http://www.redcarpetlovers.com.br/, em cada post tem um coraçãozinho pra clicar mostrando que amou o post. Se você puder me ajudar eu ficarei muitíssimo agradecida e até faço um post de agradecimento e indicação. Fico aguardando sua resposta. Abraço!

    ResponderExcluir
  13. Jesielle vou ver o que posso fazer, irei pesquisar mais sobre isso. ;)

    ResponderExcluir