18 de jun de 2012

Menu social com efeito hover

DEMO



Menu social com efeito hover para colocar ao final dos posts, com vários botões de várias páginas de indexação e divulgação.



Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011










Agora procure por: ]]></b:skin>  




Acima dele, cole o código abaixo:



/*Sociais--------------------------------------------------------------------*/
#templeacesso-sociais {  clear: both;padding: 2px 0px 20px 0;}
#templeacesso-sociais ul {list-style: none;clear: none;padding: 0px 0px ;margin: 45px 0;}
#templeacesso-sociais ul li {display: inline;background:none;margin:0;padding:0;}
#templeacesso-sociais ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('http://4.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#templeacesso-sociais ul li a.twitter    {background-position: -0px -0px;   }
#templeacesso-sociais ul li a.twitter:hover {background-position: -0px -33px;  }
#templeacesso-sociais ul li a.facebook   {background-position: -32px -0px;  }
#templeacesso-sociais ul li a.facebook:hover {background-position: -32px -33px; }
#templeacesso-sociais ul li a.stumbleupon  {background-position: -64px -0px;  }
#templeacesso-sociais ul li a.stumbleupon:hover{background-position: -64px -33px; }
#templeacesso-sociais ul li a.digg    {background-position: -192px -0px; }
#templeacesso-sociais ul li a.digg:hover  {background-position: -192px -33px;}
#templeacesso-sociais ul li a.reddit   {background-position: -160px -0px; }
#templeacesso-sociais ul li a.reddit:hover  {background-position: -160px -33px;}
#templeacesso-sociais ul li a.google   {background-position: -128px -0px; }
#templeacesso-sociais ul li a.google:hover  {background-position: -128px -33px;}
#templeacesso-sociais ul li a.del-icio-us  {background-position: -480px -0px; }
#templeacesso-sociais ul li a.del-icio-us:hover{background-position: -480px -33px;}
#templeacesso-sociais ul li a.mixx    {background-position: -96px -0px;  }
#templeacesso-sociais ul li a.mixx:hover  {background-position: -96px -33px; }
#templeacesso-sociais ul li a.technorati  {background-position: -416px -0px; }
#templeacesso-sociais ul li a.technorati:hover {background-position: -416px -33px;}
#templeacesso-sociais ul li a.linkin   {background-position: -256px -0px; }
#templeacesso-sociais ul li a.linkin:hover  {background-position: -256px -33px;}
#templeacesso-sociais ul li a.yahoobuzz  {background-position: -448px -0px; }
#templeacesso-sociais ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#templeacesso-sociais ul li a.myspace   {background-position: -512px -0px; }
#templeacesso-sociais ul li a.myspace:hover {background-position: -512px -33px;}
#templeacesso-sociais ul li a.more    {background-position: -576px -0px; }
#templeacesso-sociais ul li a.more:hover  {background-position: -576px -33px;}


Salve !


Clique em "Expandir modelos de widgets"

Procure por:

 <div class='post-footer-line post-footer-line-2'>

Cole então o próximo código depois dele. Salve e já está.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='templeacesso-sociais'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Divulgue este post em twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post em Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Salve este post no Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Divulgue este post no Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Favorite no Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Divulgue este post em Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if><div style='clear:both;'/>


6 comentários:

  1. Wonderful Design Blogs, Such a great list. Thanks for sharing all these blogs all are very useful to every one

    Webdesign Belgium

    ResponderExcluir
  2. Eu sigo todos os seus tutoriais, porém apenas alguns dão certo!
    Não consigo colocar nem esse nem aquele que recomenda entre outros... o que fazer?

    ResponderExcluir
  3. Respostas
    1. Otávio, este menu só aparece nas páginas internas do blog. Abraços

      Excluir
  4. muito bonito este gadget eu adicionaria no meu blog mais meu template ja veio com ele.
    mais mermo assim voçês estam de parabêns

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube