Ukur Kecepatan Blog Anda Dengan Stopwatch

Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Untuk mengukur kecepatan loading halaman blog, Blogger merekomendasikan untuk menggunakan sebuah tool untuk mengukur atau mencatat waktu yang diperlukan ketika browser membuka sebuah halaman web sampai halaman web tersebut berhasil dimuat sepenuhnya yaitu Stopwatch.

Stopwatch mencatat waktu saat browser mulai memuat URL web sampai browser berhasil memuat seluruh halaman URL tersebut. Dan seperti kita ketahui bahwa kecepatan loading sebuah halaman website dipengaruhi oleh gambar, video, widget, javascript, dan lain-lain. Untuk itu, dengan mengetahui waktu loading blog, maka kita bisa menentukan gambar, widget, atau javascript yang benar-benar sangat dibutuhkan. Jika waktu yang dibutuhkan untuk membuka halaman web terasa cukup lama, maka kita bisa mulai mengoptimasi elemen-elemen blog yang berat atau mungkin menghapusnya jika itu tidak benar-benar dibutuhkan.

Setelah mencoba menggunakan Stopwatch ini, saya tertarik untuk mencoba memodifikasi tampilan form-nya dan memungkinkan untuk bisa disimpan di blog. Silahkan coba demonya dengan memasukan URL blog Anda (homepage atau postingan) pada kolom form-nya.

DEMO

Bagi yang ingin menyimpannya di blog, silahkan simpan kode CSS dan HTML di bawah ini.

Kode CSS

Simpan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

.stopwatch{
    background:#ddd;
    padding:6px 10px 10px;
    margin:0 auto;
    width:400px;
}
.title-widget{
    font-size:14px;
    color:#555;
    padding:0;
    margin:0 0 5px;
    text-align:center;
}
.input-box{
    background: #fff !important;
    border:none;
    padding: 0px 8px;
    color: #555;
    font-size: 12px;
    height: 25px;
    width: 265px;
    margin-right:5px;
}
.input-box:focus,.submit-button:focus{
    outline:none;
}
.submit-button{
    background: #333 !important;
    border:none;
    padding:0;
    color: #efefef;
    font-size: 12px;
    height: 25px;
    width:110px;
    margin:0 auto;
    text-align:center;
    cursor:pointer;
}
.submit-button:hover{
    background: #555 !important;
}

Kode HTML

Saran saya silahkan simpan tool ini di halaman statis blog pada post editor HTML.

<div class="stopwatch">
    <div class="title-widget">Enter the URL to be measured:</div>
<form action="http://www.numion.com/Stopwatch/Start.html" method="get" target="_blank">
   <input class="input-box" type="text" name="Url" onblur='if (this.value == &quot;&quot;) {this.value = &quot;http://&quot;;}' onfocus='if (this.value == &quot;http://&quot;) {this.value = &quot;&quot;;}' value='http://'/>
   <input class="submit-button" type="submit" value="Start StopWatch"/>
</form>
      </div>

Dan jangan kuatir, widget atau tool ini sudah valid HTML5. Untuk tampilannya bisa Anda modif pada kode CSS-nya.

Show Hide Google Translator Widget

Salah satu widget yang penting untuk disimpan di blog adalah widget translator atau widget untuk menerjemahkan bahasa yang digunakan di blog ke bahasa lain yang didukung widget tersebut agar sesuai dengn bahasa pengunjung blog. 

Salah satu widget translator yang bisa kita simpan di blog adalah Google Translator. Namun widget Google Translator ini menambah beban ketika blog dimuat atau cukup berat loadingnya ketika mengakses kode js-nya. Oleh karena itu banyak blog yang tidak menggunakan widget ini.

Untuk itu saya mencoba menambahkan asynchronous pada javascriptnya agar dapat dimuat setelah blog selesai dimuat sehingga tidak menambah beban loading blog dan ternyata widget tetap berjalan normal.

Untuk memanipulasi tampilan widget translatornya ketika widget belum dimuat, saya menggantinya dengan div dan menyembunyikan widgetnya dengan jquery. Untuk memunculkan widgetnya maka div harus di klik seperti gambar gif di bawah ini.

DEMO ON JSFIDDLE

Bagaimana tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

Kode CSS

.translator-widget{position:relative;width:180px;padding:0;margin:0 auto}
.translator{position:absolute;top:0;left:0;text-align:center;width:100%;height:29px;line-height:29px;border:1px solid #333;background:#555;color:#efefef;cursor:pointer}
.translator:hover{background:#777}
.widget-translator{display:none;position:absolute;top:0;left:0;width:100%;height:29px;border:1px solid #333;background:#555;}
.close-translator{position:absolute;font-size:12px;color:red;top:6px;right:5px;cursor:pointer;font-weight:400;}
#google_translate_element{margin:2px 0 0 2px;}

Kemudian tambahkan kode jquery di bawah ini dan simpan di atas kode </body>

JavaScript

<script type='text/javascript'>
$(function() { 
    $(".translator").click(function () {
    $(".widget-translator").fadeIn();
});
    $(".close-translator").click(function() {
    $(".widget-translator").fadeOut();
});
 });</script>

Dan silahkan gunakan kode HTML di bawah ini, silahkan simpan di mana Anda ingin menampilkan widgetnya.

HTML

<div class='translator-widget'>
<div class='translator'>Translate This Blog</div>
<div class='widget-translator'>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}</script>
<script async="async" type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <div class='close-translator' title='Close'>&#10006;</div>
 </div>
</div>

Untuk pengguna blog yang bukan bahasa Indonesia, silahkan ganti kode id pada pageLanguage di atas sesuai dengan bahasa blog Anda, misalnya untuk blog Vietnam silahkan ganti dengan vi. 

Jika Anda menyimpannya di gadget sidebar, Anda bisa mengganti lebar widgetnya menjadi 100% agar lebarnya sesuai dengan lebar sidebar. Silahkan ganti kode width:180px pada class translator-widget menjadi width:100% pada kode CSS di atas.