Cara Membuat Loading Dengan Efect Jam di Blog- Kali ini saya akan
berbagi tutorial tentang membuat loading dengan efect jam di blog,
karena banyak yang lupa waktu hehehe jadi cocok ini buat yang suka lupa waktu, baiklah simak saja langsung caranya :
1.Login ke Blogger
2.Masuk Dashboard > Pilih Template > Klik Edit HTML
3.Masukkan kode dibawah ini dan letakkan 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/AVvXsEi-xXbFI75djYCL0J5XVwOQFLFTiXR40hMq_38CUm1sVbB4VOKAo8iLz1yD-mocyMoGRDDmdCKmaOLAbHGEUXZq73wpitSNEiTWGguRcLDrYZuno_8y4X4ZKudwQMA_fW11z4TTIdTdNzxo/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>
4.Kemudian masukkan kode dibawah ini dan letakkan 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);
5.Simpan template dan lihat hasilnya
Sekian tutorial saya tentang Cara Membuat Loading Dengan Efect Jam di Blog
Artikel keren lainnya:
Belum ada tanggapan untuk "Membuat Loading Sffect Jam Pada Blogspot"
Post a Comment