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 + F2. 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/AVvXsEhbJyIXTlKLODlF3kqwhQjrvmdE0MrvNldEv1cgghixUyqck8P-0JjzVVARGq2RBbFIRtuXYmqeJC8dgewGjmRTSEGwjEawJkRzhvea6Bgale50DTs39W4Ro1z80jS6NggzSBJiYNNyWfs/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($){
$("html").removeClass("v2");
$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",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 Blog6. Langkah terakhir klik save atau simpan.
Bila ingin mengganti animasinya silahkan ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJyIXTlKLODlF3kqwhQjrvmdE0MrvNldEv1cgghixUyqck8P-0JjzVVARGq2RBbFIRtuXYmqeJC8dgewGjmRTSEGwjEawJkRzhvea6Bgale50DTs39W4Ro1z80jS6NggzSBJiYNNyWfs/s1600/coffee+animation.gif pada CSS. Anda dapat melihat kode animasi keren lainnya disini. Perlu diingat untuk merubah warna background sesuai backround animasinya.
Belum ada Komentar untuk "Membuat Efek Loading Keren Pada Blog"
Posting Komentar