Í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(http://3.bp.blogspot.com/-jiFQ1K_JdVM/UNiJRpxr9XI/AAAAAAAAA7A/rqA3YeywruQ/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(http://4.bp.blogspot.com/-ng-GjKqamtk/UNmO_k7F5bI/AAAAAAAAA8w/Rm1OgIgW2pI/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(http://1.bp.blogspot.com/-Q7DHHl8F9dI/UNmPGxhik8I/AAAAAAAAA84/VsK6tXdzWZA/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(http://3.bp.blogspot.com/-YAsvDFTMF6M/UNmPNpPUZtI/AAAAAAAAA9A/n0ko2yevaUA/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(http://4.bp.blogspot.com/-c2__I0YH5zM/UNmPTvQP4TI/AAAAAAAAA9I/9USoUaHiOeU/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(http://3.bp.blogspot.com/-wlnZuYzQw1w/UNmPZYRrFGI/AAAAAAAAA9Q/uV7wDnFvUSo/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(http://2.bp.blogspot.com/-Cnni0mGNS4g/UNmPe-zncxI/AAAAAAAAA9Y/B5wIGF8O0sk/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(http://1.bp.blogspot.com/-zuKQtIQ6cT8/UNmPlGqLGCI/AAAAAAAAA9g/7ecNsPdu67U/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.