Efek Loading Page Blogger dengan JavaScript Jam

Sebelumnya sudah dimuat artikel CSS Animasi Loading Blog. Artikel tersebut memberikan contoh efek page loading atau efek "sedang memuat halaman" untuk menambah cantik tampilan blog.

Kalau dalam artikel tersebut efek loadingnya murni menggunakan CSS plus JavaScript sedangkan artikel kali ini menggunakan CSS plus JavaScript yang diperkaya gambar (*.gif) dan menampilkan jam, tentu akan lebih cantik.

Bagaimana cara membuatnya? Ikuti langkah-langkah berikut (artikel dibuat sebagai jawaban atas pertanyaan jenong jellek).

Copy-paste CSS berikut di atas /]]></b:skin>

#clockdate-full {
position:fixed!important;
top:0px;
left:0px;
width:100%;
height:100%;
background:#333 url(http://lh5.googleusercontent.com/-7FvgIJc3tfU/U6rOIebp0JI/AAAAAAAAFdQ/cU0C7gra8Hc/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;
}

Setelah itu copy-paste JavaScript berikut dan letakkan di atas </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);
     //]]>
</script>

Simpan template.

Tip. Anda dapat melakukan perubahan dengan mengutak-atik CSS.

Selamat mencoba.

Comments

  1. makasih pak udah dibuatin tutorialnya ...
    tinggal ganti http://lh5.googleusercontent.com/-7FvgIJc3tfU/U6rOIebp0JI/AAAAAAAAFdQ/cU0C7gra8Hc/s90/ajaxloader.gif yah pak ..

    ReplyDelete
    Replies
    1. Iya sama-sama.
      Yup tinggal ganti url itu dengan url gambar yang lain. Saya sudah liat penerapannya di blog Jenong :-bd

      Delete
  2. Please http://3.bp.blogspot.com/-dyE8vs2IYqE/U7kBJl-9WcI/AAAAAAAAFxA/2W-gJCTOPhQ/s1600/background_warna_warni.PNG template share.

    ReplyDelete
    Replies
    1. I have a plan to share that template soon, so please comeback again :)

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. ane belum berhasil cara membuktikannya gimana

    ReplyDelete
  5. oh iya gan template blue jeans buatan agan ijin comot yah

    ReplyDelete
  6. Replies
    1. Hapus CSS dan JavaScript (baca lagi artikelnya) :)

      Delete

Post a Comment

Popular posts from this blog

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template