Animasi Loading Halaman Jam Digital Di Blog

Cara Membuat Loading Jam Di Blogger seperti blog kang rian.com

Membuat Animasi Loading Halaman Jam Digital Di Blog Dengan CSS dan Jquery, bagi kalian yang suka mengunjungi blog kang rian.com sudah pasti akan melihat progres loading halaman yang sangat bagus, sebelum halaman terbuka akan tampil sebuah jam dan kopi yang menutupi halaman tersebut. Nah di sini saya akan berbagi CSS dan Jquery yang di gunakan oleh kang rian untuk membuat animasi loading halaman di blognya, yang membuat tampilan blog semakin bagus, jangan khawatir blog akan jadi berat karena ini tidak memerlukan banyak script yang akan membuat blog jadi berat. 

Tambahan, silahkan baca tutorial lainnya di blog mas tamvan ini.

Tutorial Blogger Lainnya :

• Cara Mudah Memasang Menubar Drop Down Di Blogger

• Memasang Syntax Highlighter Pre Code Di Blogger

• Widget Profil About Me Keren Di Blog

Untuk cara pemasangan animasi loading page di blognya pun sangat mudah, silahkan ikuti langkah-langkah di blog ini.

Cara Membuat animasi loading blog Jam digital di blog

• Login ke Blogger.com

• Pilih Template -> Edit HTML, Cari Kode

• ]]></b:skin> Atau </style>

• Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/*Loading Jam Digital*/
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_wYEBZfw7JC26f6w6WZMHsqgXl-k1JvsPmB4ptFG6LjV3BLVsWWyhqVbwAnoXBKLDvMPdW7jlbPEhBSeq0siz8dliYxIojzLTKNRmEb9Brhyh1_L8GnVQDZSFoLMdjSZ1rmE784oIRdRl/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; }

• Langkah Terakhir, kalian tinggal memasukan Jquerynya.

• Cari </body> lalu masukan jquery di bawah ini tepad di atasnya.

<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>

• Nah sekarang tinggal save templatenya.

Cukup itu saja tutorial dari mas tamvan tentang cara membuat loading halaman jam digital di blogger seperti blog kang rian semoga bermanfaat. Jika ada kesulitan atau ada yang mau di tanyakan, silahkan bertanya di kolom komentar ya.