Now you can Subscribe using RSS

Submit your Email

Thursday, December 25, 2014

How to Create Animation Effects Loading Page in Blog

Irvan Dev


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

Irvan Dev / Author & Editor

I am Irvandev, I m a fairly easy blogger and it's, untill today My spouse and i still love writing and submitting articles for blog site "Blog Irvandev".

5 comments:

  1. Replies
    1. Silahkan mbak.... makasih sudah berkunjung di blog ini :gl

      Delete
  2. aseeek berhasil dan engga bikin berat dan jadi ingat waktu :hore :lol
    terimakasih mas =D boleh di sebarkan kan mas? =D

    ReplyDelete

Coprights @ 2016, Blogger Templates