Membuat Widget Page Load Timer untuk Website dan Blogger

Pada kesempatan ini, saya akan membagikan kepada Anda sebuah widget untuk menghitung lamanya pemuatan suatu halaman web, yaitu Page Load Timer. Dengan widget ini, Anda akan lebih mudah memantau berapa waktu yang dibutuhkan untuk memuat seluruh konten yang ada.

Nilai yang dihasilkan bisa selalu berbeda, walaupun Anda mencoba untuk memuat halaman yang sama, hal ini terjadi karena variasi kecepatan Internet untuk mendownload halaman web selalu dinamis.

Untuk menggunakan widget ini pada website atau blog Anda, silahkan masukkan kode berikut ini:

<style>
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);
#time_load{
    -webkit-box-shadow: 0px 2px 4px rgb(0,0,0);
    -moz-box-shadow: 0px 2px 4px rgb(0,0,0);
    box-shadow: 0px 2px 4px rgb(0,0,0);
    width: 250px;
}
#time_load table{
    border-collapse: collapse;
    border: 1px solid;
    margin: 0;
    width: 250px;
    overflow: hidden;
}
#time_load th{
    background: #2ecc71;
    color: white;
    padding: 0 8px;
    text-align:center;
    min-width: 100px;
    font : bold 14px 'Ubuntu Condensed';
    text-shadow:1px 2px 3px rgb(0,0,0);
}
#time_load th,
#time_load td{
    border: 1px solid black;
    line-height: 30px;
    height: 30px;
}
#time_load table td:nth-child(2n){
    text-align: right;
}
#time_load table td{
    padding: 0 4px;
    font: normal 12px 'Ubuntu Mono';
    vertical-align:middle;
}
#time_load table tr:hover{
    background: #bdc3c7;
}
#time_load_link{
    text-align: center;
    height: 20px;
    background: #9b59b6;
}
#time_load_link a{
    color: white;
    text-decoration: none;
}
#time_load_link a:hover{
    text-decoration: underline;
    cursor: pointer;
}
</style>
<div id="time_load">
    <table>
        <tr>
            <th>Speed</th><th>Value</th>
        </tr>
        <tr>
            <td>document load time</td><td id="value1"></td>
        </tr>
        <tr>
            <td>window load time</td><td id="value2"></td>
        </tr>
    </table>
    <div id="time_load_link"></div>
</div>
<script>
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 h=8.9(),i=0,5=0,6=0,7=0,1="<a b=\'c://d.e.f/g/3/2-j-k-l-m-n-o.p\' q=\'r\'>s t 2!</a>";u.v(\'w\').x=1;',34,34,'|getTimeLoadLink|widget|04|var|getTimeLoad|getvalue1|getvalue2|Date|now||href|http|dhanynurdiansyah|blogspot|com|2015|timerStart|getTimeReady|page|load|timer|untuk|website|blogger|html|target|blank|Get|this|document|getElementById|time_load_link|innerHTML'.split('|'),0,{}))
$(document).ready(function() {
    getTimeReady = Date.now() - timerStart;
    document.getElementById('value1').innerHTML = getTimeReady+"ms";
 });
$(window).load(function() {
    getTimeLoad = Date.now() - timerStart
    document.getElementById('value2').innerHTML = getTimeLoad+"ms";
});
</script>

Untuk memasukkan widget ini ke blogger, pilih tata letak >> tambahkan Gadget >> HTML/Javacript