Membuat Efek Loading Jam Pada Blog

Membuat Efek Loading Jam Pada Blog - Siapa sih yang tidak mau kalau blognya tampil dengan tampilan yang mewah, apalagi kalau sampai bisa membuat para pengunjungnya merasa betah berlama - lama di blog kita hehe
Nah untuk itu kesempatan kali ini saya ingin sharing tentang cara membuat loading blog jam dan tanggal responsive untuk smartphone maupun dekstop.

Baca Juga : Membuat Efek Loading Lingkaran
                    Membuat Efek Animasi Loading Pada Blog

Bagai mana cara membuat Loading Jam Pada Blog?

Membuat Loading Jam Pada Blog - Caranya simple ko, kalian cukup mengikuti tutorial di bawah ini sesuai dengan urutan,
Yuk langsung aja di simak:

1. Login ke akun blogger sobat.
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl + Fcari kode </head>
4. Lalu tambahkan script CSS berikut ini tepat diatas code  </head>

<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/AVvXsEgaov-4ELsA3iFWoN4-muecj3nmmvcf_Nrj4SJF7IdE-i1unDxEPxxjBnGJWrJSWlD-g0F8OFKZNKL-2NBeU1JxCT7Q9iT33EAGjmJsVvmjGW9vdF8ibVWYQAXm7_Sbv4qvZYUN9XpnQFSl/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> 

5. Tekan Ctrl + Fcari kode  </body>  lalu masukkan script dibawah ini tepat diatas kode </body>

<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> 

6. Kemudian klik Simpan Template. 

Sekian dulu tutorial hari ini tentang Cara Membuat Loading Blog Jam dan Tanggal Responsive di Blog. Semoga bermanfaat, Selamat mencoba.