Cara Membuat Loading Page Jam dan Tanggal di Blog

Saturday 19 November 2016

http://www.seocips.com/

M Membuat efek loading jam dan tanggal di Blogspot. Baiklah sobat seocips.com, pada kesempatan ini seocips akan membagikan tutorial Blog tentang bagaimana cara membuat efek loading page yang menampilkan jam dan tanggal di Blog.

Tutorial berikut ini cukup keren untuk sekedar mempercantik tampilan Blog sobat, misalnya ketika salah satu link di blog anda di klik orang maka akan muncul efek ini. Cocok untuk blog yang memiliki loading yang berat ( kayak blog ini gan ) soalnya kalau untuk blog yang memiliki loading yang cepat efeknya hanya tampil sekilas sekejap mata.. hehehe.

Loading Page Jam dan Tanggal

Ok berikut cara membuatnya.

Seperti biasa, Pilih Blog di Blogger sobat.
Klik Template » Edit HTML
Kemudian tekan cari kode </head> ( tekan tombol Ctrl+F untuk mempermudah pencaharian.
Lalu tambahkan script CSS berikut ini tepat diatas kode </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/AVvXsEj-dI0IJ7ZFiHI-oZ1zmySzl_pLsj8gNEjaTdzhwmiVBsLPkTVKpLOwqF7NwcSkO244DsXu2NIi_FWoIiR5hP7Qji_5Rv4dXURxXJ7fvhjOtnEB5rct2wFEiNaGKGteGp1YMUZ8uNbNnPb2/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 kode </body> dan masukan script di bawah ini tepat di atas 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'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>