 |
| Mungkin Yang Agan Maksud Seperti Ini |
Membuat Loading Jam Pada Blog - Kali ini saya akan share Cara Membuat Loading Jam Pada Blog,Contohnya liat gambar diatas, kalau kurang jelas bisa diklik demo yang ada diatas.
- Silahan Login dulu ke Blogger Dashboard, kemudian pilih menu Template > Edit HTML
- Jika sudah masuk ke menu Edit HTML, silahkan Copy kode dibawah ini tepat di atas
]]></b:skin>atau</style>( untuk memudahkan pencarian silahkan tekan tombolCtrl + F)
/* CSS Loading Jam Blog Zonayahya */
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(http://lh5.googleusercontent.com/-7FvgIJc3tfU/U6rOIebp0JI/AAAAAAAAFdQ/cU0C7gra8Hc/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; }
/* End CSS Loading Jam Blog Zonayahya */ 3. Kemudian agan Copy kode Javascript di bawah ini kemudian taru 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);
//]]>
</script> 4. Simpan Template.
Semoga Bermanfaat Salam Blogger. .
Terima Kasih telah membaca artikel tentang Cara Membuat Loading Jam Pada Blog . Silahkan baca artikel lainnya di daftar isi.
Judul :
Cara Membuat Loading Jam Pada Blog
.
Ditulis oleh :
Unknown
.
Pada hari :
Tuesday, 12 August 2014
.
Rating Blog :
5
dari 5
Related Post
Cara Membuat Efek Gambar Berputar 360 derajat di blog
Cara Membuat Efek Gambar Berputar di Blog - Membuat tampilan gambar berputar 360 derajat sa
Cara membuat efek hujan salju pada blog
Anda ingin mengetahui bagaimana cara membuat efek hujan salju pada blog? Pastinya sob
cara membuat iklan melayang di Blog Di Close 2xPada kesemapatan ini Tutorial Bangsat akan membagikan tutorial bagaimana cara membuat iklan me
Kumpulan Kode CSS Border Di BlogBerikut ini Tutorial Bangsat akan membagikan macam-macam css Border di Blog. Border sebuah istilah
Syarat berkomentar :
1. Tidak boleh mencantumkan link aktif ( auto delete )
2. Tidak boleh mengandung SARA, pornografi,dsb.
3. Budayakan berkomentar dengan sopan dan menghargai pendapat orang lain.
ConversionConversion EmoticonEmoticon