Membuat Efek Loading Keren Pada Blog
 |
| Tampilan Efek Loading Blog |
Hai sobat, kali ini aku ingin posting ihwal bagaimana menciptakan imbas loading pada blog. Mungkin sudah banyak yang memperlihatkan tutorial ini, tetapi disini aku ingin memperlihatkan dulu imbas loading yang sudah aku perbaharui.
Gimana nih, udah lihat penampakannya? Bisa Anda lihat bila loading blog ini tidak memakai animasi standar menyerupai bundar atau semacamnya. Bila Anda tertarik untuk memakai imbas loading keren ini silahkan ikuti tutorialnya.
1. Pada Edit HTML silahkan cari instruksi </head> dengan memakai Ctrl + F2. Setelah ketemu, silahkan copy script dibawah sempurna di atas atau sebelum instruksi </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 instruksi yang sama atau mirip, lewati langkah di atas. Lebih baik hanya satu jquery dalam satu blog.3. Selanjutnya, copy instruksi CSS di bawah ini sempurna sebelum instruksi ]]></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/AVvXsEiXVcLMqLMrtxBPddAjXMofidxRdJJ2uZtMIowZnoHck74q0-GkaMd0jo0A-HmkUpmmFPrQWmSlhGdc3s2mzXcvo-y_pRU3fDYp_prZZG5Z7vpWsM-6NzsIMH7VMcaOYdfqLI9Gedq4nog/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 instruksi dibawah ini sempurna di atas atau sebelum instruksi </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 instruksi dibawah ini sempurna dibawah atau setelah 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 instruksi https://rodamotiv.blogspot.com//search?q=cara-memasang-simple-slide-box-pada-blog">disini. Perlu diingat untuk merubah warna background sesuai backround animasinya.
Comments
Post a Comment
Komentar yang kamu masukkan sedang dalam peninjauan.