Membuat Loading Page Dengan Jam Dan Tanggal di Blog

DEMO

Postingan kali ini saya mau membahas tentang Membuat Loading Page Jam Dan Tanggal di Blog. Sebelumnya, saya terinspirasi dari blog.kangismet.net yang menggunakan loading pada saat kita mau berpindah posting, halaman, bahkan blog atau web lain setelah membuka blog kita. Saya searching di google, saya dapat, tetapi belum cocok, sehingga saya memodifikasi sedikit saja dan alhasil, jadilah loading blognya. mau juga? yuk disimak.

• Masuk ke Dashboard blog anda.
• Cari menu Template -> Edit HTML
• Kemudian cari tag </head>
• Lalu masukkan CSS berikut tepat ditasnya.
  

 <style type='text/css'>
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYlxsfYcazkmV7LYN7jWvRKrd2kZo-6hxymj11L81FdayLJD2ie4piQqL2HU5kBLAB-KQvGtYbB0GC1h0BquknPDQwjN54ygBA6yEwT9T5ylDPqbkCMh-bQLnFgU9o6fZWIEA711P07dJy/s1600/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:#333333; }
#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 #333333;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> 

• Cari tag </body>
• Lalu masukkan Javascript berikut tepat diatasnya.
  

 <script type='text/javascript'>
//<![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);
// Tanggal Besar 
var months=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];var myDays=["Minggu","Senin","Selasa","Rabu","Kamis","Jum&#39;at","Sabtu"];var date=new Date();var day=date.getDate();var month=date.getMonth();var thisDay=date.getDay(),thisDay=myDays[thisDay];var yy=date.getYear();var year=(yy<1000)?yy+1900:yy;document.getElementById("date-large").innerHTML="<b>"+thisDay+"</b>, "+day+" "+months[month]+" "+year;
 //]]>
</script> 

• Simpan
• Selesai

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Unknown

Artikel Terkait