Trik Membuat Loading Jam Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Haloo selamat malam.. kali ini saya akan share artikel tentang bagaimana cara membuat loading jam di blog kita. okk ada yang tau loading jam itu apa????

      Loading jam adalah halaman yang berisi jam sama tanggal ketika blog kita di refresh atau reload dengan cara tekan tombol f5 . untuk mencobanya silahkan refresh blog saya maka loading jam akan muncul.

Lalu bagaiman cara membuatnya. yang pasti lah mudah caranya hanya perlu keahlian edit koe saja dan menyimpan di template masing masing.
Screen Shoot
Membuat loading jam di blog dengan java script Muiz-Techno


langsung saja caranya.

Cara Membuat Loading Jam Di Blog

  1. Cari Kode </head>
  2. Letakan CSS Dibawah ini di atas kode </head>
  3. <style>
    #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; }
    </style>
  4. Letakan Java Script Dibawah ini diatas </body>
  5. <script>
    //<![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> 
  6. Kode warna biru bisa diganti sesuai gambar selera maneh.
  7. Simpan template dan kemudian Enjoy With Our Project


Caranya cukup simpel bukan hanya menaruh kode saja di tempalte blog masing masing. Jika pengen sama kaya saya stylenya gak bisa harap soalnya itu kreasi sendiri. Coding Mennnn... Just Kidding Menn!!!

   Untuk yang pengen menambahkan tanggal Di dalam loading blog tersebut silahkan Komen Di Post Ini dan Pakai Emot ":e" tanpa tanda kutip.

incoming search trik membuat loading jam di blog,cara menambahkan jam di loading blog,trik memasang jam di blog,trik mengubah halaman loading blog pakai jam,loading blog pakai jam,trik membuat loading jam di blog ketika di reload.
·
Share On Whatsapp Or Line:
Previous
Next Post »

14 comments

Click here for comments
March 25, 2015 at 8:35 PM ×

gan ini meletakkannya di template ,editnya dimananya ? dihtml nya kah ?

Reply
avatar
March 25, 2015 at 8:35 PM ×

Wah keren ini perlu di coba di blog ane :D

Reply
avatar
March 25, 2015 at 8:41 PM ×

Iya makasih brooo... eh makasih dah berkunjung!! |o| |o|

Reply
avatar
March 25, 2015 at 8:42 PM ×

boleh dicoba nih gan
tapi ni nempelin nya di html kan?

Reply
avatar
March 25, 2015 at 8:43 PM ×

Ikuti Tutor Aja Blogg :c :c .. Iya Di edit HTML!! :-bd :-bd

Reply
avatar
March 25, 2015 at 8:44 PM ×

Okk Sipt Makasih kunjungannya!! :-d :-d

Reply
avatar
March 25, 2015 at 8:45 PM ×

Iya gan di edit HTML@@ :g :g :g

Reply
avatar
March 25, 2015 at 8:47 PM ×

Iyo Monggo Tapi Ndak Ado Tanggal Nya :h :h ... Bilih hoyong nganggo mangga kukulutus heula!@!! :j :j

Reply
avatar

NB: Blogger Yang Bijak Selalu Meninggalkan Jejak!!!


Thank You!!! Please Jangan Lupa Follow My Blog !!!

[+] Berkomentarlah Dengan Baik Dan Sopan serta Jangan Meninggalkan Spam!!!
[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Untuk Memasukan Kode HTML Ke Kolom Komentar Anda Perlu Parse Dulu Kode tersebut Dengan Cara Klik Tombol conversion
[+] Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
[+] Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
[+] Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
[+] Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
ConversionConversion EmoticonEmoticon

Thanks for your comment