Cara membuat widget speed test pada blog

Faronesia.com - Hallo sahabat faronesia, apa kabar anda semua? Semoga sehat dan selalu dalam rahmatnya tuhan yang maha esa. Kali ini admin akan membagikan tutorial singkat yaitu cara membuat widget speed test pada blog. Yang pasti akan admin jelaskan tutorialnya secara jelas agar para anda paham cara pemasangannya.

Speed test blog
Apa sih speed test? Speed test adalah alat pengukuran tes kecepatan tertentu sedangkan speed test blog yang akan kita bahas kali ini adalah suatu widget yang bisa mendeteksi kecepatan loading blog yang anda miliki.

Fungsi/kegunaan
Fungsi dari widget ini ialah seperti yang telah dijelaskan tadi bahwa speed test akan mendeteksi kecepatan loading blog yang anda miliki. Ketika blog yang anda miliki kinerjanya load melemah maka pendeteksian kecepatan akan dimunculkan dengan angka yaitu hitungan detik.

Cara membuat widget speed test pada blog

  • Masuk ke dashboard blog anda
  • Lalu klik menu tata letak
  • Selanjutnya klik tambahkan gadget
  • Lalu pilih HTML/javascript
  • Pastekan kode dibawah ini
<div style="background:#1e90ff; padding: 5px; border:2px border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; color:#ffffff">
<center>
<b>Speed test web faronesia</b>
</center>
<center>
<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>
  • Lalu klik simpan
Selanjutnya lihat tool widget speed test yang baru saja anda pasang di blog anda.

Untuk lebih jelasnya klik demo dibawah ini
CATATAN:
Jika anda tidak puas dengan tampilan tersebut anda bisa memodifikasi kode diatas sesuai keinginan anda.

Demikianlah cara membuat widget speed test pada blog semoga bermanfaat dan menambah wawasan para sahabat blogger. jangan lupa share dan jika ada tanggapan serta masukkan silahkan masukkan pada kolom komentar yang telah tersedia.

Iklan Atas Artikel

grup blogger indonesia

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel