Membuat loading page jam dan tanggal

Hay gan,.? sudah lama ya Bie tidak berbagi tutorial ke kalian, ya mohon di maklumi karena ADmin sedang sibuk di DuniaNyata jadi ya jarang ngeBLOG,.. hehehee :) nah untuk postingam kali ini Bie mau berbagi tutorial sekaligus membalas pertanyaan dari sahabat blogger bernama Prio.
Tutorial yang akan saya bahas kali ini yaitu "Cara membuat loading page Jam dan Tanggal" tutorial
ini cukup keren dan menarik untuk mempercantik tampilan loading blog sobat.

Demo Instalasi

Konsep pembuatan loading page jam dan tanggal

Loading page merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali.

Lanjutbatalkan

Perihal Lisensi

Mohon di baca dan menyetujui persyaratan lisensi di bawah ini sebelum memasang.

Anda boleh mengedit widget ini, tapi anda tidak diijinkan menghapus Credit yang telah dibuat. Hargailah kerja keras orang lain, supaya mereka dapat mengcreasikan sesuatu yang baru lagi. Suport by Adobe Flash Player Kebijakan dan Privasi : » http://irvan-efendy.blogspot.com/p/privacy-policy.html Jika anda telah menyetujui lisensi diatas, anda bisa melanjutkan pemasangan. Copyright ©2013 by IRvan EFendy™

MundurSetujubatalkan

Tutorial Memasang Part 1

Pilih Tab Template lalu klik Edit HTML Letakkan CSS berikut di atas </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/AVvXsEhF3dEt3Ill4WhFr2puP-NByaIFf1urrrXAHgbPo3j_3x8XNe013YOLLrt4qVbXB5vvh1OK0vC02_atK6xjPoz7WRIuSu41w46DaTQ2rqlB3J7qH9Z3gR4kDiABoXSbFqmT7pfxw6jAR2zL/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>

MundurLanjutbatalkan

Tutorial Memasang Part 2

Tekan Ctrl + F cari kode </body> Masukkan Script ini tepat diatas kode </body> dan klik Simpan

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

MundurLanjutbatalkan

Konsep Instalasi Selesai

Terimakasih anda telah memasang Efeck Loading page jam dan tanggal @Bie,.. Semoga dapat bermanfaat. Copyright ©2013 by IRvan EFendy

Selesai

sebelum lanjut ke tutorial alangkah baiknya sobat lihat dulu DEMO dari turoial ini cara nya
Klik kanan » pilih Reload atau tekan F5 pada keyboard. jika sobat tertarik atau berminat untuk memasang nya, silahkan sobat simak langkah-langkah berikut ini :

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan

Ctrl

+

F

cari kode </head>

4. 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/AVvXsEhF3dEt3Ill4WhFr2puP-NByaIFf1urrrXAHgbPo3j_3x8XNe013YOLLrt4qVbXB5vvh1OK0vC02_atK6xjPoz7WRIuSu41w46DaTQ2rqlB3J7qH9Z3gR4kDiABoXSbFqmT7pfxw6jAR2zL/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

+

F

cari kode </body> Lalu 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&#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 simpan template sobat. 

Sekian dulu tutorial hari ini mengenai Cara membuat loading page jam dan tanggal. 

Semoga bermanfaat dan selamat mencoba.

Happy Blogging ^_^

Source script: BLog Kang Rian