Facebook like Floating Online visitor counter with Translator (For Bloggers)

­

 

New Online Counter Widget,facebook like widget for blog

 

Many of the bloggers use the different tools like: Google Analytics, Sitemeter etc to track,analyse and monitor all the visitors visiting their blogs.But when the time comes to manage this Tracker,they just leave it making their blog look ugly.
Following the immense popularity of Floating widget for facebook like box,In this post I came up with a new stunning widget for managing these tracking tools.It is quite similar to the facebook online viewer and translation box powered with Google Translator.
In this post to track the visitors hitting your blog/site I have used FreeOnlineUsers.Com as the tool to track visitors.
Follow the given steps to install this widget
1.First you need to signup to FreeOnlineUsers.Com and get your html code.(Click here to learn how to get that  code.)
2.Then Go to Blogger and log in with your account.
3.Go to Design>Edit HTML
4.Find the   ]]></b:skin> tag. (press ctrl + F to open the find box and copy the code to find box for quick finding)
5.Before that copy the given code

 

.translate {display: none;}
    .floatingsndsoft {
        background-image:url(https://2.bp.blogspot.com/_KcNGiXS8tIE/TQZ2wEh1atI/AAAAAAAAAaw/lmJtxg2ZtNY/s1600/bg.jpg);
        Position:fixed;
        Bottom:0;
        Right:20px;
        Width:200px;
        Height:19px;
        border:#999999 solid 1px;
        padding-left:10px;
        padding-top:5px;
    }
    .floatingsndsoft_translate {
        background-image:url(https://2.bp.blogspot.com/_KcNGiXS8tIE/TQZ2wEh1atI/AAAAAAAAAaw/lmJtxg2ZtNY/s1600/bg.jpg);
        Position:fixed;
        Bottom:0;
        Right:220px;
        Width:20px;
        Height:19px;
        border:#999999 solid 1px;
        padding-left:10px;
        padding-top:5px;
    }
    .translation_box{
        height:38px;
        width:220px;
        position:fixed;
        right:20px;
        bottom:25px;
        padding:5px;
        border:#666666 1px solid;
        background:#FFFFFF;
    }

 

 

5.Again search for <head> tag. (press ctrl + F to open the find box and copy the code to find box for quick finding)
6.Before <head> tag copy the given code

 

<script language=’javascript’ type=’text/javascript’>
    function showHide(shID) {
       if (document.getElementById(shID)) {
          if (document.getElementById(shID+&#39;-show&#39;).style.display != &#39;none&#39;) {
             document.getElementById(shID+&#39;-show&#39;).style.display = &#39;none&#39;;
             document.getElementById(shID).style.display = &#39;block&#39;;
          }
          else {
             document.getElementById(shID+&#39;-show&#39;).style.display = &#39;inline&#39;;
             document.getElementById(shID).style.display = &#39;none&#39;;
          }
       }
    }
</script>

 

 

6.Save your template Go to design
·         Click on  Page Elements
·         Then  Add a gadget and choose HTML/java script
7.Copy the given code and save it

 

<div class=”floatingsndsoft”>
&nbsp;&nbsp;&nbsp <img src=”https://4.bp.blogspot.com/_KcNGiXS8tIE/TQZ3fBZmfJI/AAAAAAAAAa0/dFzg5JPPioA/s1600/online.jpg” border=”0″ /><strong>&nbsp;Online ( <script type=”text/javascript” src=”https://st1.freeonlineusers.com/on4.php?id=XXXXX”> </script> ) </strong>
</a>
</div>
<div class=”floatingsndsoft_translate”>
      <a href=”#” id=”translat-show” class=”showLink” onclick=”showHide(‘translat’);return false;”><img src=”https://3.bp.blogspot.com/_KcNGiXS8tIE/TQcWaIBoi8I/AAAAAAAAAa8/gmpki4ClF4g/s1600/translate.JPG” border=”0″/></a>
      <div id=”translat” class=”translate”>
      <div class=”translation_box”>
        <center>
<div id=”google_translate_element”></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: ‘en’
}, ‘google_translate_element’);
}
</script><script src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>        </center>
      </div>
      <a href=”https://www.sabinb.com.np/blog/index.php/2014/09/20/floating-online-visitor-counter-wi/” id=”translat-hide” class=”hideLink” onclick=”showHide(‘translat’);return false;”><img src=”https://3.bp.blogspot.com/_KcNGiXS8tIE/TQcWaIBoi8I/AAAAAAAAAa8/gmpki4ClF4g/s1600/translate.JPG” border=”0″/></a>
      </div>
</div>

 

 

Replace the above red marked code with the code that you got from FreeOnlineUsers.Com.

That’s it………..Enjoy

First Published on 11 Nov 2012.Republished on 2014 sept 20

Please Comment regarding this post.Feel free to comment if you have any problem or views regarding any post……

You may also like...