Pada kesempatan ini saya akan membagikan tutorial cara membuat efek loading page yang menampilkan jam dan tanggal di Blog.

Tutorial berikut ini cukup keren untuk mempercantik tampilan Blog sobat, misalnya ketika salah satu link di blog di klik pengunjung 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.

Efek Loading Jam dan Tanggal
Loading Page Jam dan Tanggal


Cara membuat efek Loading Jam dan Tanggal di Blogger


1. Di Blog Bloger 😀
2. Pilih menu Template ➔ Edit HTML
3. Letakan kode berikut ini di atas kode </head>

<style type='text/css'>
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(http://1.bp.blogspot.com/-r9SgE7hPH6E/VMTZ0XBeorI/AAAAAAAACrU/LC4xGYCezCk/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>

4. Letakan kode di berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Animasi Loading Haisob.com
 $(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>

5. Save template dan lihat hasilnya.

Sekian, salam Bloggers.
0 Komentar untuk "Cara Membuat Efek Loading Page Jam dan Tanggal"