Online Firmware

Sumber : http://under-88.blogspot.com

1. Yang Terutama dan Paling Utama yaitu dengan Mengurangi Jumlah Widget yang tidak terlalu  perting seperti jam, animasi, kalender dan lain - lain apa lagi yang berbentuk flash.

2. Mengkompres css template blog anda di CSS Compresor, caranya :

       a. Silahkan Menuju http://www.cssdrive.com/index.php/main/csscompressor/
       b. Kemudian anda akan menjumpai beberapa pilihan seperti gambar berikut :


 3. kalau sudah, tinggal anda copykan script HTML blog anda.

Seper pada gambar, anda pilih Normal pada Compression Mode dan Dont strip any comment pada Comment handling
Masukkan kode CSS template blog anda yaitu kode antara kode <b:skin> dan ]]></b:skin> pada kotak yang di sediakan
kemudian Klik Compress - it. 

4. Jika kedua cara di atas belum juga membuat template blog menjadi ringan, mungkin banyak kode CSS yang eror di template blog anda. Silahkan cek di http://jigsaw.w3.org/css-validator/ . Caranya

Silahkan menuju http://jigsaw.w3.org/css-validator/
Kemudian Masukkan URL blog anda di kotak yang di sediakan dan Klik Check
Setelah itu akan dimunculkan kode CSS yang eror atau tak berfungsi di blog anda.

Silahkan tinjau ulang kode - kode yang dimunculkan di template blog anda, atau kalau perlu dihapus saja..

5. Selesai dach,

SEMOGA BERMANFAAT YA ?

Gaya mirip startup Windows 8, animasi loading blog ini berwarna biru bergerak memutar ke kanan secara cepat. Cara memasang loading page, sobat pergi ke setelan Template dan pilih Edit HTML.



Tutorial Loading Animasi Blog Mirip Startup Windows 8 (Foto: screenshoot)

1. Paste script Jquery berikut,

 <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js type=text/javascript/>

Jika telah ada sebelumnya Jquery di atas pada template blog, lewati langkah ini.
2. Copy kode CSS berikut tepat di atas kode ]]></b:skin>,

 /* X-Gen Loader */
 #xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
 #circular3dG{
 position:relative;
 width:100px;
 height:100px;margin:10% auto;
 }
 .circular3dG{
 position:absolute;
 background-color:#00C4FF;
 width:28px;
 height:28px;
 -moz-border-radius:30px;
 -moz-animation-name:bounce_circular3dG;
 -moz-animation-duration:0.48s;
 -moz-animation-iteration-count:infinite;
 -moz-animation-direction:linear;
 -webkit-border-radius:30px;
 -webkit-animation-name:bounce_circular3dG;
 -webkit-animation-duration:0.48s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-direction:linear;
 -ms-border-radius:30px;
 -ms-animation-name:bounce_circular3dG;
 -ms-animation-duration:0.48s;
 -ms-animation-iteration-count:infinite;
 -ms-animation-direction:linear;
 -o-border-radius:30px;
 -o-animation-name:bounce_circular3dG;
 -o-animation-duration:0.48s;
 -o-animation-iteration-count:infinite;
 -o-animation-direction:linear;
 border-radius:30px;
 animation-name:bounce_circular3dG;
 animation-duration:0.48s;
 animation-iteration-count:infinite;
 animation-direction:linear;
 }
 #circular3d_1G{
 left:41px;
 top:6px;
 -moz-animation-delay:0.18s;
 -webkit-animation-delay:0.18s;
 -ms-animation-delay:0.18s;
 -o-animation-delay:0.18s;
 animation-delay:0.18s;
 }
 #circular3d_2G{
 left:61px;
 top:23px;
 -moz-animation-delay:0.24s;
 -webkit-animation-delay:0.24s;
 -ms-animation-delay:0.24s;
 -o-animation-delay:0.24s;
 animation-delay:0.24s;
 }
 #circular3d_3G{
 left:73px;
 top:45px;
 -moz-animation-delay:0.3s;
 -webkit-animation-delay:0.3s;
 -ms-animation-delay:0.3s;
 -o-animation-delay:0.3s;
 animation-delay:0.3s;
 }
 #circular3d_4G{
 left:69px;
 top:67px;
 -moz-animation-delay:0.36s;
 -webkit-animation-delay:0.36s;
 -ms-animation-delay:0.36s;
 -o-animation-delay:0.36s;
 animation-delay:0.36s;
 }
 #circular3d_5G{
 left:42px;
 top:73px;
 -moz-animation-delay:0.42000000000000004s;
 -webkit-animation-delay:0.42000000000000004s;
 -ms-animation-delay:0.42000000000000004s;
 -o-animation-delay:0.42000000000000004s;
 animation-delay:0.42000000000000004s;
 }
 #circular3d_6G{
 left:8px;
 top:48px;
 -moz-animation-delay:0.48s;
 -webkit-animation-delay:0.48s;
 -ms-animation-delay:0.48s;
 -o-animation-delay:0.48s;
 animation-delay:0.48s;
 }
 #circular3d_7G{
 left:0px;
 top:14px;
 -moz-animation-delay:0.5399999999999999s;
 -webkit-animation-delay:0.5399999999999999s;
 -ms-animation-delay:0.5399999999999999s;
 -o-animation-delay:0.5399999999999999s;
 animation-delay:0.5399999999999999s;
 }
 #circular3d_8G{
 left:17px;
 top:0px;
 -moz-animation-delay:0.6s;
 -webkit-animation-delay:0.6s;
 -ms-animation-delay:0.6s;
 -o-animation-delay:0.6s;
 animation-delay:0.6s;
 }
 @-moz-keyframes bounce_circular3dG{
 0%{
 -moz-transform:scale(1)}
 100%{
 -moz-transform:scale(.3)}
 }
 @-webkit-keyframes bounce_circular3dG{
 0%{
 -webkit-transform:scale(1)}
 100%{
 -webkit-transform:scale(.3)}
 }
 @-ms-keyframes bounce_circular3dG{
 0%{
 -ms-transform:scale(1)}
 100%{
 -ms-transform:scale(.3)}
 }
 @-o-keyframes bounce_circular3dG{
 0%{
 -o-transform:scale(1)}
 100%{
 -o-transform:scale(.3)}
 }
 @keyframes bounce_circular3dG{
 0%{
 transform:scale(1)}
 100%{
 transform:scale(.3)}
 }



 

