HackingUniversity - Hacks . Tricks . How-To's

05 December 2012

Loading Time Calculator Widget for your Blogger Blog

If you usually visit any online website to calculate loading time fro your blog or individual pages on it than now it is not necessary as we are going to show you how you can add loading time widget to your blogger blog for easily checking out in how many seconds your blog loaded up. With this easy script it will automatically start the clock and will show you in how many seconds did exactly your page loaded up. So now you can display that time to your visitors and anyone who open’s up your blog.

blog-load-time-calculator

  1. Visit Blogger > Template > Edit HTML.
  2. Now press Ctrl + F and search for </head> tag and paste below code above it.

    <script type='text/javascript'>
    var d = new Date();
    var starttime = d.getTime(); //Get the start time
    </script>

  3. Now again press Ctrl + F and search for </body> tag and paste below code above it.

    <script type='text/javascript'>
    var d2 = new Date();
    var endtime = d2.getTime(); //Get the end time
      //Find the difference between the start and end times
    var totaltime = (endtime - starttime)/1000;
      //Round 2 decimal places
    var result = Math.round(totaltime*100)/100;
      //Output results to a "P" element
    document.getElementById("loadtime").innerHTML = "It took "+ result +" seconds to load this page, please feel free to browse the blog now !";
    </script>

  4. Now Save your template and navigate to Blogger > Layout.
  5. Now add a new gadget and paste below code in it and save it.

    <font size=4 color=#040100 face=verdana><p id="loadtime" align=center>Welcome visitor! Please wait till blog loads...</p></font>

  6. Now just refresh your blog and see in how many seconds did your blog load up.
  7. You can change the text in third point to your desired one but make sure that "+ result +" is not modified as it will display the seconds.