Cara Membuat Widget Keren Untuk Mengetahui Kecepatan Loading Halaman Blog / Web

FIAN PANIC - Yang suka kepo nih ane share lagi ya brot,,,,Cara Membuat Widget  Keren Untuk Mengetahui Kecepatan Loading Halaman Blog / Web Menjelajahi blog atau blogwalking merupakan hal yang menyenangkan dan sarana untuk berbagi ilmu,serta media promosi blog. Dengan adanya fitur dan kecepatan akses ke blog yang mudah serta konten yang menarik pastinya kita akan sering berkunjung dan belajar dari si pembuat blog. Berbicara mengenai kecepatan akses, apakah kalian sudah pernah melakukan tes kecepatan terhadap blog kalian masing-masing ? kalau belum, artikel ,Cara Membuat Widget  Keren Untuk Mengetahui Kecepatan Loading Halaman Blog / Web ini sangat cocok sekali untuk disimak dan diterapkan.

   Kecepatan untuk menampilkan blog sangatlah bergantung dengan kualitas koneksi banyaknya komponen yang menyertai halaman tersebut. Semakin jelek kualitas koneksi dan semakin banyak atribut halaman maka waktu loading akan semakin lama, dan biasannya di jaman sekarang kecepatan internet pastinya jarang sekali yang leot hehehe. Kalian bisa menampilkan informasi kecepatan loading ini pada halaman blog melalui fitur widget. Berikut ini langkah-langkahnya :

Sebelumnya copy dulu script berikut

<div style="background:#ffffff; padding: 5px; border:2px dashed #777777; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px;">
<center>
<b>Speed Test</b>
</center>
<center>
<p></p>

<script type="text/javascript">
//<![CDATA[
var startTime = new Date();
function currentTime() {
var a = Math.floor((new Date() - startTime) / 100) / 10;
if (a % 1 == 0) a += ".0";
document.getElementById("endTime").innerHTML = a;
}
window.onload = function() {
clearTimeout(loopTime);
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
document.write('<i>Anda Memuat Halaman ini dalam</i> <span id="endTime">0.0</span><i> Detik.</i>');
var loopTime = setInterval("currentTime()", 100);
//]]>
</script>

<p><input classs=reload-button onclick="window.location.reload()" type="button" value="Refresh"/></p>
</center>
</div>
<style>
.reload-button {
    display: inline-block;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: rgb(83, 143, 190);
    padding: 3px 5px;
    font-size: 12px;
    border: 1px solid rgb(45, 104, 152);
    background-image: -moz-linear-gradient(center bottom , rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
    border-radius: 3px 3px 3px 3px;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 6px 0px rgb(43, 99, 143), 0px 3px 15px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 0px 3px rgba(255, 255, 255, 0.5) inset;
    margin: 5px 0 10px;
}
.reload-button:hover {
    background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
    background-image: -webkit-gradient(
        linear,
    left bottom,
    left top,
    color-stop(0, rgb(79,142,191)),
    color-stop(1, rgb(102,166,214))
    );
   cursor:pointer;
}
.reload-button:active {
    box-shadow: 0px 2px 0px rgb(43, 99, 143), 0px 1px 6px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 0px 3px rgba(255, 255, 255, 0.5) inset;
    background-image: -moz-linear-gradient(center bottom , rgb(88, 154, 204) 0%, rgb(90, 150, 199) 100%);
    transform: translate(0px, 4px);
}
</style>

1). Login ke Dashboard blogger dan buka halaman layout >> add a gadget
2). Pilih HTML/Javascipt
3). Salin Kode dan lakukan pastel pada jendela gadget yang baru dibuat.
4). Save, dan lihat hasilnya

 “ Note : Tombol Refresh berfungsi untuk memuat ulang (reload) halaman jika diklik”

Penampakan hasil akhir di blog saya nih :

    Bagaimana teman-teman? Sudah tau kan kecepatan blog kalian masing-masing. Apabila kecepatannya tidak sesuai keinginan kalian, maka cobalah untuk mengurangi komponen yang tidak penting dan lebih fokus untuk kemudahan akses bagi pengunjung agar blog kalian memiliki pengunjung setia hhe..

    Sekian Artikel ,Cara Membuat Widget  Keren Untuk Mengetahui Kecepatan Loading Halaman Blog / Web dari saya semoga bisa bermanfaat bagi kalian

Keyword Terkait : cara mengecek kecepatan loading blog, cek kecepatan blog, gtmetrix,