Ícones para Redes Sociais com Contador de Pessoas Online no Blogger - Exclusivo
Nesta postagem compartilho com vocês que acompanham sempre o DicasHot um novo tutorial, mostrando como se coloca no blog ícones para redes sociais com efeito JQuery e ainda por cima um contador de pessoas online. Tudo para deixar seu blog ainda mais da ora!!!
Para colocar no blogger... Entre em "Layout" - "Adicionar um Gadget", e cole o seguinte código
<style>
#redes-busca {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcodfSGnhqSi9KcMjxTkKv9Gl75I6uLjwHcVLARGjfvyq6DQeCy1Mabc2GqblEjQ5ALCdLjDHl0nqVRs6yNIZPNFYUpgWiGDP302aKEdlMCsbVJepiPLBATPfcyYjocWr67z6UqGubO_U/s1600/redes.png) no-repeat;width: 330px;height: 47px;margin: 0px 0px 0px 0px;}
.redes{width: 147px;height: 43px;position: relative;top: 2px;left: 1px;}
.online-DicasHot{width: 90px;height: 34px;position: relative;top: -34px;left: 195px;}
.line{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz58UhU-NxnaoWfk6Dk0HP0ZRNQ1A-FKmjaOJ54c8EMTutmv-WvqxFC_pjLFjTY-KJWoF8VKTkIxo53Q1SwLKMOxAOyovRSLeRrMSVStWUDKf4_4TfLHSRoyG-6XzbysJdtZTftpbREx0/s1600/redes.png);width: 147px;height: 3px;position: relative;top: -32px;left: 5px;}
.busca{width: 320px;height: 39px;position: relative;top: -25px;left: 14px;}
.pesquisa {height:25px; width:280px; color:#474747; background-color:transparent; border-color:transparent; border-style:Solid;border-width:0px; font-family: 'Questrial', sans-serif;font-size: 18px;}
.twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6_TGbXaAn9I27_jxNllHaaMvtdJjptLRiae9qvOL_bVtY-_2nA91lxOE5o1ikNci9fK89AWMCXBARscJ1vZi0GgsabJupEMV5cWf6m80PGxvZUrDqItHLDeRq9-0S7Bj9txvLrTnD64/s1600/twitter-bg.png);
background-repeat: no-repeat;
width: 49px;height: 43px;
background-position:0px 0px;
position: absolute;-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;-o-transition-duration: 0.4s;
}
.twitter:hover{
background-position:0px -88px;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}
.twitter1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaE9ykqYqWdGDCSYH_UUfnBQTd5zSDtz5nRy8wElf7CHBEQI9wHHSr7GmrDKecOPfBCB1RPCAlNmJdU7DSIEW0s3vmER-TPk81g77bFTbPE2BMy7vDvV84aLUwYMg_tcTzMghQmx32Fio/s1600/TWITTER-2.png);
background-repeat: no-repeat;
width: 49px;height: 43px;
background-position:0px -45px;
position: absolute;
}
.twitter1:hover{
background-position:0px 2px;
}
.facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihb_VDZ1vCNiUhzHVwr5t0-jGXqzZ1F77qfPPGVIkpnv0gxnYf55jd7t6da8KCPOzTYykN4vNGUHMicZjmqzD10M8f9oyjDwJGHRuDu8eFHrmKOjBCl60siqAhLNodLqmB93xAk00LX1s/s1600/face-bg.png);
background-repeat: no-repeat;
width: 49px;height: 43px;
background-position:0px 0px;
margin-left: 49px;
position: absolute;-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;-o-transition-duration: 0.4s;
}
.facebook:hover{
background-position:0px -88px;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}
.facebook1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWIgaQOMpgDQQZfOJQvzfOeYnAUh7lO2I5n02-m3J0TuZwQ3haaAGmN0yCPeq6PJrGonoMjSRJ1p4R2VfI67muDsacuFC8D45sYpcY0f-uhSvccLKwNWUVGCQqqcYxpe5MdYy6sJ2vJaM/s1600/face-2.png);
background-repeat: no-repeat;
width: 49px;height: 43px;
background-position: -49px 0px;
position: absolute;
}
.facebook1:hover{
background-position: 0px 0px;
}
.feed{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEZUKyEqMf42kWp_uu1q8vaeY2mYJszv7QEAfO3VR-gUPpoRIHiaTsRgKOzXbgc-8KClLVoCT2bOdZQyj_6vFWZ86O1An7WpPUspr0KNaA5xMzt_xXF3EbUjFwjzzxl8skciED3cq2tE/s1600/feed-bg.png);
background-repeat: no-repeat;
width: 49px;height: 43px;
background-position:0px 0px;
margin-left: 98px;
position: absolute;-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;-o-transition-duration: 0.4s;
}
.feed:hover{
background-position:0px -88px;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}
.feed1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLQ8QnI4YPZKJ-iGhDuwENUQDsr9_Nv-4yNFJGV0h1SSKtuwnzeKw8bRWDM_sHPoqlIT-GIrnkuLJH5XZWJhTLzt_gavylQZ-k9NeQniboX3M7z-4d9KmklLMBv1m8L5hSxwjkypwW-A/s1600/feed-2.png);
background-repeat: no-repeat;
width: 49px;height: 44px;
background-position: 2px -45px;
position: absolute;
}
.feed1:hover{
background-position: 0px 0px;
}
.comment-form{
width:520px !important;
max-width:520px !important;
}
.deleted-comment {
color:gray;
font-style:italic;
font-weight: normal;
}
</style>
<div id='sidebar'>
<div id='redes-busca'>
<div class='redes'>
<a class='twitter' href='URL DO SEU TWITTER'>
<span class='twitter1'></span>
</a>
<a class='facebook' href='URL DA SUA PÁGINA NO FACEBOOK'>
<span class='facebook1'></span>
</a>
<a class='feed' href='URL DO SEU FEED'>
<span class='feed1'></span>
</a>
</div>
<div class='online-DicasHot'>
<script id="_wau0ir">var _wau = _wau || []; _wau.push(["classic", "6tesgbgadl3z", "0ir"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script></div></div> </div>
<div style="text-align: right;">
<span style="color: #444444; font-family: Times, Times New Roman, serif; font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/2013/11/icones-para-redes-sociais-com-contador.html"><span style="color: #444444;">Dicashot</span></a></span> </div>
A parte destacada de vermelho, é o código do contador online. Não use este mesmo que está no código, pegue o seu, porque se não as pessoas que estão online no DicasHot estarão online no seu blog também.
Para pegar o seu próprio contador de pessoas online, entre no site WHOS.AMUNG e pegue o código do seu contador e cole no lugar do que está destacado de vermelho.
Tendo feito isto, estará pronto!!!
IMPORTANTE:
Por favor, não tire os créditos que estão no gadget.
