Wednesday, March 25, 2015

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.

Anda Sedang Membaca Artikel Tentang Trik Membuat Loading Jam Di Blog Dan Artikel Ini URL Permalinknya Adalah http://muiztech.blogspot.com/2015/03/trik-membuat-loading-jam-di-blog.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner