Artikel cara membuat efek loading page untuk blogger dengan gambar dan jam.
Sebelumnya sudah dimuat artikel CSS Animasi Loading Blog. Artikel tersebut memberikan contoh efek page loading atau efek "sedang memuat halaman" untuk menambah cantik tampilan blog.
Kalau dalam artikel tersebut efek loadingnya murni menggunakan CSS plus JavaScript sedangkan artikel kali ini menggunakan CSS plus JavaScript yang diperkaya gambar (*.gif) dan menampilkan jam, tentu akan lebih cantik.
Bagaimana cara membuatnya? Ikuti langkah-langkah berikut (artikel dibuat sebagai jawaban atas pertanyaan ).
Copy-paste CSS berikut di atas
Setelah itu copy-paste JavaScript berikut dan letakkan di atas
Simpan template.
Tip. Anda dapat melakukan perubahan dengan mengutak-atik CSS.
Selamat mencoba.
Kalau dalam artikel tersebut efek loadingnya murni menggunakan CSS plus JavaScript sedangkan artikel kali ini menggunakan CSS plus JavaScript yang diperkaya gambar (*.gif) dan menampilkan jam, tentu akan lebih cantik.
Bagaimana cara membuatnya? Ikuti langkah-langkah berikut (artikel dibuat sebagai jawaban atas pertanyaan ).
Copy-paste CSS berikut di atas
/]]></b:skin>
#clockdate-full {
position:fixed!important;
top:0px;
left:0px;
width:100%;
height:100%;
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilgwD3wQ0RUh6gMAJOm8ELto53WE2LnJLpCvLA_ob7T4qnCZVNb1WVwxJeAQs6Y5TLa_uEPHQAgtohmHbIE9SabGb7zx3y0SJjDZBSTjhQGIGXFKNYswUdRH2FZpirXsgDPeJZ7HbqlgeF/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;
}
Setelah itu copy-paste JavaScript berikut dan letakkan di atas
</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);
//]]>
</script>
Simpan template.
Tip. Anda dapat melakukan perubahan dengan mengutak-atik CSS.
Selamat mencoba.
makasih pak udah dibuatin tutorialnya ...
ReplyDeletetinggal ganti http://lh5.googleusercontent.com/-7FvgIJc3tfU/U6rOIebp0JI/AAAAAAAAFdQ/cU0C7gra8Hc/s90/ajaxloader.gif yah pak ..
Iya sama-sama.
DeleteYup tinggal ganti url itu dengan url gambar yang lain. Saya sudah liat penerapannya di blog Jenong :-bd
This comment has been removed by a blog administrator.
ReplyDeleteI have a plan to share that template soon, so please comeback again :)
DeleteThis comment has been removed by a blog administrator.
ReplyDeleteane belum berhasil cara membuktikannya gimana
ReplyDeleteMasukkan ke dalam template.
Deleteoh iya gan template blue jeans buatan agan ijin comot yah
ReplyDeletekalau tanpa jam gimana gan
ReplyDeleteHapus CSS dan JavaScript (baca lagi artikelnya) :)
DeleteNice post, here the the new check it out blogger blog site list
ReplyDelete