3. Salin JavaScript berikut, letakan tepat di bawah kode <body>,

 <!-- Start Andi-Techno.blogspot.com Loader -->
 <script type=text/javascript>
 //<![CDATA[
 $(function() {
 setTimeout(function() {
 $(#xgenloader-screen).fadeOut();
 }, 5000);
 });
 //]]>
 </script>
 <div id=xgenloader-screen><div id="circular3dG">
 <div id="circular3d_1G" class="circular3dG">
 </div>
 <div id="circular3d_2G" class="circular3dG">
 </div>
 <div id="circular3d_3G" class="circular3dG">
 </div>
 <div id="circular3d_4G" class="circular3dG">
 </div>
 <div id="circular3d_5G" class="circular3dG">
 </div>
 <div id="circular3d_6G" class="circular3dG">
 </div>
 <div id="circular3d_7G" class="circular3dG">
 </div>
 <div id="circular3d_8G" class="circular3dG">
 </div>
 </div>
 </div>

4. Selesai, klik tombol Simpan Template.
5.lihat hasilnya


BABAI..BABAI.

Untuk mengakali loading biar mempunyai loading yang cepat memang diperlukan langkah-langkah yang tepat untuk mempercepat loading blog. Dalam perkembangannya, pemilik blog dalam usaha untuk mempercepat loading blognya mereka biasanya menghapus beberapa widget/gadget yang dianggap tidak terlalu penting yang ada di blog mereka. Memang cara ini berguna untuk memperkecil unkuran blog sehingga secara otomatis akan mempercepat loading blog. Banyak yang beranggapan bahwa jika sebuah blog yang memiliki ukuran berat yang kecil maka loading blog itu akan menjadi cepat. Dengan kata lain semakin kecil ukuran berat sebuah blog maka akan semakin cepat pula proses loadingnya.


Namun jika ternyata widget/gadget yang ada di blog anda adalah widget/gadget yang penting dan harus ada di blog dan tidak mau untuk mengahpusnya, maka bagaimana caranya untuk bisa mempercepat loading blog? Dalam masalah ini, anda tak perlu kuatir karena anda masih bisa mempercepat loading blog tanpa mengahapus beberapa widget yang ada di blog.Untuk mengetahui caranya,silahkan ikuti langkah-langkah seperti di bawah ini :

1. Silahkan kunjungi http://www.iwebtool.com/speed_test untuk mengetahui seberapa cepat loading page anda.
2. Login ke akun blog anda.
3. Pilih Template --- Edit HTML.
4. Cari kode </head> (Untuk mempercepat pencarian, silahkan ginakan Ctrl+F di kotak script Edit HTML).
5. Copy kode dibawah ini, kemudian Paste tepat diatas kode </head>

<script charset=utf-8 src=https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js type=text/javascript/>

<script src=http://amronbadriza.googlecode.com/files/Lazyload%20Script.js type=text/javascript/>

<script>

$(function() {

$(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zgslg9HDVfMXzDTJ3ySNhoaOFQvs3uqZ9OLC3sMhjEJyXAK9hbegQuKg7U8du0TfEHUKiNcXxmw7l_523QU1qVBdHmPmyX2eWWcP6sARQJt9dcUOd2s5wJYEr83MOaL2tjMvtZWQt1E/s1600/loading.png&quot;,threshold : 200});

});

