.

quinta-feira

Textual description of firstImageUrl

Menu Expansível de Redes Sociais

ACESSOS:
Deixe seu comentário


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

RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}