Cara Membuat Efek Loading Dengan Jam Seperti Kang Rian

Cara Membuat Efek Loading Dengan Jam Seperti Kang Rian - Ini adalah blog inspirasi saya. Berkat blog ini saya jadi banyak tau soal dunia perkodean dan html5, ada yg unik dari blog inpiratif yg satu ini yaitu efek loading nya yg memunculkan jam dan secangkir kopi.

1. Login ke blog

2. Pilih Template> edit HTML

3. Cari kode </head> dengan Ctrl+F

4. Letakan kode di bawah ini tepat di atas kode </head>

<style>
 #clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Jdo_MF7iJj-N860GumgblzBps98zLOv7ByCgq7DixHog4lnBqTWCyREf8Mug0zzr74iBj8sVnvvRAP5TubIkIcmaIPQjveNM4f-kaLNl-puoUYfh8757O5Kozjz5tTDyVAixgfT14ioU/s90/ajaxloader.gif) no-repeat center 85%; z-index:+100000; cursor:default; display:none; } .wrapper-clockdate { padding:25px; max-width:600px; width:100%; text-align:center; -webkit-border-radius:3px; border-radius:3px; margin:0 auto; margin-top:15%; -webkit-box-shadow:inset 0px 0px 10px #222; box-shadow:inset 0px 0px 10px #222; -webkit-border-radius:5px; border-radius:5px; background-color:#2f2f2f; } #clock-large { font-family:Orbitron, sans-serif; font-size:60px; text-shadow:0px 0px 1px #fff; color:#fff; } #clock-large span { color:#888; text-shadow:0px 0px 1px #333;font-size:30px;position:relative;top:-27px;left:-10px; } #date-large { letter-spacing:15px; font-size:14px; font-family:arial,sans-serif; color:#fff; }
</style>

5. Cari kode </body> dengan Ctrl+F

6. Letakan kode di bawah ini tepat di atas kode </body>

<script> 
//<![CDATA[ 
// Animasi Loading
 $(document.body).append('<div id="clockdate-full"><div class="wrapper-clockdate"><div id="clock-large"/><div id="date-large"/></div></div>');
$(window).on("beforeunload", function() {
    $('#clockdate-full').fadeIn(500).delay(5000).fadeOut(1000);
});
// Jam Besar
function showTime(){var a_p="";var today=new Date();var curr_hour=today.getHours();var curr_minute=today.getMinutes();var curr_second=today.getSeconds();if(curr_hour<12){a_p="<span>AM</span>"}else{a_p="<span>PM</span>"}if(curr_hour==0){curr_hour=12}if(curr_hour>12){curr_hour=curr_hour-12}curr_hour=checkTime(curr_hour);curr_minute=checkTime(curr_minute);curr_second=checkTime(curr_second);document.getElementById("clock-large").innerHTML=curr_hour+" : "+curr_minute+" : "+curr_second+" "+a_p}function checkTime(i){if(i<10){i="0"+i}return i}setInterval(showTime,500);
 //]]>
</script>

7. Simpan Template



Semoga bermanfaat.

Author : Unknown

Share this

Related Posts