How to Create Animation Effects Loading Page in Blog

ErnasLie
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


How to Create Animation Effects Page Loading in Blog - animation effects on this blog is very simple, but the animation page loading in this blog is very cool. There are so many websites that provide ajax loading page for the blog, and I will also share an animation effect loading page, taken from one of the provider's web page ajax loading animations. 
To create page loading animation effects on the blog, we just use a CSS and jQuery in order to become an animation effect on the blog page loading. You do not need to worry about the use of animation effects on your blog page loading, because the effect is very light loading. Irvan Dev Blog will share a tutorial to make animated loading on the blog, the loading animation effect it will look so beautiful and cool when you or blog visitors browsing on your blog and then move through the page loading animation effects will be visible. Well just for those who want to create or add animation effects loading page in the latest blog please read the tutorial below:

Loading animation effects using a digital clock as background  

1. Login to your blogger panel admin
2. Click On Template » Edit HTML
3. Find this kbd Ctrl+F  ]]></b:skin> or </style>
4. Then add the following CSS script just above the kbd ]]></b:skin> or </style>
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(http://i48.photobucket.com/albums/f237/acebangsam/ngopi-loader_zps9zmvbvgp.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; }

5. Add script HTML/Javascript below right above the code </body>
<script type='text/javascript'>
// Javascript Animation Loading Page IrvanDev Blog
//<![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);
});
// Digital Clock
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);
// Date and Month
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>


Click save and see the results, good luck.

Effects Loading Page
Animation Effects Loading Page images:acebangsam.us

5 comments

  1. kren mas ijin copy :D
  2. kren mas ijin copy :D
    1. Silahkan mbak.... makasih sudah berkunjung di blog ini :gl
  3. aseeek berhasil dan engga bikin berat dan jadi ingat waktu :hore :lol
    terimakasih mas =D boleh di sebarkan kan mas? =D
    1. :okey monggo silahkan mas Sulis...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.