Cara Membuat Loading Page Jam, Tanggal, Bulan, Dan Tahun Di Blog

08:56:00
Loading Page Kang Rian
Cara Membuat Loading Page Jam, Tanggal, Bulan, Dan Tahun Seperti Kang Rian Di Blog
Loading Page Kang Rian


Selamat datang agan atau aganwati, kali ini Saya akan berbagi cara membuat loading page jam, tanggal, bulan dan tahun seperti kang rian di blog, nah untuk membuatnya silakan Anda mengikuti beberapa langkah berikut;


Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu edit html.

3. Setelah itu cari kode </head> dengan cara
Ctrl
+
F

4. Copy script di bawah ini lalu paste tepat di atas kode </head>,

 <style>
#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; }
</style> 


5. Setelah itu cari kode </body> dengan cara
Ctrl
+
F


6. Copy script di bawah ini lalu paste tepat di atas kode </body>,

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



7. Lalu simpan dan lihat hasilnya.




Nah itu saja artikel dari Saya, semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.


Sumber referensi script http://mrhb404.blogspot.com

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

13 Comments

manfaat bersama 20 December 2014 at 09:06

Unik nih efek loadingnya..ijin nyoba sob..

Salam admin satriyoku.blog

Renaldy Ramadani 20 December 2014 at 09:09

Iya gan memang unik loadingnya, silakan di coba,


salam blogger Indonesia :D (y)

muhammad royan Firdaus 20 December 2014 at 09:22

Keren nih. ijin coba

Renaldy Ramadani 20 December 2014 at 09:36

iya gan silakan, dicoba :D

Khoazis 20 December 2014 at 12:52

jiah.. langsung di share :nyengir:

Renaldy Ramadani 20 December 2014 at 13:08

wkwwkwk,, ketimbang nganggur :v lol

Tsani Aziz 14 January 2015 at 14:27

gan cara menghapus script loading yang sebelumnya bagaimana?

Renaldy Ramadani 14 January 2015 at 14:30

agan pake template apa ? :v

Tsani Aziz 14 January 2015 at 14:32

Droidpluss Versi Kang Ismet :v gimana caranya?

Renaldy Ramadani 14 January 2015 at 14:36

cari dulu di html, kata load :v hapus yang berkaitan dengan loading page :D

Kang Rian 26 January 2015 at 15:58

wuih .. cantik sob loading page nya :thumbup , ajarin dong ..

Renaldy Ramadani 26 January 2015 at 16:01

itu kang udah ane jelasin di posting, :v :v tinggal ikuti langkah demi langkah :cool

Hakim Fikri 6 March 2015 at 12:31

:bingung