Sobre o Blog

MamanunesO Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade.

Info

6.9.10

image
Como colocar um simpático  conjunto de ícones, em gadget fixo na lateral do blog, com efeito JQuery (deslizante), desenhado em CSS.
Encontrei em um site Árabe Blogspacetech há alguns meses, esse truque muito bacana para atrair  e estimular os leitores a assinarem os feeds, acompanhar o blog em redes sociais, fazer contato, etc. Peguei os códigos, fiz umas adaptações e vou ensinar como instalar.
Você pode ver em ação NESTA página.
Vamos lá:
Copie todo o código CSS abaixo. Observe que você poderá alterar as cores de fundo e bordas do botão, se quiser, assim como substituir os ícones por outros modelos. No site FIND ICONS você encontra uma enorme variedade de ícones para tudo o que imaginar.

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:#141414;  /* Cor de fundo do botão */
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;  /* 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 {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .twitter a {
background-image:url(http://4.bp.blogspot.com/_DCJ4PAWLOdE/TIQlsr_XkyI/AAAAAAAAEtM/2f7I75luHyI/s1600/1283728665_twitter_47.png);
}
ul#menusisi .comentários a {
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a {
background-image:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .contato a {
background-image:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
Dentro da página “Editar HTML”  Cole o código CSS ANTES/ACIMA do seguinte código:
]]></b:skin>
Agora copie o Script abaixo:
<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>

Cole ANTES da tag </head>

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='comentários'><a href='http://SEU_BLOG.blogspot.com/feeds/comments/full' title='Comentários'/></li>
<li class='contato'><a href='mailto: SEU_EMAIL' title='Contato'/></li>
</ul>
Cole ANTES da tag </body> (No final da página)
Prontinho!
Espero que gostem
Lembrando que com um pouco de paciência, você poderá mudar todo o desenho, alterar cores e deixar seu seu jeito, ou do jeito do seu blog.
Beijo da Mama ♥

15 comentários

Max Martins

Oi, Mama!

Excelente dica!
Há algum tempo penso em fazer algo parecido. Geralmente, a gente vê esse tipo de gadget só para o Twitter. Gostei mais assim.
Vou experimentar no CataBlogando.

Visitei o site em árabe e fiquei doidinho tentando ler...rs

Abração

pedro

tem esse truque para wordpress? comprei um blog do wordpress mas não sei muito esses detalhes tecnicos.
se tiver me manda um e-mail: phbuzzblog@gmail.com

Júnior Gonçalves

Que efeito espetacular esse Gadget, adorei! Além disso foi muito fácil de implementar =D

Cenystro

pode me dar um help?
Fiz tudo certinho
mas o meu nao fica com esse efeito
quando passa o mouse ele expande sabe?
pode me ajudar?

Cenystro

A nao precisa
ja concertei
adoreiiii muito obrigado pela dica

dellapasqua10

Olá Mama,
show de bola, ficou muito 10. Tenho aprendido muito com vc e meus blogs tem ficado como quero, graças a suas dicas. Continue postando coisas maneiras. Obrigado e abraços.
Fábio

Coluna Gay

:-D Muito Boa esta dica! Queria organizar os meus ícones mas achava um espaço adequado na barra lateral. Por acaso este código deixa a págian abrir mais lentamente?

Coluna Gay

Um tetalhe, talvez esta minha dica ajude alguem que tenha o mesmo problema. O código da segunda parte, colocado no lugar indicado trava a apresentação de slides - uso um templates adaptado do wordpress; então testei o código acida do primeiro "head" que aparece no template, agora está funcionando super bem!

The Last Hacker - GW

Mano mto legal esse gadjet

venho procurando ele a meses e consegui achar graças a vcs e graças ao google digitando menusisi achei vcs

galera entrem no meu blog aew http://worldhackers-wh.tk ou http://www.giovanicastilho-gc.blogspot.com os dois a mesma coisa so muda o endereço e vlw mama

Kelvin

Mama
me ajuda eu coloquei tudo sertinho so que os botoes
não ficam fixado no meio do blog.
ele fica la embaixo no fim do Site
por favor me jude preciso muito disso
Muito Obrigado e parabéns pelo site.

Kelvin

Ahhh Deixa Vai
Consegui Fixalo
Mas não ficou com o efeito
Mesmo assim valeo

tata-nadaver

Flor amei a dica e já copiei, só que estou com um pequeno probleminhas, o botão do twitter é o unico com não funfa direito o resto ta de boa, se puder me ajudar ficarei mega grata.
Bjinhu.

Lucas Brito

Ótimo tutorial, obrigado. Só modifiquei o menu de comentários pela página do face do meu blog, e mudei o ícone pelo do face, ficou muito bom.
http://electromusicnow.blogspot.com/

Ricardo Silva

Título:

Codigos para Blog


Descrição:

Um Blog sobre códigos, Rede Social e web design, que conta com diversos códigos, para divulgar sua página de Fãs site ou blog


Kewords:


códigos,codigos,like invisivel,invisível,botao curtir,botão,site ou blog


http://codigosparabloggergratis.blogspot.com.br

Postar um comentário

Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.