Membuat Efek Loading Jam Pada Blog

Link sudah terenkripsi, bertujuan agar link aman untuk dikunjungi. Tunggu hingga loading selesai

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/AVvXsEjncn1oZ-AStZhpqQf5NHj_HZv_zGo1zxuGCwUI9WEvXasY3ajXDclyiVHkNnThBwQTM6xBL72ItPpE0NPFqDmQPp7AHrjFyLKxPW3IpS16G77Ejj_GALE4HFyjalugHo-VppQrXuqoYrkT/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.

Link tersedia dalam 15 detik.

Selamat! kamu sukses mendapatkan link yang terenkripsi.

Share this post