loading...
Home » » Cara Membuat Loading Blog Menjadi Animasi Jam Dan Tanggal

Cara Membuat Loading Blog Menjadi Animasi Jam Dan Tanggal

Written By Yoshep Website on Tuesday, April 26, 2016 | Tuesday, April 26, 2016

Yoshep Web Game - Kalian pasti tahu loading blog Yoshep Web Game berupa animasi Jam Dan Tanggal malah dibawahnya ada sebuah animasi gambar segelas teh/kopi panas. Disini saya akan membagikan Cara Membuat Loading Blog Menjadi Animasi Jam Dan Tanggal tersebut. Karna takutnya ada sobat blogger yang ingin memasangnya juga diblog sobat sendiri.

Berikut caranya :

  • Sobat login dan masuk ke blogger masing - masing
  • Pilih Template
  • Lalu klik edit html
  • Selanjutnya sobat tekan CTRL + F dan cari kode </head>
  • Lalu copy kode dibawah ini dan paste kode tersebut diatas 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>
  • Sekarang cari kode </body> dan tempelkan kode dibawah ini diatas kode </body>


<script type='text/javascript'> // Javascript Loading Halaman //<![CDATA[ $(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(8000).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>
  • Sekarang simpan template kalian dan lihat hasilnya
  • Selesai

Jika kalian suka silahkan pakai dan komentar tentang cara membuat loading tersebut.






Sumber : Seocips.com

4 komentar:

  1. Gan tapi itu berpengaruh trhadap seo kagak gan??

    ReplyDelete
    Replies
    1. Ga Gan Itu Cuman Nambahin Properti Ajh Buat Hiasan

      Delete
  2. blognya keren banget banyak unsur animasi..kreatif.

    ReplyDelete
  3. bagus kak
    aku juga pakai ko loading screen :D

    ReplyDelete