</script> 

Simpan Template.
Kunjungi lagi http://www.iwebtool.com/speed_test untuk menetahui loading blog anda setelah dipasang script diatas.


SEMOGA BERMANFAAT YA ?

1. Masukan terlebih dahulu kode script Jquery di bawah ini,

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js type=text/javascript/> 

 

  Jika sebelumnya telah memiliki script Jquery pada template, lewat langkah ini.
2. Copy CSS ini ke atas kode ]]></b:skin>

/* X-Gen Loader */

#xgenloader-screen 
{z-index:999999;background:#000;width:100%;height:100%;position:fixed 
!important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

#spinningSquaresG{

position:relative;

width:240px;

height:29px;margin:10% auto;}

.spinningSquaresG{

position:absolute;

top:0;

background-color:#FFDD00;

width:29px;

height:29px;

-moz-animation-name:bounce_spinningSquaresG;

-moz-animation-duration:0.6s;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:linear;

-moz-transform:scale(.3);

-webkit-animation-name:bounce_spinningSquaresG;

-webkit-animation-duration:0.6s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction:linear;

-webkit-transform:scale(.3);

-ms-animation-name:bounce_spinningSquaresG;

-ms-animation-duration:0.6s;

-ms-animation-iteration-count:infinite;

-ms-animation-direction:linear;

-ms-transform:scale(.3);

-o-animation-name:bounce_spinningSquaresG;

-o-animation-duration:0.6s;

-o-animation-iteration-count:infinite;

-o-animation-direction:linear;

-o-transform:scale(.3);

animation-name:bounce_spinningSquaresG;

animation-duration:0.6s;

animation-iteration-count:infinite;

animation-direction:linear;

transform:scale(.3);

}

#spinningSquaresG_1{

left:0;

-moz-animation-delay:0.24s;

-webkit-animation-delay:0.24s;

-ms-animation-delay:0.24s;

-o-animation-delay:0.24s;

animation-delay:0.24s;

}

#spinningSquaresG_2{

left:30px;

-moz-animation-delay:0.3s;

-webkit-animation-delay:0.3s;

-ms-animation-delay:0.3s;

-o-animation-delay:0.3s;

animation-delay:0.3s;

}

#spinningSquaresG_3{

left:60px;

-moz-animation-delay:0.36s;

-webkit-animation-delay:0.36s;

-ms-animation-delay:0.36s;

-o-animation-delay:0.36s;

animation-delay:0.36s;

}

#spinningSquaresG_4{

left:90px;

-moz-animation-delay:0.42s;

-webkit-animation-delay:0.42s;

-ms-animation-delay:0.42s;

-o-animation-delay:0.42s;

animation-delay:0.42s;

}

#spinningSquaresG_5{

left:120px;

-moz-animation-delay:0.48s;

-webkit-animation-delay:0.48s;

-ms-animation-delay:0.48s;

-o-animation-delay:0.48s;

animation-delay:0.48s;

}

#spinningSquaresG_6{

left:150px;

