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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPY8UYGy6Pl3QjItlUJtZYXEH3-Iq_Xv-Efc74xv4ru9exP6DhvI49ix1Srg6b8Gt4WYnr7zwufClxGGCtfrWuYxZppclZQF1dQ_u0UhL7uSRLWlxZCoksKNgF8DkcU2iVrzGYAVBnSajL/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;'/>