10 Beldades Fitness, que facilmente,
colocaria seu casamento em risco - FireLink
Você gosta de tatuagem?
(+18)
Bella Thorne
só de lingerie
Sites que vocês adultos
Vão Gostar - Link Fixo

Menu Expansível de Redes Sociais


Menu Expansível de Redes Sociais


Neste post irei falar aqui no DicasHot como você pode estar colocando um excelente menu expansível do lado esquerdo do seu blog.

Inserindo o código HTML

1° - Entre no painel do seu blog e clique em "Design";

2° - Em seguida, clique em "Editar HTML";

3° - Em seguida, segure as teclas CTRL+F e procure por: </head>

4º – E Acima dele, cole o seguinte código:
<script type='text/javascript'>
window.onload = function socialButtons() {
       $(&#39;.social_site&#39;).hover(function() {
           $(this).stop().animate({
               left: &#39;0px&#39;
           },
           &#39;fast&#39;)
       },
       function() {
           $(this).stop().animate({
               left: &#39;-140px&#39;
           },
           &#39;fast&#39;)
       })
   }
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;pt-BR&#39;}
</script>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' type='text/javascript'/>
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>


5º – Em seguida, segure as teclas CTRL+F novamente e procure por:

]]></b:skin>


6º – E ACIMA dele cole o seguinte código:

body .social_site {cursor: pointer;height: 64px;left: -140px;overflow: hidden;position: fixed;width: 200px;z-index: 10000;}
body .social_closed {left: -170px;}
body .social_open {left: 0;}
body .social_site .icon {background: url("http://i.imgur.com/ZJAg6.png") repeat scroll 0 0 transparent;float: right;height: 64px;width: 60px;}
body .social_site .tray {background: url("http://i.imgur.com/ZJAg6.png") repeat-x scroll 0 0 transparent;float: right;height: 64px;width: 140px;}
body .social_facebook {top: 205px;}
body .social_facebook .icon {background-position: 60px -74px;}
body .social_facebook .tray {background-position: -15px -74px;}
body .social_facebook .tray p {
display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_facebook .tray p a, body .social_facebook .tray p a:active, body .social_facebook .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #077EAB; -webkit-text-shadow: 1px 1px 0px #1F366B; -moz-text-shadow: 1px 1px 0px #1F366B;display: block;font-size: 10px;width: 100%;text-decoration:none;}
body .social_users {top: 340px;}
body .social_users .icon {background-position: 60px -6px;}
body .social_users .tray {background-position: -15px -6px;}
body .social_users .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_users .tray p a, body .social_users .tray p a:active, body .social_users .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}
body .social_gplus {top: 273px;}
body .social_gplus .icon {background-position: 60px 71px;}
body .social_gplus .tray {background-position: -15px -141px;}
body .social_gplus .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_gplus .tray p a, body .social_gplus .tray p a:active, body .social_gplus .tray p a:visited {color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}


7º – Depois, segure as teclas CTRL+F mais uma vez e procure por:

<body>

8º – E ABAIXO do código encontrado, cole o seguinte código:


<div class='social_site social_users' id='social_link_users'><a><div class='icon'/></a>
<div class='tray bg_denovo'><p><a>Siga-nos no Twitter:</a></p>
<p id='users_online_box'><a class='twitter-follow-button' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/Dalton_Dss'>Follow @Dalton_Dss</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://bit.ly/rI5OFm=' style='width: 100px; height: 20px;margin-top: -15px;margin-left: 15px;' title=''/></p></div></div>

<div class='social_site social_facebook' id='social_link_facebook'><a><div class='icon'/></a>
<div class='tray bg_denovo'>
<p><a>Compartilhe:</a></p><div id='orkut_share' style='width:100%;'/><script src='http://www.google.com/jsapi' type='text/javascript'/><script type='text/javascript'>google.load(&#39;orkut.share&#39;, &#39;1&#39;);google.setOnLoadCallback(function(){new google.orkut.share.Button({style:&#39;regular&#39;}).draw(&#39;orkut_share&#39;);}, true);</script>
<div class='orkut' data-href='http://www.orkut.com.br/Main#Community?cmm=122007645' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' style='margin-left: 30px; margin-top: -20px;'/></div></div>

<div class='social_site social_gplus' id='social_link_gplus'>
<a href='#' target='_blank' title='Google+'><div class='icon'/> </a>
<div class='tray bg_denovo'>
<p><a>Dê um +1 no Blog:</a></p><p id='g_plus_box' style='margin-top: -10px;margin-left: 12px;'><g:plusone/></p></div></div>


Tendo feito todos os passos, salve e pronto!!!

Se inscreva e receba nossas atualizações por e-mail:





Cursos 24 Horas

Cursos Online
Menu Expansível de Redes Sociais Menu Expansível de Redes Sociais Reviewed by Muca on 8/15/2013 10:36:00 AM Rating: 5