-moz-animation-delay:0.54s;

-webkit-animation-delay:0.54s;

-ms-animation-delay:0.54s;

-o-animation-delay:0.54s;

animation-delay:0.54s;

}

#spinningSquaresG_7{

left:180px;

-moz-animation-delay:0.6s;

-webkit-animation-delay:0.6s;

-ms-animation-delay:0.6s;

-o-animation-delay:0.6s;

animation-delay:0.6s;

}

#spinningSquaresG_8{

left:210px;

-moz-animation-delay:0.66s;

-webkit-animation-delay:0.66s;

-ms-animation-delay:0.66s;

-o-animation-delay:0.66s;

animation-delay:0.66s;

}

@-moz-keyframes bounce_spinningSquaresG{

0%{

-moz-transform:scale(1);

background-color:#FFDD00;

}

100%{

-moz-transform:scale(.3) rotate(90deg);

background-color:#FF0000;

}

}

@-webkit-keyframes bounce_spinningSquaresG{

0%{

-webkit-transform:scale(1);

background-color:#FFDD00;

}

100%{

-webkit-transform:scale(.3) rotate(90deg);

background-color:#FF0000;

}

}

@-ms-keyframes bounce_spinningSquaresG{

0%{

-ms-transform:scale(1);

background-color:#FFDD00;

}

100%{

-ms-transform:scale(.3) rotate(90deg);

background-color:#FF0000;

}

}

@-o-keyframes bounce_spinningSquaresG{

0%{

-o-transform:scale(1);

background-color:#FFDD00;

}

100%{

-o-transform:scale(.3) rotate(90deg);

background-color:#FF0000;

}

}

@keyframes bounce_spinningSquaresG{

0%{

transform:scale(1);

background-color:#FFDD00;

}

100%{

transform:scale(.3) rotate(90deg);

background-color:#FF0000;

}

} 

3. Letakan JavaScript berikut tepat di bawah kode <body>

<!-- Start Andi-Techno.blogspot.com Loader -->

<script type=text/javascript>

//<![CDATA[

$(function() {

    setTimeout(function() {

        $(#xgenloader-screen).fadeOut();

    }, 5000);

});

//]]>

</script>

<div id=xgenloader-screen><div id="spinningSquaresG">

<div id="spinningSquaresG_1" class="spinningSquaresG">

</div>

<div id="spinningSquaresG_2" class="spinningSquaresG">

</div>

<div id="spinningSquaresG_3" class="spinningSquaresG">

</div>

<div id="spinningSquaresG_4" class="spinningSquaresG">

</div>

<div id="spinningSquaresG_5" class="spinningSquaresG">

</div>

<div id="spinningSquaresG_6" class="spinningSquaresG">

</div>

<div id="spinningSquaresG_7" class="spinningSquaresG">

</div>

<div id="spinningSquaresG_8" class="spinningSquaresG">

</div>

</div>

</div>

<!-- End Loader --> 

4. Konfigurasi selesai, klik Simpan Template.
5. lihat hasilnya,mudah bukan !


BABAI...BABAI...???

Oke, kembali lagi dengan saya siapa lai kalau bukan bang sholeh.kali ini bang sholeh sedikit berbagi bagaimana cara membandingkan kecepatan loading blog anda dengan orang lain. Caranya cukup mudah. Anda tinggal ikuti tutorial di bawah ini :

1. Pertama,kunjungi dulu situs ini http://whichloadsfaster.com/
2. Setelah itu pilih > Try My Own Matchup


4. Selesai dach, tinggal anda lihat cepat mana antara blog anda atau teman anda
5. Semoga bermanfaat

Kumpulan Tips dan Triks - Cara Mudah membuat Loading Halaman Blog, Seperti pada blog ini kalian bisa melihat bahwa ketika halaman dibuka maka akan ada efek loading page nya. Anda bisa memberikan efek yang lain dari tutorial berikut ini.

Cara Memasang pada Blog :

1. Simpan jquery di atas code </head> :

/* LOADING */
#muat-halaman {
 position: fixed;
 top: 0;
 left: 0;
 background-color: #000;
 z-index: 9999;
 text-align: center;
 width: 100%;
 height: 100%;
 padding-top: 200px;
 font-size: 25px;
 color: #fff;
 display: none; }