Cara Membuat Loading Page Jam, Tanggal, Bulan, Dan Tahun Di Blog

Cara Membuat Loading Page Jam, Tanggal, Bulan, Dan Tahun Seperti Kang Rian Di Blog

View

Loading Page Kang Rian

Selamat datang agan atau aganwati, kali ini Saya akan berbagi cara membuat loading page jam, tanggal, bulan dan tahun seperti kang rian di blog, nah untuk membuatnya silakan Anda mengikuti beberapa langkah berikut;

Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu edit html.

3. Setelah itu cari kode </head> dengan cara

Ctrl

+

F

4. Copy script di bawah ini lalu paste tepat di atas kode </head>,

 <style>
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPqoOJSneOpw4qyl1rVpnzZpbQR_zdve_JThylzi7ckKsJ65YKBKFpeTaFQ1Zf38tCDr6Zz_KYHOurgPBhsIpEAhKBDLO9r7IYoUm7JmRZjRsXV97jUXxi2ZefOPAqyb3V9SiYOXb7usX/s90/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:#2f2f2f; } #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 #333;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. Setelah itu cari kode </body> dengan cara

Ctrl

+

F

6. Copy script di bawah ini lalu paste tepat di atas kode </body>,

 <script type='text/javascript'>

// Javascript Loading Halaman
//<![CDATA[
$(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(8000).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> 

7. Lalu simpan dan lihat hasilnya.

Nah itu saja artikel dari Saya, semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.

Sumber referensi script http://mrhb404.blogspot.com

Share this