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(http://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(http://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=”http://4.bp.blogspot.com/_KcNGiXS8tIE/TQZ3fBZmfJI/AAAAAAAAAa0/dFzg5JPPioA/s1600/online.jpg” border=”0″ /><strong>&nbsp;Online ( <script type=”text/javascript” src=”http://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=”http://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=”http://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=”http://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...

8 Responses

  1. Anonymous says:

    nice post………Keep it up

  2. Anonymous says:

    REally cool work……..Thanks Sabin Bhatta

  3. Anonymous says:

    This has no chat feature.,……..

  4. Rock says:

    nice buddy……….

  5. Devesh says:

    oh..thanks sabin..its vry intersting..

  6. Anonymous says:

    Yes … the design is clearly needed to be changed 🙂
    What would be brighter , nebudu (

  7. Ryan counts says:

    Floating visitor counter is something new.Well adding visitor counter is always a good idea.It not provide you the wealth of information about your visitors but also shows your popularity as well.It provide a wealth of useful information that give insights regarding website performance and help a website owner make improvements.Free online user counter tools are available in order to help you track the activities of customers instantly without any hassle.
    http://counterforsite.com/free-online-user-counter-why-use-a-third-party-hit-counter/

  8. sabin.bhatta says:

    @Devesh Thanks devesh Readers like you will always inspire us to innovate new ideas in blogging

Leave a Reply

Your email address will not be published. Required fields are marked *