Cara Menambah Efek Loading Coffe Di Blogger

selamat siang kawan, tutorial kali ini saya post tentang cara menambah efek keren loading jam dan kopi dengan menambah script css javascript di template html blog,  pertama saya lihat di blognya kang rian dan disana juga ada tutorialnya tetapi script yang diberikan berbeda dengan loading blog kang rian yang keren, akhirnya saya googling dan ketemu blog se*cips lagi, scriptnya saya ambil dari sana, tapi tutorialnya khas saya yah :) :

1. seperti biasa masuk ke blogger > template > edit html
belum tahu cara menuju edit html? kalian bisa ke sini. jika sudah lalu cari kode </head> biar mudah kalian tekan ctrl+f untuk menampilkan kolom pencarian dan ketik </head>, lalu pasang kode css di bawah ini tepat di atas kode </head>

<style type='text/css'>
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcg68SnqCxzLy7jYkBoe187RjRgMDU8oSuED6vtYo7kUuQqHNIu-U6-mIuFF0QTqaOuL49WtjgKFbz06QfORaJPtNmmffAvifNScNSITBwd_xlDUM9W_O8YZ9zfEIGeemlHG1iEgtV_Zfz/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>

2. cari kode </body>
kode </body> ini paling bawah gunakan lagi kolom pencarian dan ketik </body> lalu enter, dan copy paste kode 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>

jika sudah, lalu simpan dan lihat hasilnya, untuk demo kalian bisa melihat di blog ini ada loading jam tanggal beserta kopi hangat, sekian terima kasih
source : kang rian , se*c*ps ,
peringatan : di larang copas jika ingin copas maka editlah sebeda mungkin dan dengan gaya khas tulisan kalian

• [message]
• ##check##  perhatian
• Terima kasih telah berkunjung ke blog miripgeeks yang sederhana ini, jangan lupa berkunjung lagi ya, untuk tutorialnya. matikan adblock anda karena blog ini aman dan bermanfaat, sehingga anda tidak dirugikan apapun :)