Membuat Efek Loading Keren Pada Blog

Tampilan Efek Loading Blog

Hai sobat, kali ini saya ingin posting tentang bagaimana membuat efek loading pada blog. Mungkin sudah banyak yang memberikan tutorial ini, tetapi disini saya ingin menunjukkan dulu efek loading yang sudah saya perbaharui.

Gimana nih, udah lihat penampakannya? Bisa Anda lihat kalau loading blog ini tidak menggunakan animasi standar seperti lingkaran atau semacamnya. Bila Anda tertarik untuk menggunakan efek loading keren ini silahkan ikuti tutorialnya.

1. Pada Edit HTML silahkan cari kode </head> dengan menggunakan Ctrl + F

2. Setelah ketemu, silahkan copy script dibawah tepat di atas atau sebelum kode </head>

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

Note : Bila di blog Anda sudah ada kode yang sama atau mirip, lewati langkah di atas. Lebih baik hanya satu jquery dalam satu blog.

3. Selanjutnya, copy kode CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style>

#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
 background: #593C2C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yxePok_g6IiZcgsNL4RRDzcW5DCodOKWuZYRLwWk7m9asUckEEELM4rv3hMlnZvElqVrtTGsEfdbjxy2NJ7pHjOEuQBjgk6ERITzWfP8u5PzMjieT-bFQNwcg7Ikxw1n6p_lGgKXdH4/s1600/coffee+animation.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #fff;
    text-indent: -9999px;
}
.v2 #loading { display: none; }
#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: rgb(236, 133, 0);
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 font-family:Arial;
 font-size:22px;
 color:#fff;
}

4. Langkah berikutnya, copy kode dibawah ini tepat di atas atau sebelum kode </head>

<script>
(function($){
$(&quot;html&quot;).removeClass(&quot;v2&quot;);
$(&quot;#header&quot;).ready(function(){ $(&quot;#progress-bar&quot;).stop().animate({ width: &quot;25%&quot; },1500) });
$(&quot;#footer&quot;).ready(function(){ $(&quot;#progress-bar&quot;).stop().animate({ width: &quot;75%&quot; },1500) });
$(window).load(function(){
    $(&quot;#progress-bar&quot;).stop().animate({ width: &quot;100%&quot; },600,function(){
        $(&quot;#loading&quot;).fadeOut(&quot;fast&quot;,function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

5. Sekarang copy kode dibawah ini tepat dibawah atau sesudah kode <body>

<div id='loading'><div id='progress-bar'/><div id='loader'>Loading...</div></div>

Baca juga : Cara Memasang Kotak Pesan Dengan Efek Slide Pada Blog

6. Langkah terakhir klik save atau simpan.

Bila ingin mengganti animasinya silahkan ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yxePok_g6IiZcgsNL4RRDzcW5DCodOKWuZYRLwWk7m9asUckEEELM4rv3hMlnZvElqVrtTGsEfdbjxy2NJ7pHjOEuQBjgk6ERITzWfP8u5PzMjieT-bFQNwcg7Ikxw1n6p_lGgKXdH4/s1600/coffee+animation.gif pada CSS. Anda dapat melihat kode animasi keren lainnya disini. Perlu diingat untuk merubah warna background sesuai backround animasinya.

Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/03/membuat-efek-loading-keren-pada-blog.html

15 komentar

Tuliskan komentar

Admin Cs

author

16 Mar 2015, 00:35:00 delete

tampilan blognya luar bisaaa,,,,

Balas

16 Mar 2015, 00:36:00 delete

boleh juga penawarannyaa

RepublikCoin

16 Mar 2015, 07:39:00 delete

wah bisa sekeren itu efec loading nya gan makasi gan

Muhammad taufiq nur

16 Mar 2015, 07:40:00 delete

thanks gan :hore

16 Mar 2015, 07:41:00 delete

silahkan diperaktekkan gan :)

Keiko Kitagawa (Ita)

16 Mar 2015, 07:55:00 delete

ijin coba ya,
makasi infonya membantu :)

dhanyn10

16 Mar 2015, 08:09:00 delete

kereen..nanti dicoba yaa :)

16 Mar 2015, 08:10:00 delete

sip gan, makasih kunjungannya :D

16 Mar 2015, 08:13:00 delete

Silahkan dicoba :)

Faiz Ihsan

16 Mar 2015, 08:21:00 delete

Wah mantaf, langsung praktek gan :D
Thx ya tutorialnya ...

16 Mar 2015, 08:24:00 delete

Silahkan dicoba gan =D

hadiselamet

16 Mar 2015, 08:37:00 delete

boleh di coba nih ghan

16 Mar 2015, 13:29:00 delete

silahkan gan, kalau ada yg masih ingin request blg aja :)

Muhammad Adam Hussein, S.Pd, CM

16 Mar 2015, 16:22:00 delete

Boleh juga mas, berasa berbeda dengan efek ini, selain ini apa ada mas?

Savron Simley

23 Apr 2015, 13:34:00 delete

mantab sekali, terima kasih banget gan, tutor ini menghiasi blog ane.

✖ Komentar dengan isi Link Aktif, Promosi, atau mengandung unsur Sara akan dihapus.
✔ Bila ingin riquest, bertanya, atau sekedar say hi aja, silahkan ke halaman OOT
✔ Untuk menyisipkan kode, silahkan parse lalu copy dan paste hasil parse ke kolom komentar.

EmoticonEmoticon OOT

Membuat Efek Loading Keren Pada Blog

Share this :

15 komentar