Efek Loading Page Blogger dengan JavaScript Jam

Artikel cara membuat efek loading page untuk blogger dengan gambar dan 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilgwD3wQ0RUh6gMAJOm8ELto53WE2LnJLpCvLA_ob7T4qnCZVNb1WVwxJeAQs6Y5TLa_uEPHQAgtohmHbIE9SabGb7zx3y0SJjDZBSTjhQGIGXFKNYswUdRH2FZpirXsgDPeJZ7HbqlgeF/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

BLOGGER: 11
  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. This comment has been removed by a blog administrator.

    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

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Efek Loading Page Blogger dengan JavaScript Jam
Efek Loading Page Blogger dengan JavaScript Jam
Artikel cara membuat efek loading page untuk blogger dengan gambar dan jam.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgel3EF17giOlHUcidZIrUM_U9IVUHCf-NGHy8ieqJVcNIc6rvxfciv2eboyZOQTIDsr36u73I6jZyB9QyB9psTRUrvqlO68VD4DLC1kRl5OIPvhfmvtSoDuidgziIP4uuN6ciorTYBN40/s1600/loading_blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgel3EF17giOlHUcidZIrUM_U9IVUHCf-NGHy8ieqJVcNIc6rvxfciv2eboyZOQTIDsr36u73I6jZyB9QyB9psTRUrvqlO68VD4DLC1kRl5OIPvhfmvtSoDuidgziIP4uuN6ciorTYBN40/s72-c/loading_blogger.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/07/efek-loading-page-blogger.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/07/efek-loading-page-blogger.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content