Juli 04, 2017

Cara Membuat Loading Blog Jam dan Tanggal Responsive

Cara Membuat Loading Blog Jam dan Tanggal Responsive


Cara Membuat Loading Blog Jam dan Tanggal - Halo, kembali lagi dengan tutorial saya, pada sebelumnya saya sudah membuat tutorial Cara Membuat Tombol Keyboard CSS di dalam Postingan Blog. Nah, pada kesempatan kali ini saya ingin sharing tentang cara membuat loading blog jam dan tanggal responsive untuk smartphone maupun dekstop.


Sebelum lanjut ke tutorial selanjutnya mending liat demonya dulu... terus teken F5 pada keyboard lu. Kalo kalian tertarik buat masang loading page ini, bisalah ikutin langkah-langkah dibawah ini,cekidot:

1. Login ke akun blogger sobat.
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl + Fcari kode </head>
4. Lalu tambahkan script CSS berikut ini tepat diatas code  </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> 

5. Tekan Ctrl + Fcari kode  </body>  lalu masukkan script dibawah ini tepat diatas kode </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);
// 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> 

6. Kemudian klik Simpan Template. 

Sekian dulu tutorial hari ini tentang Cara Membuat Loading Blog Jam dan Tanggal Responsive di Blog. Semoga bermanfaat, Selamat mencoba.


Happy Blogging ^.^

komentar aja asal gak spam :')
EmoticonEmoticon