Cara Membuat Efek Loading Di Blog Seperti Kang Rian

 Cara Memberi Efek Loading Di Blog Seperti Kang Rian

agan/aganwati disini saya akan menyampaikan cara untuk membuat efek loading blog persis seperti kang rian. sebetulnya ini sangat mudah untuk dipahami, tapi jika kita tidak berhati-hati menempatkan script kita tidak akan berhasil baik lah langsung saja ini dia caranya silahkan dibaca. 

Cara Pembuatanya: 

1. Login ke blog agan/aganwati dahulu www.blogger.com
2. Pilih Template> edit HTML
3. Cari kode </head> dengan Ctrl+F / F3
4. Letakan kode di bawah ini tepat di atas kode </head>

/#EfekLoading/Juragandawet69

<style>   #clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilP_bfpnq8dMWXzBqGpFRKZkiOCTYKTo7Yeim3-jKBTeyACu-1_bkfWQhpr0ttb9cf22VUf6ED7oisXVP8-PYxV8bb2Ld5FCH1vRLxgWRZTOZ_JvguC3Qel2bOmN5onHAcVqh_2UMDG5A9/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. Cari kode </body> dengan Ctrl+F 
6. Letakan kode di bawah ini tepat di atas kode </body>

<script>  //<![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>

7. Simpan Template dan coba lihat hasilnya gan.

itulah beberapa cara untuk membuat efek loading sepertikang rian. semoga ini dapat bermanfaat untuk agan/aganwati.dan selamat mencoba

Published By: Tsani Aziz | Jika Ingin Copas Tolong Sertakan Sumber Di Bawah ini

Terimah Kasih telah membaca artikel Cara Membuat Efek Loading Di Blog Seperti Kang Rian. Yang ditulis oleh Tsani Aziz .Pada hariKamis, 30 Oktober 2014. Jika anda ingin sebarluaskan artikel ini, mohon sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar Dan Jika Anda Memberi Like/Share Saya Sangat Berterima Kasih. Sekian Trimakasih ^_^

<a href="http://juragandawet69.blogspot.com/2014/10/cara-membuat-efek-loading-di-blog.html" target="_blank">Cara Membuat Efek Loading Di Blog Seperti Kang Rian</a>