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.
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'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.
Happy Blogging ^_^
Jika bermanfaat? Bantu share ya sobat
Welcome to my blog 😊
