Cara Membuat Widget Informasi Kecepatan Loading Halaman Blog

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 Informasi Kecepatan Loading Halaman Blog 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. 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”

    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 Informasi Kecepatan Loading Halaman dari saya semoga bisa bermanfaat bagi kalian. Apabila ada yang ingin ditanyakan, silahkan tinggalkan di kotak komentar,pasti saya balas ^_^. Simak juga artikel Memperbaiki Postingan Yang Tidak Muncul Di Homepage Blogger mungkin saja teman2 membutuhkan literaturnya dan simak juga semua artikel di NguentenPon™.

Terima kasih dan sampai jumpa
 

Admin :

Penulis : Rizki Indra Prasetyawan
Fb : Rizki Indra Prasetyawan


Sumber : 123 Trik Tersembunyi


Kata Kunci : Cara Membuat Widget Informasi Di Blog


Mau Copas?
     Silahkan copas namun harus diedit dan tidak boleh sama persis serta harus disertai sumber link.
https://nguentenpon.blogspot.co.id/2015/07/cara-membuat-widget-informasi-kecepatan-loading-halaman-blog.html

Related Posts:

Tweet