Cara Membuat Loading Jam Di Blog - Pada Kesempatan kali ini saya akan share sebuah tutorial Cara Membuat Loading Jam Di Blog mungkin jika blog kita di pasangi ini akan lebih kelihatan profesional, tutorial ini saya dapat kan dari www.mantav.net.
 |
| Cara Membuat Loading Jam Di Blog |
Lihat sajah di gambar atas cukup menarik kan silahkan bagi yang ingin memasangnya simak tutorialnya yang sudah saya tulis dibawah.
Cara Membuat Loading Jam Di Blog
1. Cari Kode </head>
2. Letakan CSS Dibawah ini di atas kode </head>
2. Letakan CSS Dibawah ini 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/AVvXsEgiEr6nRReatkSKtDhBYEivFrDsGjDojVGc1G6lLtrwOEuMwYEmIgqZX3D9eA8KSEfJktPQEAiJbKenQsuIK5ZbhytUpn5ljMwJKMB4eA52EDaDbUb40Hx-pyyae6Nw064Mmv7t1A9z3HYr/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>
3. Letakan Java Script Dibawah ini diatas </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>
3. SIlahkan Simpan Template dan semoga berhasil.
Mudah kan cara bikinnya semoga bisa bermanfaat terimakasih sudah membaca artikel Cara Membuat Loading Jam Di Blog semoga bisa di mengerti tutorialnya dengan jelas
Anda telah membaca artikel tentang Cara Membuat Loading Jam Di Blog di blog Online Education and Tranning Jika artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan menekan Ctrl + D pada keyboard anda.
Terima kasih atas kunjungannya. Semoga bermanfaat