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>
/*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 == "item"'>
<div id='templeacesso-sociais'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Divulgue este post em twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Digg'/></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post em Reddit'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Salve este post no Google'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Delicious'/></li>
<li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Divulgue este post no Mixx'/></li>
<li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Favorite no Technorati'/></li>
<li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Divulgue este post em Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Myspace'/></li>
<li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if><div style='clear:both;'/>
Eu sigo todos os seus tutoriais, porém apenas alguns dão certo!
ResponderExcluirNão consigo colocar nem esse nem aquele que recomenda entre outros... o que fazer?
:^o
ResponderExcluirnaum prestou naum!!!!!!!!!!!
ResponderExcluirOtávio, este menu só aparece nas páginas internas do blog. Abraços
Excluirmuito bonito este gadget eu adicionaria no meu blog mais meu template ja veio com ele.
ResponderExcluirmais mermo assim voçês estam de parabêns