Cara Membuat Loading Page Jam dan Tanggal diBlog

Anisuka.com – Membuat efek loading jam dan tanggal di Blogspot. Baiklah sobat anisuka.com, pada kesempatan ini seocips akan membagikan tutorial Blog tentang bagaimana cara membuat efek loading page yang menampilkan jam dan tanggal di Blog. Berbicara soat efek loading sebelumnya juga seocips telah membagikan cara membuat animasi loading blog lingkaran, efek loading keyframe dan cara mempercepat loading video Youtube.

Tutorial berikut ini cukup keren untuk sekedar mempercantik tampilan Blog sobat, misalnya ketika salah satu link di blog anda di klik orang maka akan muncul efek ini. Cocok untuk blog yang memiliki loading yang berat ( kayak blog ini gan ) soalnya kalau untuk blog yang memiliki loading yang cepat efeknya hanya tampil sekilas sekejap mata.. hehehe.

Loading Page Jam dan Tanggal

Ok berikut cara membuatnya.

1. Seperti biasa, Pilih Blog di Blogger sobat.
2. Klik Template » Edit HTML
3. Kemudian tekan cari kode </head> ( tekan tombol Ctrl+F untuk mempermudah pencaharian.
4. Lalu tambahkan script CSS berikut ini tepat diatas kode </head>

<style type=’text/css’>
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://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. Cari kode </body> dan masukan script di bawah ini tepat di atas 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. Simpan template dan lihat hasilnya.

Bagaimana apakah sobat puas dengan Loading Page Jam dan Tanggal Di Blog ini? selamat mencoba.

Diposkan oleh

Brando Mewo

You Might Also Like: