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.
5. Tekan
Sekian dulu tutorial hari ini mengenai Cara membuat loading page jam dan tanggal.
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.
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 Klik kanan » pilih Reload atau tekan F5 pada keyboard. jika sobat tertarik atau berminat untuk memasang nya, silahkan sobat simak langkah-langkah berikut ini :
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/AVvXsEiHbZ_Az3M2KU7tttb1DHdLALE3NuJXjcBrAOcucXMtBnajXoMUXCRTJYXQOmwlw_Z41aMOUpvYepHwQ3r2CTn62w9kY4KJvSCXxqFUp192N-r0ED-kayH-Mzwa5hgNo9thXVCo1mvyOJZr/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'>6. Kemudian simpan template sobat.
//<![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>
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
Tags:
#CSS
#Tutorial Blog
